@chaibuilder/sdk 2.0.0-beta.41 → 2.0.0-beta.43

package/dist/core.js

@@ -4,24 +4,24 @@ var bp = (r, h, g) => ev(r, typeof h != "symbol" ? h + "" : h, g);
 import { j as jsxRuntimeExports } from "./jsx-runtime-Dx-03ztt.js";
 import * as React from "react";
 import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, Component, Children, useMemo, useState, useRef, Suspense, memo, createElement, lazy } from "react";
-import { ag as useToast, S as Skeleton, B as Button, L as Label, aj as ContextMenu, ak as ContextMenuTrigger, al as ContextMenuContent, am as ContextMenuItem, O as Tooltip, P as TooltipTrigger, Q as TooltipContent, C as Card, x as CardHeader, E as CardDescription, F as CardContent, T as Textarea, y as CardFooter, D as Dialog, s as DialogTrigger, a as DialogContent, h as Badge, V as Popover, W as PopoverTrigger, X as PopoverContent, I as Input$1, U as TooltipPortal, e as AccordionItem, f as AccordionTrigger, g as AccordionContent, $ as DropdownMenu, a0 as DropdownMenuTrigger, a1 as DropdownMenuContent, G as ScrollArea, a5 as DropdownMenuLabel, a6 as DropdownMenuSeparator, a8 as DropdownMenuGroup, a2 as DropdownMenuItem, a7 as DropdownMenuShortcut, A as Accordion, J as Tabs, K as TabsList, M as TabsTrigger, N as TabsContent, j as AlertDialog, l as AlertDialogContent, m as AlertDialogHeader, o as AlertDialogTitle, k as AlertDialogTrigger, p as AlertDialogDescription, n as AlertDialogFooter, r as AlertDialogCancel, q as AlertDialogAction, b as Switch, a3 as DropdownMenuCheckboxItem, Y as HoverCard, Z as HoverCardTrigger, _ as HoverCardContent, ae as Separator, R as TooltipProvider, ai as Toaster } from "./context-menu-BsI3Hqio.js";
+import { ag as useToast, S as Skeleton, B as Button, L as Label, D as Dialog, s as DialogTrigger, a as DialogContent, h as Badge, T as Textarea, O as Tooltip, P as TooltipTrigger, Q as TooltipContent, V as Popover, W as PopoverTrigger, X as PopoverContent, I as Input$1, U as TooltipPortal, e as AccordionItem, f as AccordionTrigger, g as AccordionContent, $ as DropdownMenu, a0 as DropdownMenuTrigger, a1 as DropdownMenuContent, G as ScrollArea, a5 as DropdownMenuLabel, a6 as DropdownMenuSeparator, a8 as DropdownMenuGroup, a2 as DropdownMenuItem, a7 as DropdownMenuShortcut, A as Accordion, C as Card, x as CardHeader, E as CardDescription, F as CardContent, y as CardFooter, J as Tabs, K as TabsList, M as TabsTrigger, N as TabsContent, aj as ContextMenu, ak as ContextMenuTrigger, al as ContextMenuContent, am as ContextMenuItem, j as AlertDialog, k as AlertDialogTrigger, l as AlertDialogContent, m as AlertDialogHeader, o as AlertDialogTitle, p as AlertDialogDescription, n as AlertDialogFooter, r as AlertDialogCancel, q as AlertDialogAction, a3 as DropdownMenuCheckboxItem, Y as HoverCard, Z as HoverCardTrigger, _ as HoverCardContent, b as Switch, ae as Separator, R as TooltipProvider, ai as Toaster } from "./context-menu-BsI3Hqio.js";
 import { atom as atom$1, useAtomValue as useAtomValue$1, useAtom as useAtom$1, useSetAtom as useSetAtom$1, getDefaultStore as getDefaultStore$1 } from "jotai";
-import { has, get, find, filter, flatten, map, omit, isString, includes, without, compact, isObject, each, set, first, isEmpty, noop, keys, range, values, flattenDeep, startsWith, isNull, pick, sortBy, memoize, forEach, unset, chunk, cloneDeep, throttle, reverse, startCase, debounce, capitalize, flatMapDeep, some, split, reject, nth, toLower, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, isFunction as isFunction$1, uniq, toUpper, round } from "lodash-es";
+import { has, get, find, filter, flatten, map, omit, isString, includes, without, compact, isObject, each, set, first, isEmpty, noop, keys, range, values, flattenDeep, startsWith, isNull, pick, sortBy, memoize, forEach, unset, chunk, cloneDeep, throttle, reverse, startCase, debounce, capitalize, split, reject, nth, toLower, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, isFunction as isFunction$1, flatMapDeep, some, groupBy, uniq, toUpper, round } from "lodash-es";
 import { Provider } from "react-wrap-balancer";
 import { g as generateUUID, a as getBreakpointValue, c as cn, G as GenIcon } from "./iconBase-DHfFLkem.js";
 import { useTranslation, initReactI18next } from "react-i18next";
 import { useTranslation as Yv } from "react-i18next";
 import { flip } from "@floating-ui/dom";
 import { useFloating, shift } from "@floating-ui/react-dom";
-import { ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, ReaderIcon, DropdownMenuIcon, BoxIcon, DragHandleHorizontalIcon, ViewHorizontalIcon, BorderAllIcon, BorderTopIcon, TableIcon, RadiobuttonIcon, InputIcon, ButtonIcon, CheckboxIcon, GroupIcon, SpaceBetweenVerticallyIcon, ColumnsIcon, TextIcon, RowsIcon, SketchLogoIcon, DividerHorizontalIcon, CodeIcon, CursorTextIcon, VideoIcon, Link1Icon, HeadingIcon, ImageIcon, CardStackIcon, CardStackPlusIcon, ScissorsIcon, Cross2Icon, EyeOpenIcon, EyeClosedIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, InfoCircledIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretDownIcon, CaretRightIcon, CheckIcon, ResetIcon, SunIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
+import { ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, ReaderIcon, DropdownMenuIcon, BoxIcon, DragHandleHorizontalIcon, ViewHorizontalIcon, BorderAllIcon, BorderTopIcon, TableIcon, RadiobuttonIcon, InputIcon, ButtonIcon, CheckboxIcon, GroupIcon, SpaceBetweenVerticallyIcon, ColumnsIcon, TextIcon, RowsIcon, SketchLogoIcon, DividerHorizontalIcon, CodeIcon, CursorTextIcon, VideoIcon, Link1Icon, HeadingIcon, ImageIcon, Cross2Icon, EyeOpenIcon, EyeClosedIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, InfoCircledIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretDownIcon, CaretRightIcon, CardStackIcon, CardStackPlusIcon, ScissorsIcon, CheckIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, SunIcon, ResetIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
 import { useThrottledCallback, useDebouncedCallback, useResizeObserver, useIntervalEffect } from "@react-hookz/web";
 import { useFeature, FlagsProvider } from "flagged";
 import { getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredChaiBlocks, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
 import { registerChaiBlock as Xv } from "@chaibuilder/runtime";
-import { e as getDefaultExportFromCjs, d as defaultThemeOptions, g as getChaiThemeOptions, p as plugin, b as getChaiThemeCssVariables, a as getThemeFontsLinkMarkup } from "./ChaiThemeFn-Ba9O-eBT.js";
+import { e as getDefaultExportFromCjs, d as defaultThemeOptions, g as getChaiThemeOptions, p as plugin, a as getChaiThemeCssVariables, c as getThemeFontsLinkMarkup } from "./ChaiThemeFn-Cort9tch.js";
 import TreeModel from "tree-model";
 import { useHotkeys } from "react-hotkeys-hook";
-import { PlusIcon as PlusIcon$1, DatabaseIcon, Columns, Rows, GlobeIcon, ChevronRight, EyeOff, Eye, X, Plus, ChevronDown, List, Loader, SparklesIcon, SmileIcon, ShuffleIcon, Edit2, Paintbrush, Layers } from "lucide-react";
+import { PlusIcon as PlusIcon$1, DatabaseIcon, Columns, Rows, GlobeIcon, ChevronRight, X, Plus, ChevronDown, List, Loader, SparklesIcon, EyeOff, Eye, SmileIcon, ShuffleIcon, Edit2, Paintbrush, Layers } from "lucide-react";
 import ReactQuill, { Quill } from "react-quill";
 import typography from "@tailwindcss/typography";
 import forms from "@tailwindcss/forms";
@@ -32,14 +32,14 @@ import { S as STYLES_KEY, R as ROOT_TEMP_KEY } from "./STRINGS-DtEft2kY.js";
 import ReactDOM from "react-dom";
 import { ErrorBoundary } from "react-error-boundary";
 import { Resizable } from "re-resizable";
-import { Tree } from "react-arborist";
-import { parse, stringify } from "himalaya";
 import RjForm from "@rjsf/core";
 import validator from "@rjsf/validator-ajv8";
 import IconPicker, { IconPickerItem } from "react-icons-picker";
 import Autosuggest from "react-autosuggest";
 import Fuse from "fuse.js";
+import { parse, stringify } from "himalaya";
 import clsx from "clsx";
+import { Tree } from "react-arborist";
 import i18n from "i18next";
 import { default as Qv } from "i18next";
 import { motion } from "framer-motion";
@@ -4236,965 +4236,103 @@ const StaticBlocksRenderer = () => {
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
   ] });
-}), placeholderStyle = {
-  display: "flex",
-  alignItems: "center",
-  zIndex: 1
-}, DefaultCursor = React__default.memo(function({ top: h, left: g }) {
-  const x = {
-    position: "absolute",
-    pointerEvents: "none",
-    top: h + "px",
-    left: g + "px",
-    right: 0
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...placeholderStyle, ...x }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-0.5 flex-1 rounded-[1px] bg-green-500" }) });
-}), Overlay = memo(function({ children: h, isDragging: g }) {
-  return g ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pointer-events-none fixed left-0 top-0 z-[100] h-full w-full", children: h }) : null;
-}), DefaultDragPreview = memo(({ id: r, isDragging: h, mouse: g }) => {
-  const [x] = useBlocksStore(), v = useMemo(() => x.find((C) => C._id === r), [x, r]), S = useMemo(
-    () => ({
-      transform: `translate(${(g == null ? void 0 : g.x) - 10}px, ${(g == null ? void 0 : g.y) - 10}px)`
-    }),
-    [g]
-  );
-  return g ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Overlay, { isDragging: h, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      className: "pointer-events-none absolute z-50 rounded border border-border bg-gray-100/80 font-semibold text-blue-600 shadow-md dark:border-gray-700 dark:bg-gray-800",
-      style: S,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", className: "flex !cursor-grab items-center p-0.5", "aria-label": `Type: ${v == null ? void 0 : v._type}`, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "-mt-0.5 h-3 w-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TypeIcon, { type: v == null ? void 0 : v._type }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-2 truncate text-[11px]", children: (v == null ? void 0 : v._name) || (v == null ? void 0 : v._type) })
-      ] })
-    }
-  ) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "hidden" });
-}), PasteAtRootContextMenu = ({ parentContext: r, setParentContext: h }) => {
-  const { t: g } = useTranslation(), { canPaste: x, pasteBlocks: v } = usePasteBlocks();
-  return useEffect(() => {
-    x("root") || h(null);
-  }, [x("root")]), r && x("root") && /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      style: { position: "absolute", top: r.y - 75, left: r.x - 56 },
-      onMouseLeave: () => h(null),
-      className: "w-28 rounded-md border bg-white p-1 shadow-xl",
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          className: "flex cursor-pointer items-center gap-x-4 rounded px-2 py-1 text-xs hover:bg-blue-50",
-          onClick: () => {
-            v("root"), h(null);
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(CardStackIcon, {}),
-            " ",
-            g("Paste")
-          ]
-        }
-      )
-    }
-  );
-}, CopyPasteBlocks = () => {
-  const [r] = useBlocksStore(), [h] = useSelectedBlockIds(), { pasteBlocks: g } = usePasteBlocks(), [, x] = useCopyBlockIds(), { t: v } = useTranslation(), S = useSelectedBlock(), C = useCallback(() => {
-    const R = h.map((A) => {
-      const T = r.find((_) => _._id === A);
-      return {
-        id: A,
-        data: T
-      };
-    });
-    x(R.map((A) => A.id));
-  }, [h, r, x]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      ContextMenuItem,
-      {
-        disabled: !canDuplicateBlock(S == null ? void 0 : S._type),
-        onClick: C,
-        className: "flex items-center gap-x-4 text-xs",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, {}),
-          " ",
-          v("Copy")
-        ]
-      }
-    ),
+}), GlobalBlockSettings = () => {
+  const r = useSelectedBlock(), { data: h, refetch: g, isLoading: x } = useGlobalBlocksList(), v = useUpdateBlocksProps();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm", children: "Choose a global block" }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      ContextMenuItem,
+      "select",
       {
-        className: "flex items-center gap-x-4 text-xs",
-        onClick: () => {
-          g(h);
+        className: "h-8 w-full rounded-md border border-border bg-gray-50 p-0 px-2 text-xs dark:bg-gray-800",
+        value: (r == null ? void 0 : r.globalBlock) || "",
+        onChange: (S) => {
+          var C;
+          v([r._id], {
+            globalBlock: S.target.value,
+            _name: `Global: ${startCase((C = get(h, S.target.value, "")) == null ? void 0 : C.name)}`
+          });
         },
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(CardStackIcon, {}),
-          " ",
-          v("Paste")
-        ]
-      }
-    )
-  ] });
-}, CutBlocks = () => {
-  const [r] = useSelectedBlockIds(), [, h] = useCutBlockIds(), { t: g } = useTranslation();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(ContextMenuItem, { className: "flex items-center gap-x-4 text-xs", onClick: () => h(r), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ScissorsIcon, {}),
-    " ",
-    g("Cut")
-  ] });
-}, RemoveBlocks = () => {
-  const [r] = useSelectedBlockIds(), h = useRemoveBlocks(), g = useSelectedBlock(), { t: x } = useTranslation();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    ContextMenuItem,
-    {
-      disabled: !canDeleteBlock(g == null ? void 0 : g._type),
-      className: "flex items-center gap-x-4 text-xs",
-      onClick: () => h(r),
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TrashIcon, {}),
-        " ",
-        x("Remove")
-      ]
-    }
-  );
-}, BlockContextMenuContent = () => {
-  const { t: r } = useTranslation(), [h] = useSelectedBlockIds(), g = useDuplicateBlocks(), x = useSelectedBlock(), v = useCallback(() => {
-    g(h);
-  }, [h, g]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(ContextMenuContent, { className: "border-border text-xs", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      ContextMenuItem,
-      {
-        disabled: !canAddChildBlock(x == null ? void 0 : x._type),
-        className: "flex items-center gap-x-4 text-xs",
-        onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, x),
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { size: "14" }),
-          " ",
-          r("Add block")
+          /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Select a global block" }),
+          Object.keys(h).map((S) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: S, children: h[S].name || S }, S))
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      ContextMenuItem,
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
       {
-        disabled: !canDuplicateBlock(x == null ? void 0 : x._type),
-        className: "flex items-center gap-x-4 text-xs",
-        onClick: v,
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(CardStackPlusIcon, {}),
-          " ",
-          r("Duplicate")
-        ]
+        onClick: g,
+        className: "rounded-md bg-gray-100 p-1 px-2 text-xs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700",
+        children: x ? "Loading..." : "Refresh List"
       }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CutBlocks, {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CopyPasteBlocks, {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(RemoveBlocks, {})
+    ) })
   ] });
-}, BlockContextMenu = ({ children: r }) => /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ContextMenu, { children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsx(ContextMenuTrigger, { asChild: !0, children: r }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContextMenuContent, {})
-] }) }), defaultShortcuts = [
-  { key: "ArrowDown", command: "selectNext" },
-  { key: "ArrowUp", command: "selectPrev" },
-  { key: "ArrowLeft", command: "selectParent", when: "isLeaf || isClosed" },
-  { key: "ArrowLeft", command: "close", when: "isOpen" },
-  { key: "ArrowRight", command: "open", when: "isClosed" },
-  { key: "ArrowRight", command: "selectNext", when: "isOpen" },
-  { key: "Home", command: "selectFirst" },
-  { key: "End", command: "selectLast" }
-];
-function selectFirst(r) {
-  r.firstNode && r.select(r.firstNode.id);
-}
-function selectLast(r) {
-  r.lastNode && r.select(r.lastNode.id);
-}
-function selectNext(r) {
-  const h = r.selectedNodes[0].next || r.firstNode;
-  r.select(h.id);
-}
-function selectPrev(r) {
-  const h = r.selectedNodes[0].prev || r.lastNode;
-  r.select(h.id);
-}
-const selectParent = (r, h) => {
-  var x;
-  const g = ((x = r.selectedIds[0]) == null ? void 0 : x.parent) || null;
-  g && h && r.select(g.id);
-}, open = (r, h) => {
-  const g = r.selectedNodes[0];
-  g.isInternal && h && g.open();
-}, close = (r, h) => {
-  const g = r.selectedNodes[0];
-  g.isInternal && h && g.close();
-};
-function VscJson(r) {
-  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 16 16", fill: "currentColor" }, child: [{ tag: "path", attr: { fillRule: "evenodd", clipRule: "evenodd", d: "M6 2.984V2h-.09c-.313 0-.616.062-.909.185a2.33 2.33 0 0 0-.775.53 2.23 2.23 0 0 0-.493.753v.001a3.542 3.542 0 0 0-.198.83v.002a6.08 6.08 0 0 0-.024.863c.012.29.018.58.018.869 0 .203-.04.393-.117.572v.001a1.504 1.504 0 0 1-.765.787 1.376 1.376 0 0 1-.558.115H2v.984h.09c.195 0 .38.04.556.121l.001.001c.178.078.329.184.455.318l.002.002c.13.13.233.285.307.465l.001.002c.078.18.117.368.117.566 0 .29-.006.58-.018.869-.012.296-.004.585.024.87v.001c.033.283.099.558.197.824v.001c.106.273.271.524.494.753.223.23.482.407.775.53.293.123.596.185.91.185H6v-.984h-.09c-.2 0-.387-.038-.563-.115a1.613 1.613 0 0 1-.457-.32 1.659 1.659 0 0 1-.309-.467c-.074-.18-.11-.37-.11-.573 0-.228.003-.453.011-.672.008-.228.008-.45 0-.665a4.639 4.639 0 0 0-.055-.64 2.682 2.682 0 0 0-.168-.609A2.284 2.284 0 0 0 3.522 8a2.284 2.284 0 0 0 .738-.955c.08-.192.135-.393.168-.602.033-.21.051-.423.055-.64.008-.22.008-.442 0-.666-.008-.224-.012-.45-.012-.678a1.47 1.47 0 0 1 .877-1.354 1.33 1.33 0 0 1 .563-.121H6zm4 10.032V14h.09c.313 0 .616-.062.909-.185.293-.123.552-.3.775-.53.223-.23.388-.48.493-.753v-.001c.1-.266.165-.543.198-.83v-.002c.028-.28.036-.567.024-.863-.012-.29-.018-.58-.018-.869 0-.203.04-.393.117-.572v-.001a1.502 1.502 0 0 1 .765-.787 1.38 1.38 0 0 1 .558-.115H14v-.984h-.09c-.196 0-.381-.04-.557-.121l-.001-.001a1.376 1.376 0 0 1-.455-.318l-.002-.002a1.415 1.415 0 0 1-.307-.465v-.002a1.405 1.405 0 0 1-.118-.566c0-.29.006-.58.018-.869a6.174 6.174 0 0 0-.024-.87v-.001a3.537 3.537 0 0 0-.197-.824v-.001a2.23 2.23 0 0 0-.494-.753 2.331 2.331 0 0 0-.775-.53 2.325 2.325 0 0 0-.91-.185H10v.984h.09c.2 0 .387.038.562.115.174.082.326.188.457.32.127.134.23.29.309.467.074.18.11.37.11.573 0 .228-.003.452-.011.672-.008.228-.008.45 0 .665.004.222.022.435.055.64.033.214.089.416.168.609a2.285 2.285 0 0 0 .738.955 2.285 2.285 0 0 0-.738.955 2.689 2.689 0 0 0-.168.602c-.033.21-.051.423-.055.64a9.15 9.15 0 0 0 0 .666c.008.224.012.45.012.678a1.471 1.471 0 0 1-.877 1.354 1.33 1.33 0 0 1-.563.121H10z" }, child: [] }] })(r);
-}
-function BsLightningFill(r) {
-  return GenIcon({ tag: "svg", attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { d: "M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641z" }, child: [] }] })(r);
-}
-function TbEyeDown(r) {
-  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "path", attr: { d: "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" }, child: [] }, { tag: "path", attr: { d: "M12 18c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" }, child: [] }, { tag: "path", attr: { d: "M19 16v6" }, child: [] }, { tag: "path", attr: { d: "M22 19l-3 3l-3 -3" }, child: [] }] })(r);
-}
-function BiCollapseVertical(r) {
-  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 24 24" }, child: [{ tag: "path", attr: { d: "M12 7.59 7.05 2.64 5.64 4.05 12 10.41l6.36-6.36-1.41-1.41L12 7.59zM5.64 19.95l1.41 1.41L12 16.41l4.95 4.95 1.41-1.41L12 13.59l-6.36 6.36z" }, child: [] }] })(r);
-}
-function BiExpandVertical(r) {
-  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 24 24" }, child: [{ tag: "path", attr: { d: "m12 19.24-4.95-4.95-1.41 1.42L12 22.07l6.36-6.36-1.41-1.42L12 19.24zM5.64 8.29l1.41 1.42L12 4.76l4.95 4.95 1.41-1.42L12 1.93 5.64 8.29z" }, child: [] }] })(r);
-}
-const currentAddSelection = atom$1(null), Node = memo(({ node: r, style: h, dragHandle: g }) => {
-  var se;
-  const x = useBuilderProp("outlineMenuItems", []), { t: v } = useTranslation(), [S, , C] = useHiddenBlockIds(), [R] = useAtom$1(canvasIframeAtom);
-  let A = null;
-  const T = r.children.length > 0, { highlightBlock: _, clearHighlight: O } = useBlockHighlight(), { id: z, data: Z, isSelected: G, willReceiveDrop: q, isDragging: ee, isEditing: ge, handleClick: le } = r, ce = (me) => {
-    me.stopPropagation(), !S.includes(z) && r.toggle();
-  }, $ = (me) => {
-    me.isInternal && (A = me.isOpen, me.isOpen && me.close());
-  }, ie = (me) => {
-    me.isInternal && A !== null && (A ? me.open() : me.close(), A = null);
-  }, [he, Se] = useAtom$1(currentAddSelection), Me = () => {
-    var me;
-    W(), r.parent.isSelected || Se((me = r == null ? void 0 : r.parent) == null ? void 0 : me.id);
-  }, W = () => {
-    Se(null);
-  }, xe = (me) => {
-    W(), me.stopPropagation(), !r.isOpen && !S.includes(z) && r.toggle(), le(me);
-  };
-  useEffect(() => {
-    const me = setTimeout(() => {
-      q && !r.isOpen && !ee && !S.includes(z) && r.toggle();
-    }, 500);
-    return () => clearTimeout(me);
-  }, [q, r, ee]);
-  const ve = useMemo(() => {
-    const me = Object.keys(Z), V = [];
-    for (let ue = 0; ue < me.length; ue++)
-      if (me[ue].endsWith("_attrs")) {
-        const de = Z[me[ue]], Ae = Object.keys(de).join("|");
-        Ae.match(/x-data/) && V.push("data"), Ae.match(/x-on/) && V.push("event"), Ae.match(/x-show|x-if/) && V.push("show");
+}, BindingWidget = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" });
+var client = { exports: {} }, reactDomClient_production = {}, scheduler = { exports: {} }, scheduler_production = {};
+/**
+ * @license React
+ * scheduler.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var hasRequiredScheduler_production;
+function requireScheduler_production() {
+  return hasRequiredScheduler_production || (hasRequiredScheduler_production = 1, function(r) {
+    function h(V, ue) {
+      var de = V.length;
+      V.push(ue);
+      e: for (; 0 < de; ) {
+        var Ae = de - 1 >>> 1, Ee = V[Ae];
+        if (0 < v(Ee, ue))
+          V[Ae] = ue, V[de] = Ee, de = Ae;
+        else break e;
       }
-    return V;
-  }, [Z]), ye = (me, V) => {
-    const ue = R.contentDocument || R.contentWindow.document, de = ue.querySelector(`[data-block-id=${me}]`);
-    de && de.setAttribute("data-drop", V);
-    const Ae = de.getBoundingClientRect(), Ee = R.getBoundingClientRect();
-    Ae.top >= Ee.top && Ae.left >= Ee.left && Ae.bottom <= Ee.bottom && Ae.right <= Ee.right || (ue.documentElement.scrollTop = de.offsetTop - Ee.top);
-  }, je = (me) => {
-    W();
-    const V = get(r, "parent.id");
-    V !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: V, position: me }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: me });
-  };
-  return z === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative w-full cursor-pointer", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        onClick: () => je(-1),
-        className: "h-1 rounded bg-purple-500 opacity-0 duration-200 group-hover:opacity-100",
-        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform items-center gap-x-1 rounded-full bg-purple-500 px-3 py-1 text-[9px] leading-tight text-white hover:bg-purple-500", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-2 w-2 stroke-[3]" }),
-          " ",
-          v("Add block")
-        ] })
+    }
+    function g(V) {
+      return V.length === 0 ? null : V[0];
+    }
+    function x(V) {
+      if (V.length === 0) return null;
+      var ue = V[0], de = V.pop();
+      if (de !== ue) {
+        V[0] = de;
+        e: for (var Ae = 0, Ee = V.length, Ge = Ee >>> 1; Ae < Ge; ) {
+          var Ye = 2 * (Ae + 1) - 1, Qt = V[Ye], Oe = Ye + 1, Mt = V[Oe];
+          if (0 > v(Qt, de))
+            Oe < Ee && 0 > v(Mt, Qt) ? (V[Ae] = Mt, V[Oe] = de, Ae = Oe) : (V[Ae] = Qt, V[Ye] = de, Ae = Ye);
+          else if (Oe < Ee && 0 > v(Mt, de))
+            V[Ae] = Mt, V[Oe] = de, Ae = Oe;
+          else break e;
+        }
       }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContextMenu, { id: z, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      onMouseEnter: () => _(z),
-      onMouseLeave: () => O(),
-      onClick: xe,
-      style: h,
-      "data-node-id": z,
-      ref: S.includes(z) ? null : g,
-      onDragStart: () => $(r),
-      onDragEnd: () => ie(r),
-      onDragOver: (me) => {
-        me.preventDefault(), ye(z, "yes");
-      },
-      onDragLeave: (me) => {
-        me.preventDefault(), ye(z, "no");
-      },
-      onDrop: (me) => {
-        me.preventDefault(), ye(z, "no");
-      },
-      children: [
-        (r == null ? void 0 : r.rowIndex) > 0 && (r.parent.isOpen && canAddChildBlock(get(r, "parent.data._type")) || ((se = r == null ? void 0 : r.parent) == null ? void 0 : se.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            onClick: (me) => {
-              me.stopPropagation(), je(r.childIndex);
-            },
-            onMouseEnter: Me,
-            onMouseLeave: W,
-            className: "absolute -top-0.5 h-1 w-[90%] rounded bg-purple-500 opacity-0 delay-200 duration-200 group-hover:opacity-100",
-            children: /* @__PURE__ */ jsxRuntimeExports.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-purple-500 p-1 outline outline-2 outline-white hover:bg-purple-500", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-3 w-3 stroke-[4] text-white" }) })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "div",
-          {
-            className: cn(
-              "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 text-foreground/80 outline-none",
-              G ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
-              q && canAcceptChildBlock(Z._type, "Icon") ? "bg-green-200" : "",
-              (r == null ? void 0 : r.id) === he ? "bg-purple-100" : "",
-              ee && "opacity-20",
-              S.includes(z) ? "opacity-50" : ""
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center transition-transform duration-100 ${r.isOpen ? "rotate-90" : ""}`,
-                    children: T && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: ce, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      ChevronRight,
-                      {
-                        className: `h-3 w-3 stroke-[3] ${G ? "text-slate-200" : "text-slate-400"}`
-                      }
-                    ) })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "leading-1 flex items-center", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(TypeIcon, { type: Z == null ? void 0 : Z._type }),
-                  ge ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: r }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                    "div",
-                    {
-                      className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
-                      onDoubleClick: (me) => {
-                        me.stopPropagation(), r.edit(), r.deselect();
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (Z == null ? void 0 : Z._name) || (Z == null ? void 0 : Z._type.split("/").pop()) }),
-                        ve.includes("data") && /* @__PURE__ */ jsxRuntimeExports.jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
-                        ve.includes("event") && /* @__PURE__ */ jsxRuntimeExports.jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
-                        ve.includes("show") && /* @__PURE__ */ jsxRuntimeExports.jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
-                      ]
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-2 group-hover:visible", children: [
-                !S.includes(z) && x.map((me) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    TooltipTrigger,
-                    {
-                      className: "cursor-pointer rounded bg-transparent hover:bg-white hover:text-blue-500",
-                      asChild: !0,
-                      children: React__default.createElement(me.item, { blockId: z })
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: me.tooltip })
-                ] })),
-                canAddChildBlock(Z == null ? void 0 : Z._type) && !S.includes(z) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    TooltipTrigger,
-                    {
-                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: z }),
-                      className: "cursor-pointer rounded bg-transparent hover:text-black",
-                      asChild: !0,
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { size: "15" })
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-[9999]", side: "left", children: v("Add block") })
-                ] }) : null,
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    TooltipTrigger,
-                    {
-                      onClick: (me) => {
-                        me.stopPropagation(), C(z), r.isOpen && r.toggle();
-                      },
-                      className: "cursor-pointer rounded bg-transparent hover:text-black",
-                      asChild: !0,
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(EyeOff, { size: "15" })
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-[9999]", side: "left", children: v("Hide block") })
-                ] })
-              ] })
-            ]
-          }
-        )
-      ]
+      return ue;
     }
-  ) }) });
-}), Input = ({ node: r }) => {
-  var h, g;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "input",
-    {
-      autoFocus: !0,
-      className: cn(
-        "ml-2 !h-4 w-full rounded-sm border border-border bg-background px-1 text-[11px] leading-tight outline-none",
-        r.isSelected ? "text-black dark:text-white" : ""
-      ),
-      type: "text",
-      defaultValue: ((h = r.data) == null ? void 0 : h._name) || ((g = r.data) == null ? void 0 : g._type),
-      onFocus: (x) => x.currentTarget.select(),
-      onBlur: (x) => r.submit(x.currentTarget.value),
-      onKeyDown: (x) => {
-        x.key === "Enter" && r.submit(x.currentTarget.value);
-      }
-    }
-  );
-}, useCanMove = () => {
-  const [r] = useBlocksStore();
-  return (h, g) => {
-    var S;
-    const x = (S = find(r, { _id: g })) == null ? void 0 : S._type, v = first(h.map((C) => {
-      var R;
-      return (R = find(r, { _id: C })) == null ? void 0 : R._type;
-    }));
-    return canAcceptChildBlock(x, v);
-  };
-}, 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 = () => {
-    setIds([]), setStyleBlocks([]);
-  }, filteredTreeData = useMemo(() => {
-    const r = (g, x) => g.filter((v) => !x.includes(v._id)).map((v) => ({
-      ...v,
-      children: v.children ? r(v.children, x) : []
-    }));
-    return [...r(treeData, cutBlocksIds), { _type: ROOT_TEMP_KEY, _id: ROOT_TEMP_KEY, children: [] }];
-  }, [treeData, cutBlocksIds]), onRename = ({ id: r, name: h, node: g }) => {
-    updateBlockProps([r], { _name: h }, g.data._name);
-  }, onMove = ({ dragIds: r, parentId: h, index: g }) => {
-    canMove(r, h) && moveBlocks(r, h, g);
-  }, onSelect = (r) => {
-    if (r.length === 0) return;
-    const h = r[0] ? r[0].id : "";
-    setStyleBlocks([]), setIds([h]);
-  }, onContextMenu = (r) => {
-    var x;
-    r.preventDefault(), parentContext && setParentContext(null);
-    const h = r.target, g = h.getAttribute("data-node-id") || ((x = h.closest("[data-node-id]")) == null ? void 0 : x.getAttribute("data-node-id"));
-    g ? (setStyleBlocks([]), setIds([g])) : (setStyleBlocks([]), setIds([]), setParentContext({ x: r.clientX, y: r.clientY }));
-  }, debouncedDisableDrop = useDebouncedCallback(
-    ({ parentNode: r, dragNodes: h }) => {
-      var g;
-      return (r == null ? void 0 : r.data._type) === ROOT_TEMP_KEY || !canAcceptChildBlock(r == null ? void 0 : r.data._type, (g = h[0]) == null ? void 0 : g.data._type);
-    },
-    [],
-    300
-  ), handleKeyDown = (e) => {
-    if (!treeRef.current) return;
-    const tree = treeRef.current, selectedNode = tree.selectedNodes[0];
-    if (!selectedNode) return;
-    setIds[selectedNode.id], setStyleBlocks([]);
-    const isLeaf = !selectedNode.isInternal, isClosed = !selectedNode.isOpen, isOpen = selectedNode.isOpen, shortcut = defaultShortcuts.find((s) => s.key === e.key && (!s.when || eval(s.when)));
-    if (shortcut)
-      switch (e.preventDefault(), shortcut.command) {
-        case "selectNext":
-          selectNext(tree);
-          break;
-        case "selectPrev":
-          selectPrev(tree);
-          break;
-        case "selectParent":
-          selectParent(tree, isLeaf || isClosed);
-          break;
-        case "close":
-          close(tree, isOpen);
-          break;
-        case "open":
-          open(tree, isClosed);
-          break;
-        case "selectFirst":
-          selectFirst(tree);
-          break;
-        case "selectLast":
-          selectLast(tree);
-          break;
-      }
-  };
-  return useEffect(() => {
-    const r = () => {
-      treeRef.current && setTreeRef(treeRef.current);
-    };
-    r();
-    const h = new MutationObserver(r);
-    return h.observe(document.body, { childList: !0, subtree: !0 }), () => h.disconnect();
-  }, [setTreeRef]), isEmpty(treeData) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-10 flex h-full w-full items-center justify-center p-8 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mb-1.5 text-sm text-gray-400", children: [
-    t("This page is empty"),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK), variant: "default", size: "sm", children: [
-      "+ ",
-      t("Add Block")
-    ] })
-  ] }) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("flex h-full select-none flex-col space-y-1"), onClick: () => clearSelection(), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        id: "outline-view",
-        className: "no-scrollbar h-full overflow-y-auto text-sm",
-        onKeyDown: (r) => {
-          treeRef.current.isEditing || handleKeyDown(r);
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2 flex items-center justify-end gap-x-2 pb-2 text-sm text-muted-foreground", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Button,
-                {
-                  onClick: () => setHiddenBlocks([]),
-                  variant: "outline",
-                  className: "h-fit p-1 disabled:cursor-not-allowed disabled:opacity-50",
-                  size: "sm",
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "h-4 w-4" })
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Show hidden blocks") })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { className: "h-fit p-1", onClick: () => {
-                var r;
-                return (r = treeRef == null ? void 0 : treeRef.current) == null ? void 0 : r.openAll();
-              }, variant: "outline", size: "sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx(BiExpandVertical, { size: "14" }) }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Expand all") })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { className: "h-fit p-1", onClick: () => {
-                var r;
-                return (r = treeRef == null ? void 0 : treeRef.current) == null ? void 0 : r.closeAll();
-              }, variant: "outline", size: "sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx(BiCollapseVertical, { size: "14" }) }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Collapse all") })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "group relative z-[9999] ml-5 w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: 0 }),
-              className: "h-1 w-[90%] rounded bg-purple-500 opacity-0 duration-200 group-hover:opacity-100",
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-[45%] top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-purple-500 p-1 outline outline-2 outline-white hover:bg-purple-500", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-3 w-3 stroke-[3] text-white" }) })
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Tree,
-            {
-              ref: treeRef,
-              height: window.innerHeight - 160,
-              className: "no-scrollbar !h-full max-w-full space-y-1 !overflow-y-auto !overflow-x-hidden",
-              rowClassName: "flex items-center h-full border-b border-transparent",
-              selection: ids[0] || "",
-              onRename,
-              openByDefault: !1,
-              onMove,
-              data: [...filteredTreeData],
-              renderCursor: DefaultCursor,
-              onSelect,
-              childrenAccessor: (r) => r.children,
-              width: "100%",
-              rowHeight: 28,
-              renderDragPreview: DefaultDragPreview,
-              indent: 10,
-              onContextMenu,
-              disableDrop: debouncedDisableDrop,
-              idAccessor: "_id",
-              children: Node
-            }
-          )
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(PasteAtRootContextMenu, { parentContext, setParentContext })
-  ] });
-}, hasVideoEmbed = (r) => {
-  const h = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/, g = /(?:https?:\/\/)?(?:www\.)?(player)?.vimeo\.com/;
-  return h.test(r) || g.test(r);
-}, getVideoURLFromHTML = (r) => {
-  if (isEmpty(r)) return r;
-  const h = /<video[^>]+src=['"]([^'">]+)['"]/, g = /<iframe[^>]+src=['"]([^'">]+)['"]/, x = r.match(h), v = r.match(g), S = x ? x[1] : v ? v[1] : null, C = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/, R = /(?:https?:\/\/)?(?:www\.)?player.vimeo\.com/;
-  return S && (C.test(S) || R.test(S)) ? S : r;
-}, NAME_ATTRIBUTES = ["chai-name", "data-chai-name"], ATTRIBUTE_MAP = {
-  img: { alt: "alt", width: "width", height: "height", src: "image" },
-  video: {
-    src: "url",
-    autoplay: "controls.autoPlay",
-    muted: "controls.muted",
-    loop: "controls.loop",
-    controls: "controls.widgets"
-  },
-  a: {
-    href: "link.href",
-    target: "link.target",
-    type: ""
-    // @TODO: Detect here what to url, email, phone, elementId
-  },
-  input: {
-    placeholder: "placeholder",
-    required: "required",
-    type: "inputType",
-    name: "fieldName"
-  },
-  textarea: {
-    placeholder: "placeholder",
-    required: "required",
-    type: "inputType",
-    name: "fieldName"
-  },
-  select: {
-    placeholder: "placeholder",
-    required: "required",
-    multiple: "multiple",
-    name: "fieldName"
-  }
-}, shouldAddText = (r, h) => r.children.length === 1 && includes(
-  ["Heading", "Paragraph", "Span", "ListItem", "Button", "Label", "TableCell", "Link", "RichText"],
-  h._type
-), getTextContent = (r) => r.map((h) => h.type === "text" ? get(h, "content", "") : isEmpty(h.children) ? "" : getTextContent(h.children)).join(""), getSanitizedValue = (r) => r === null ? "" : r, getAttrs = (r) => {
-  if (r.tagName === "svg") return {};
-  const h = {}, g = ATTRIBUTE_MAP[r.tagName] || {}, x = r.attributes;
-  return forEach(x, ({ key: v, value: S }) => {
-    if (!includes(NAME_ATTRIBUTES, v))
-      if (g[v]) {
-        if (r.tagName === "img" && v === "src" && !S.startsWith("http")) {
-          const C = find(r.attributes, { key: "width" }), R = find(r.attributes, { key: "height" });
-          C && R ? S = `https://via.placeholder.com/${C == null ? void 0 : C.value}x${R == null ? void 0 : R.value}` : S = "https://via.placeholder.com/150x150";
-        }
-        set(h, g[v], getSanitizedValue(S));
-      } else includes(["style", "class", "srcset"], v) || (has(h, "styles_attrs") || (h.styles_attrs = {}), startsWith(v, "@") && (v = v.replace("@", "x-on:")), h.styles_attrs[`${v}`] = getSanitizedValue(S));
-  }), delete h.class, h;
-}, getStyles = (r, h = "styles") => {
-  if (!r.attributes) return { [h]: `${STYLES_KEY},` };
-  const g = find(r.attributes, { key: "class" });
-  if (g) {
-    const x = g.value;
-    return { [h]: `${STYLES_KEY},${x}` };
-  }
-  return { [h]: `${STYLES_KEY},` };
-}, getBlockProps = (r) => {
-  const h = get(r, "attributes", []), g = h.find((R) => R.key === "data-chai-richtext" || R.key === "chai-richtext"), x = h.find((R) => R.key === "data-chai-lightbox" || R.key === "chai-lightbox"), v = h.find((R) => R.key === "data-chai-dropdown" || R.key === "chai-dropdown"), S = h.find(
-    (R) => R.key === "data-chai-dropdown-button" || R.key === "chai-dropdown-button"
-  ), C = h.find(
-    (R) => R.key === "data-chai-dropdown-content" || R.key === "chai-dropdown-content"
-  );
-  if (v)
-    return { _type: "Dropdown" };
-  if (S)
-    return { _type: "DropdownButton" };
-  if (C)
-    return { _type: "DropdownContent" };
-  if (g)
-    return { _type: "RichText" };
-  if (x)
-    return { _type: "LightBoxLink" };
-  switch (r.tagName) {
-    // self closing tags
-    case "img":
-      return { _type: "Image" };
-    case "input":
-      return { _type: "Input", showLabel: !1 };
-    // showLabel: hiding default block label
-    case "hr":
-      return { _type: "Divider" };
-    case "br":
-      return { _type: "LineBreak" };
-    case "textarea":
-      return { _type: "TextArea", showLabel: !1 };
-    case "audio":
-      return { _type: "Audio" };
-    case "canvas":
-      return { _type: "Canvas" };
-    case "video":
-    case "iframe":
-      return { _type: "CustomHTML" };
-    case "svg":
-      return { _type: "Icon" };
-    // non self closing tags
-    // fixed structure
-    case "select":
-      return { _type: "Select", options: [] };
-    case "option":
-      return { _type: "Option" };
-    case "ul":
-    case "ol":
-    case "dl":
-      return {
-        _type: "List",
-        tag: r.tagName,
-        _listType: r.tagName === "ol" ? "list-decimal" : "list-none"
-      };
-    case "li":
-    case "dt":
-      return { _type: "ListItem", tag: r.tagName };
-    // non self closing tags
-    // free flow structure
-    case "span":
-    case "figcaption":
-    case "legend":
-      return { _type: "Span", tag: r.tagName };
-    case "p":
-      return { _type: "Paragraph", content: "" };
-    case "a":
-      return { _type: "Link" };
-    case "form":
-      return { _type: "Form" };
-    case "label":
-      return { _type: "Label" };
-    case "button":
-      return { _type: "Button" };
-    case "code":
-      return { _type: "Code" };
-    case "h1":
-    case "h2":
-    case "h3":
-    case "h4":
-    case "h5":
-    case "h6":
-      return { _type: "Heading", tag: r.tagName };
-    case "table":
-      return { _type: "Table" };
-    case "tr":
-      return { _type: "TableRow" };
-    case "td":
-    case "th":
-      return { _type: "TableCell", tag: r.tagName };
-    case "thead":
-      return { _type: "TableHead" };
-    case "tbody":
-      return { _type: "TableBody" };
-    case "tfoot":
-      return { _type: "TableFooter" };
-    default: {
-      const R = get(r, "children", []).length > 0 ? "Box" : "EmptyBox";
-      return {
-        _type: R,
-        tag: r.tagName,
-        _name: R == "EmptyBox" || r.tagName === "div" ? R : capitalize(r.tagName)
-      };
-    }
-  }
-}, traverseNodes = (r, h = null) => flatMapDeep(r, (g) => {
-  var O, z, Z, G, q, ee, ge, le;
-  if (g.type === "comment") return [];
-  console.log("node ===>", g);
-  let x = { _id: generateUUID() };
-  if (h && (x._parent = h.block._id), g.type === "text")
-    return isEmpty(get(g, "content", "")) ? [] : h && shouldAddText(h.node, h.block) ? (set(h, "block.content", get(g, "content", "")), []) : { ...x, _type: "Text", content: get(g, "content", "") };
-  const v = get(g, "attributes", []), S = v.find(
-    (ce) => ce.key === "data-chai-richtext" || ce.key === "chai-richtext"
-  ), C = v.find(
-    (ce) => ce.key === "data-chai-lightbox" || ce.key === "chai-lightbox"
-  ), R = v.find(
-    (ce) => ce.key === "data-chai-dropdown" || ce.key === "chai-dropdown"
-  ), A = v.find(
-    (ce) => ce.key === "data-chai-dropdown-button" || ce.key === "chai-dropdown-button"
-  ), T = v.find(
-    (ce) => ce.key === "data-chai-dropdown-content" || ce.key === "chai-dropdown-content"
-  );
-  if (x = {
-    ...x,
-    ...getBlockProps(g),
-    ...getAttrs(g),
-    ...getStyles(g)
-  }, g.attributes) {
-    const ce = g.attributes.find(($) => includes(NAME_ATTRIBUTES, $.key));
-    ce && (x._name = ce.value);
-  }
-  if (S)
-    return x.content = stringify(g.children), has(x, "styles_attrs.data-chai-richtext") && delete x.styles_attrs["data-chai-richtext"], has(x, "styles_attrs.chai-richtext") && delete x.styles_attrs["chai-richtext"], [x];
-  if (C) {
-    const ce = [
-      "data-chai-lightbox",
-      "chai-lightbox",
-      "data-vbtype",
-      "data-autoplay",
-      "data-maxwidth",
-      "data-overlay",
-      "data-gall",
-      "href"
-    ];
-    x = {
-      ...x,
-      href: ((O = v.find(($) => $.key === "href")) == null ? void 0 : O.value) || "",
-      hrefType: ((z = v.find(($) => $.key === "data-vbtype")) == null ? void 0 : z.value) || "video",
-      autoplay: ((Z = v.find(($) => $.key === "data-autoplay")) == null ? void 0 : Z.value) === "true" ? "true" : "false",
-      maxWidth: ((q = (G = v.find(($) => $.key === "data-maxwidth")) == null ? void 0 : G.value) == null ? void 0 : q.replace("px", "")) || "",
-      backdropColor: ((ee = v.find(($) => $.key === "data-overlay")) == null ? void 0 : ee.value) || "",
-      galleryName: ((ge = v.find(($) => $.key === "data-gall")) == null ? void 0 : ge.value) || ""
-    }, forEach(ce, ($) => {
-      has(x, `styles_attrs.${$}`) && delete x.styles_attrs[$];
-    });
-  }
-  if (R && (delete x.styles_attrs, x.showDropdown = !1), T && delete x.styles_attrs, A) {
-    delete x.styles_attrs;
-    const ce = filter(g.children || [], (ie) => (ie == null ? void 0 : ie.tagName) !== "span");
-    x.content = getTextContent(ce);
-    const $ = find(
-      g.children || [],
-      (ie) => (ie == null ? void 0 : ie.tagName) === "span" && some(ie.children || [], (he) => (he == null ? void 0 : he.tagName) === "svg")
-    );
-    if ($) {
-      const ie = find($.children || [], (he) => (he == null ? void 0 : he.tagName) === "svg");
-      if (ie) {
-        x.icon = stringify([ie]);
-        const { height: he, width: Se } = getSvgDimensions(ie, "16px", "16px");
-        x.iconHeight = he, x.iconWidth = Se;
-      }
-    }
-    return [x];
-  }
-  if (x._type === "Input") {
-    const ce = x.inputType || "text";
-    ce === "checkbox" ? set(x, "_type", "Checkbox") : ce === "radio" && set(x, "_type", "Radio");
-  } else if (g.tagName === "video" || g.tagName === "iframe") {
-    const ce = stringify([g]);
-    return hasVideoEmbed(ce) && (set(x, "_type", "Video"), set(x, "url", getVideoURLFromHTML(ce)), set(x, "styles", `${STYLES_KEY},`), set(x, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), x.content = ce, [x];
-  } else if (g.tagName === "svg") {
-    const ce = find(g.attributes, { key: "height" }), $ = find(g.attributes, { key: "width" }), ie = get(ce, "value") ? `[${get(ce, "value")}px]` : "24px", he = get($, "value") ? `[${get($, "value")}px]` : "24px", Se = get(find(g.attributes, { key: "class" }), "value", "w-full h-full");
-    return x.styles = `${STYLES_KEY}, ${cn(`w-${he} h-${ie}`, Se)}`.trim(), g.attributes = filter(g.attributes, (Me) => !includes(["style", "width", "height", "class"], Me.key)), x.icon = stringify([g]), [x];
-  } else if (g.tagName == "option" && h && ((le = h.block) == null ? void 0 : le._type) === "Select")
-    return h.block.options.push({
-      label: getTextContent(g.children),
-      ...getAttrs(g)
-    }), [];
-  const _ = traverseNodes(g.children, { block: x, node: g });
-  return [x, ..._];
-}), getSvgDimensions = (r, h, g) => {
-  const x = get(r, "attributes", []), v = find(x, { key: "height" }), S = find(x, { key: "width" });
-  return {
-    height: get(v, "value") ? `[${get(v, "value")}px]` : g,
-    width: get(S, "value") ? `[${get(S, "value")}px]` : h
-  };
-}, getSanitizedHTML = (r) => {
-  r = r.replace(/(\w+)=\\?"(.*?)\\?"/g, (x, v, S) => {
-    let C = S.replace(/\\"/g, '"');
-    return C = C.replace(/{([^}]+)}/g, (R) => R.replace(/"/g, '\\"')), `${v}="${C.replace(/\\"/g, '"')}"`;
-  }), r = r.replace(/\\n/g, "").replace(/\\\\/g, "").replace(/\\([/<>])/g, "$1").replace(/\\./g, "").replace(/[\n\r\t\f\v]/g, "");
-  const h = r.match(/<body[^>]*>[\s\S]*?<\/body>/);
-  return (h && h.length > 0 ? h[0].replace(/<body/, "<div").replace(/<\/body>/, "</div>") : r).replace(/\s+/g, " ").replaceAll("> <", "><").replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "").trim();
-}, getBlocksFromHTML = (r) => {
-  const h = parse(getSanitizedHTML(r));
-  return isEmpty(r) ? [] : flatten(traverseNodes(h));
-}, ImportHTML = ({ parentId: r, position: h }) => {
-  const { t: g } = useTranslation(), [x, v] = useState(""), { addPredefinedBlock: S } = useAddBlock(), C = () => {
-    const R = getBlocksFromHTML(x);
-    S([...R], r, h), v(""), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "border-border/0 p-0 shadow-none", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardDescription, { children: g("Use HTML snippets from Tailwind CSS component libraries") }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-2 px-3 py-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "current", className: "text-sm", children: g("Tailwind HTML snippet") }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Textarea,
-        {
-          autoFocus: !0,
-          tabIndex: 1,
-          ref: (R) => R && R.focus(),
-          onChange: (R) => v(R.target.value),
-          rows: 12,
-          value: x,
-          placeholder: g("Enter your code snippet here"),
-          className: "resize-none overflow-x-auto whitespace-pre bg-background font-mono text-xs font-normal"
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CardFooter, { className: "flex flex-col justify-end p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { disabled: x.trim() === "", onClick: () => C(), size: "sm", className: "w-fit", children: g("Import HTML") }) })
-  ] });
-}, GlobalBlockSettings = () => {
-  const r = useSelectedBlock(), { data: h, refetch: g, isLoading: x } = useGlobalBlocksList(), v = useUpdateBlocksProps();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm", children: "Choose a global block" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "select",
-      {
-        className: "h-8 w-full rounded-md border border-border bg-gray-50 p-0 px-2 text-xs dark:bg-gray-800",
-        value: (r == null ? void 0 : r.globalBlock) || "",
-        onChange: (S) => {
-          var C;
-          v([r._id], {
-            globalBlock: S.target.value,
-            _name: `Global: ${startCase((C = get(h, S.target.value, "")) == null ? void 0 : C.name)}`
-          });
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Select a global block" }),
-          Object.keys(h).map((S) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: S, children: h[S].name || S }, S))
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        onClick: g,
-        className: "rounded-md bg-gray-100 p-1 px-2 text-xs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700",
-        children: x ? "Loading..." : "Refresh List"
-      }
-    ) })
-  ] });
-}, BindingWidget = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" });
-var client = { exports: {} }, reactDomClient_production = {}, scheduler = { exports: {} }, scheduler_production = {};
-/**
- * @license React
- * scheduler.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredScheduler_production;
-function requireScheduler_production() {
-  return hasRequiredScheduler_production || (hasRequiredScheduler_production = 1, function(r) {
-    function h(V, ue) {
-      var de = V.length;
-      V.push(ue);
-      e: for (; 0 < de; ) {
-        var Ae = de - 1 >>> 1, Ee = V[Ae];
-        if (0 < v(Ee, ue))
-          V[Ae] = ue, V[de] = Ee, de = Ae;
-        else break e;
-      }
-    }
-    function g(V) {
-      return V.length === 0 ? null : V[0];
-    }
-    function x(V) {
-      if (V.length === 0) return null;
-      var ue = V[0], de = V.pop();
-      if (de !== ue) {
-        V[0] = de;
-        e: for (var Ae = 0, Ee = V.length, Ge = Ee >>> 1; Ae < Ge; ) {
-          var Ye = 2 * (Ae + 1) - 1, Qt = V[Ye], Oe = Ye + 1, Mt = V[Oe];
-          if (0 > v(Qt, de))
-            Oe < Ee && 0 > v(Mt, Qt) ? (V[Ae] = Mt, V[Oe] = de, Ae = Oe) : (V[Ae] = Qt, V[Ye] = de, Ae = Ye);
-          else if (Oe < Ee && 0 > v(Mt, de))
-            V[Ae] = Mt, V[Oe] = de, Ae = Oe;
-          else break e;
-        }
-      }
-      return ue;
-    }
-    function v(V, ue) {
-      var de = V.sortIndex - ue.sortIndex;
-      return de !== 0 ? de : V.id - ue.id;
-    }
-    if (r.unstable_now = void 0, typeof performance == "object" && typeof performance.now == "function") {
-      var S = performance;
-      r.unstable_now = function() {
-        return S.now();
-      };
-    } else {
-      var C = Date, R = C.now();
-      r.unstable_now = function() {
-        return C.now() - R;
-      };
-    }
-    var A = [], T = [], _ = 1, O = null, z = 3, Z = !1, G = !1, q = !1, ee = typeof setTimeout == "function" ? setTimeout : null, ge = typeof clearTimeout == "function" ? clearTimeout : null, le = typeof setImmediate < "u" ? setImmediate : null;
-    function ce(V) {
-      for (var ue = g(T); ue !== null; ) {
-        if (ue.callback === null) x(T);
-        else if (ue.startTime <= V)
-          x(T), ue.sortIndex = ue.expirationTime, h(A, ue);
-        else break;
-        ue = g(T);
+    function v(V, ue) {
+      var de = V.sortIndex - ue.sortIndex;
+      return de !== 0 ? de : V.id - ue.id;
+    }
+    if (r.unstable_now = void 0, typeof performance == "object" && typeof performance.now == "function") {
+      var S = performance;
+      r.unstable_now = function() {
+        return S.now();
+      };
+    } else {
+      var C = Date, R = C.now();
+      r.unstable_now = function() {
+        return C.now() - R;
+      };
+    }
+    var A = [], T = [], _ = 1, O = null, z = 3, Z = !1, G = !1, q = !1, ee = typeof setTimeout == "function" ? setTimeout : null, ge = typeof clearTimeout == "function" ? clearTimeout : null, le = typeof setImmediate < "u" ? setImmediate : null;
+    function ce(V) {
+      for (var ue = g(T); ue !== null; ) {
+        if (ue.callback === null) x(T);
+        else if (ue.startTime <= V)
+          x(T), ue.sortIndex = ue.expirationTime, h(A, ue);
+        else break;
+        ue = g(T);
       }
     }
     function $(V) {
@@ -31002,1068 +30140,2041 @@ const EDITOR_ICONS = {
         d: "M14 2H15V6H14V2ZM9 3V2H1V8H2V3H9ZM7 13H1V14H7V13Z",
         fill: "currentColor"
       }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "path",
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M11 2H10V3H11V6H12V3H13V2H11ZM2 9H1V12H2V11H7V10H2V9ZM15 7H8V14H15V7Z",
-        fill: "currentColor"
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M11 2H10V3H11V6H12V3H13V2H11ZM2 9H1V12H2V11H7V10H2V9ZM15 7H8V14H15V7Z",
+        fill: "currentColor"
+      }
+    )
+  ] }),
+  relative: () => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M11 2H9V3H11V6H12V3H14V2H11ZM2 8H1V13H2V11H7V10H2V8ZM15 7H8V14H15V7Z",
+      fill: "currentColor"
+    }
+  ) }),
+  sticky: () => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        d: "M12.9998 7C13.6558 7 14.2937 6.78498 14.8158 6.38787C15.338 5.99076 15.7156 5.43345 15.8908 4.80128C16.066 4.16912 16.0292 3.49694 15.7859 2.8877C15.5427 2.27846 15.1065 1.76573 14.5441 1.42804C13.9817 1.09034 13.3241 0.946293 12.672 1.01795C12.02 1.08961 11.4094 1.37303 10.9337 1.8248C10.4581 2.27658 10.1436 2.8718 10.0385 3.51932C9.93341 4.16685 10.0434 4.83097 10.3518 5.41L6.88176 8.88C6.80034 8.96122 6.73572 9.05769 6.69158 9.16388C6.64744 9.27008 6.62465 9.38393 6.62451 9.49894C6.62437 9.61395 6.64689 9.72785 6.69077 9.83416C6.73465 9.94046 6.79904 10.0371 6.88026 10.1185C6.96149 10.1999 7.05795 10.2645 7.16415 10.3087C7.27035 10.3528 7.3842 10.3756 7.4992 10.3758C7.61421 10.3759 7.72812 10.3534 7.83442 10.3095C7.94072 10.2656 8.03734 10.2012 8.11876 10.12L11.5888 6.648C12.0088 6.873 12.4888 7 12.9988 7H12.9998Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        opacity: "0.6",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M9.535 2H1V14H15V7.465C14.69 7.645 14.355 7.783 14 7.875V13H2V5H9.126C8.86504 3.98486 9.01223 2.90789 9.536 2H9.535ZM7 3V4H5V3H7ZM4 3V4H2V3H4Z",
+        fill: "currentColor"
+      }
+    )
+  ] }),
+  static: Cross1Icon
+}, StyleContext = createContext({ canReset: !1, canChange: !0 }), BlockStyleProvider = ({ children: r, canReset: h = !1, canChange: g = !0 }) => (
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
+  /* @__PURE__ */ jsxRuntimeExports.jsx(StyleContext.Provider, { value: { canReset: h, canChange: g }, children: r })
+), DropDownChoices = ({ label: r, property: h, onChange: g }) => {
+  const { getClasses: x } = useTailwindClassList(), v = x(h), S = useCurrentClassByProperty(h), C = useMemo(() => get(S, "cls", ""), [S]), { canChange: R } = useContext(StyleContext), A = /\[.*\]/g.test(C);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: r ? "w-full rounded" : "grow", children: A ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Input$1, { className: "w-[70%] rounded py-1", readOnly: !0, value: C }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoCircledIcon, {}) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Current value is using a Tailwind arbitrary value." })
+    ] })
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    DropDown,
+    {
+      rounded: r,
+      onChange: (T) => g(T, h),
+      selected: C,
+      options: v,
+      disabled: !R
+    }
+  ) });
+};
+function DropDown({ selected: r, onChange: h, rounded: g = !1, options: x, disabled: v = !1 }) {
+  const S = r.replace(/.*:/g, "").trim(), { undo: C, redo: R } = useUndoManager();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "select",
+    {
+      disabled: !x.length || v,
+      className: `${g ? "rounded-md border border-border" : "border-0"} disable:bg-gray-500 h-full w-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
+      onChange: (A) => h(A.target.value),
+      onKeyDown: (A) => {
+        A.ctrlKey && (A.key === "z" && C(), A.key === "y" && R());
+      },
+      value: S,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("option", { className: "bg-transparent", value: "" }),
+        React__default.Children.toArray(
+          x.map((A) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { className: "bg-transparent", value: A, children: A }))
+        )
+      ]
+    }
+  );
+}
+const RangeChoices = ({ property: r, onChange: h }) => {
+  const { canReset: g, canChange: x } = useContext(StyleContext), v = useCurrentClassByProperty(r), S = useMemo(() => get(v, "cls", ""), [v]), { getClasses: C } = useTailwindClassList(), R = C(r, [""]), A = R.indexOf(S) > -1 ? R.indexOf(S) : 0, T = /\[.*\]/g.test(S);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: T ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-2 py-[5px]", children: S }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        className: "hover:bg-bg-gray-700 box-border w-2/12 rounded-bl rounded-tl bg-background px-1 text-center disabled:cursor-not-allowed disabled:bg-gray-600",
+        disabled: !x && (!g || A - 1 < 0),
+        onClick: () => h(nth(R, A - 1), r),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          MinusIcon,
+          {
+            className: !x && (!g || A - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: !1, property: r, onChange: h }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        className: "hover:bg-bg-gray-700 w-2/12 rounded-br rounded-tr bg-background px-1 text-center disabled:cursor-not-allowed disabled:bg-gray-600",
+        disabled: !x && (!g || A + 1 >= R.length),
+        onClick: () => h(nth(R, A + 1), r),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          PlusIcon,
+          {
+            className: !x && (!g || A + 1 >= R.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+          }
+        ) })
+      }
+    )
+  ] }) });
+}, IconChoices = ({ property: r, onChange: h }) => {
+  const { getClasses: g } = useTailwindClassList(), x = g(r), { canChange: v } = useContext(StyleContext), S = useCurrentClassByProperty(r), C = useMemo(() => get(S, "cls", ""), [S]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex grow flex-wrap gap-1", children: map(x, (R) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        disabled: !v,
+        onClick: () => h(R, r),
+        className: `cursor-pointer rounded border border-border p-1 disabled:cursor-not-allowed ${C === R ? "bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
+        children: React__default.createElement(get(EDITOR_ICONS, R, BoxIcon))
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: startCase(toLower(R)) })
+  ] })) });
+}, COLOR_PROP = {
+  backgroundColor: "bg",
+  textColor: "text",
+  borderColor: "border",
+  boxShadowColor: "shadow",
+  outlineColor: "outline",
+  divideColor: "divide",
+  fromColor: "from",
+  viaColor: "via",
+  toColor: "to",
+  ringColor: "ring",
+  ringOffsetColor: "ring-offset"
+}, ColorChoice = ({ property: r, onChange: h }) => {
+  const g = useCurrentClassByProperty(r), x = useMemo(() => get(g, "cls", ""), [g]), { canChange: v } = useContext(StyleContext), [S, C] = useState([]), [R, A] = useState({ color: "", shade: "" }), T = x.split("-"), _ = get(T, "1", ""), O = get(T, "2", ""), z = useCallback(
+    // eslint-disable-next-line no-shadow
+    (q) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(q) ? (C([]), A({ color: q })) : (C(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), A((ee) => ({ ...ee, color: q, shade: ee.shade ? ee.shade : "500" })));
+    },
+    [C, A]
+  );
+  useEffect(() => {
+    if (["current", "inherit", "transparent", "black", "white"].includes(_))
+      return C([]);
+    C(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
+  }, [_]);
+  const Z = useCallback(
+    // eslint-disable-next-line no-shadow
+    (q) => {
+      A({ color: _, shade: q });
+    },
+    [_]
+  );
+  useEffect(() => {
+    A({ color: "", shade: "" });
+  }, [g]);
+  const { match: G } = useTailwindClassList();
+  return useEffect(() => {
+    const ee = `${get(COLOR_PROP, r, "")}-${R.color}${R.shade ? `-${R.shade}` : ""}`;
+    G(r, ee) && h(ee, r);
+  }, [G, R, h, r]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      DropDown,
+      {
+        disabled: !v,
+        rounded: !0,
+        selected: _,
+        onChange: z,
+        options: [
+          "current",
+          "transparent",
+          "primary",
+          "secondary",
+          "black",
+          "white",
+          "slate",
+          "gray",
+          "zinc",
+          "neutral",
+          "stone",
+          "red",
+          "orange",
+          "amber",
+          "yellow",
+          "lime",
+          "green",
+          "emerald",
+          "teal",
+          "cyan",
+          "sky",
+          "blue",
+          "indigo",
+          "violet",
+          "purple",
+          "fuchsia",
+          "pink",
+          "rose"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: O, disabled: !_ || !v, onChange: Z, options: S }) })
+  ] });
+}, getUserInputValues = (r, h) => {
+  r = r.toLowerCase();
+  let g = r.trim().replace(/ |\+/g, "");
+  if ((g === "auto" || g === "none") && h.includes(g))
+    return { value: "", unit: g };
+  const x = h.length ? new RegExp(h.join("|"), "g") : /XXXXXX/g;
+  g = g.replace(x, "");
+  const v = r.match(x), S = v && v.length > 1, C = !isEmpty(g) && Number.isNaN(Number(g));
+  return S || C ? { error: "Invalid value" } : v && (v[0] === "auto" || v[0] === "none") ? { value: v[0], unit: "" } : { value: g, unit: v ? v[0] : "" };
+}, getTwClassValue = (r) => {
+  const h = r.startsWith("-") ? "-" : "", g = r.split("-").pop();
+  if (["auto", "none"].includes(g))
+    return { value: "", unit: g };
+  if (g === "px") return { value: "1", unit: "px" };
+  if (g === "screen") return { value: "100", unit: r.indexOf("w-") !== -1 ? "vw" : "vh" };
+  if (g === "full") return { value: "100", unit: "%" };
+  if (includes(r, "skew-"))
+    return { value: `${h}${g}`, unit: "deg" };
+  if (includes(r, "rotate-"))
+    return { value: `${h}${g}`, unit: "deg" };
+  if (includes(r, "opacity-"))
+    return { value: `${g / 100}`, unit: "-" };
+  if (includes(r, "duration-") || includes(r, "delay-"))
+    return { value: `${g}`, unit: "ms" };
+  if (includes(r, "translate-") && !g.includes("/"))
+    return { value: `${h}${`${g / 4}`}`, unit: "rem" };
+  if (includes(r, "scale-"))
+    return { value: `${h}${`${g / 100}`}`, unit: "-" };
+  if (startsWith(r, "border")) {
+    const x = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
+    if (x) return { value: x[0].split("-").pop(), unit: "px" };
+    if (r.match(/border-?(x|y|t|r|b|l)?/g)) return { value: "1", unit: "px" };
+  }
+  if (startsWith(r, "max-w-")) {
+    if (r === "max-w-screen-sm") return { value: "640", unit: "px" };
+    if (r === "max-w-screen-md") return { value: "768", unit: "px" };
+    if (r === "max-w-screen-lg") return { value: "1024", unit: "px" };
+    if (r === "max-w-screen-xl") return { value: "1280", unit: "px" };
+    if (r === "max-w-screen-2xl") return { value: "1536", unit: "px" };
+    if (g === "xs") return { value: "320", unit: "px" };
+    if (g === "sm") return { value: "384", unit: "px" };
+    if (g === "md") return { value: "448", unit: "px" };
+    if (g === "lg") return { value: "512", unit: "px" };
+    if (g === "xl") return { value: "576", unit: "px" };
+    if (g === "2xl") return { value: "672", unit: "px" };
+    if (g === "3xl") return { value: "768", unit: "px" };
+    if (g === "4xl") return { value: "896", unit: "px" };
+    if (g === "5xl") return { value: "1024", unit: "px" };
+    if (g === "6xl") return { value: "1152", unit: "px" };
+    if (g === "7xl") return { value: "1280", unit: "px" };
+    if (g === "prose") return { value: "65", unit: "ch" };
+  }
+  if (startsWith(r, "text-")) {
+    if (g === "xs") return { value: "12", unit: "px" };
+    if (g === "sm") return { value: "14", unit: "px" };
+    if (g === "base") return { value: "16", unit: "px" };
+    if (g === "lg") return { value: "18", unit: "px" };
+    if (g === "xl") return { value: "20", unit: "px" };
+    if (g === "2xl") return { value: "24", unit: "px" };
+    if (g === "3xl") return { value: "30", unit: "px" };
+    if (g === "4xl") return { value: "36", unit: "px" };
+    if (g === "5xl") return { value: "48", unit: "px" };
+    if (g === "6xl") return { value: "60", unit: "px" };
+    if (g === "7xl") return { value: "72", unit: "px" };
+    if (g === "8xl") return { value: "96", unit: "px" };
+    if (g === "9xl") return { value: "128", unit: "px" };
+  }
+  if (startsWith(r, "leading-")) {
+    if (g === "none") return { value: "1", unit: "-" };
+    if (g === "tight") return { value: "1.25", unit: "-" };
+    if (g === "snug") return { value: "1.375", unit: "-" };
+    if (g === "normal") return { value: "1.5", unit: "-" };
+    if (g === "relaxed") return { value: "1.625", unit: "-" };
+    if (g === "loose") return { value: "2", unit: "-" };
+  }
+  if (startsWith(r, "tracking-")) {
+    if (g === "tighter") return { value: "-0.05", unit: "em" };
+    if (g === "tight") return { value: "-0.025", unit: "em" };
+    if (g === "normal") return { value: "0", unit: "em" };
+    if (g === "wide") return { value: "0.025", unit: "em" };
+    if (g === "wider") return { value: "0.05", unit: "em" };
+    if (g === "widest") return { value: "0.1", unit: "em" };
+  }
+  if (["max", "min", "fit"].includes(g)) return { value: r, unit: "class" };
+  if (g.includes("/")) {
+    const [x, v] = map(g.split("/"), (S) => parseInt(S, 10));
+    return { value: h + (x / v * 100).toFixed(2).replace(".00", ""), unit: "%" };
+  }
+  return isNumber(parseFloat(g)) ? { value: `${h + parseFloat(g) * 4}`, unit: "px" } : { value: g, unit: "class" };
+}, getClassValueAndUnit = (r) => {
+  if (isEmpty(r))
+    return { value: "", unit: "" };
+  const h = r.match(/\[.*\]/g);
+  if (h === null)
+    return getValueAndUnitForTWClass(r);
+  const g = get(h, "0", "").replace(/\[|\]/g, ""), x = r.startsWith("-") ? "-" : "", v = first(g.match(/\d+.\d+|\d+/g));
+  return { value: `${x}${v}`, unit: g.replace(v, "") };
+}, getValueAndUnitForTWClass = (r) => isEmpty(r) ? { value: "", unit: "" } : getTwClassValue(r), BlockSettingsContext = React__default.createContext({
+  setDragData: () => {
+  }
+}), DragStyleButton = ({
+  unit: r,
+  currentValue: h,
+  onDrag: g,
+  onDragEnd: x,
+  onDragStart: v,
+  negative: S,
+  cssProperty: C
+}) => {
+  const { setDragData: R } = useContext(BlockSettingsContext);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "button",
+    {
+      type: "button",
+      onMouseDown: (A) => {
+        const T = {
+          onDrag: g,
+          onDragEnd: x,
+          dragging: !0,
+          dragStartY: A.pageY,
+          dragStartValue: `${h}`,
+          dragUnit: r,
+          negative: S,
+          cssProperty: C
+        };
+        v(T), R(T);
+      },
+      color: void 0,
+      className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(RowSpacingIcon, {})
+    }
+  );
+}, UnitSelection = ({ onSelect: r, current: h, units: g }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: g.map((x) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  Button,
+  {
+    className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
+    color: h === x ? "primary" : void 0,
+    size: "sm",
+    onClick: (v) => {
+      v.stopPropagation(), r(x);
+    },
+    children: x
+  },
+  x
+)) }), THROTTLE_TIME = 50, AdvanceChoices = (r) => {
+  const [h, g] = useState(!1), [x, v] = useState(""), { currentClass: S, onChange: C, classPrefix: R, cssProperty: A, units: T, negative: _ } = r, [O, z] = useState(A != null && A.toLowerCase().includes("width") ? "%" : T[0]), [Z, G] = useState(!1), [q, ee] = useState(""), [ge, le] = useState(!1), [ce, $] = useState(!1);
+  useEffect(() => {
+    const { value: W, unit: xe } = getClassValueAndUnit(S);
+    if (xe === "") {
+      v(W), z(A != null && A.toLowerCase().includes("width") ? "%" : first(T));
+      return;
+    }
+    z(xe), v(xe === "class" || isEmpty(W) ? "" : W);
+  }, [S, A, T]);
+  const ie = useThrottledCallback((W) => C(W), [C], THROTTLE_TIME), he = useThrottledCallback((W) => C(W, !1), [C], THROTTLE_TIME), Se = useCallback(
+    (W = !1) => {
+      const xe = getUserInputValues(`${x}`, T);
+      if (get(xe, "error", !1)) {
+        G(!0);
+        return;
+      }
+      const ve = get(xe, "unit") !== "" ? get(xe, "unit") : O;
+      if (ve === "auto" || ve === "none") {
+        ie(`${R}${ve}`);
+        return;
+      }
+      if (get(xe, "value") === "")
+        return;
+      const je = `${get(xe, "value", "").startsWith("-") ? "-" : ""}${R}[${get(xe, "value", "").replace("-", "")}${ve === "-" ? "" : ve}]`;
+      W ? he(je) : ie(je);
+    },
+    [ie, he, x, O, R, T]
+  ), Me = useCallback(
+    (W) => {
+      const xe = getUserInputValues(`${x}`, T);
+      if (get(xe, "error", !1)) {
+        G(!0);
+        return;
+      }
+      if (W === "auto" || W === "none") {
+        ie(`${R}${W}`);
+        return;
       }
-    )
-  ] }),
-  relative: () => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M11 2H9V3H11V6H12V3H14V2H11ZM2 8H1V13H2V11H7V10H2V8ZM15 7H8V14H15V7Z",
-      fill: "currentColor"
-    }
-  ) }),
-  sticky: () => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      if (get(xe, "value") === "")
+        return;
+      const ve = get(xe, "unit") !== "" ? get(xe, "unit") : W, je = `${get(xe, "value", "").startsWith("-") ? "-" : ""}${R}[${get(xe, "value", "").replace("-", "")}${ve === "-" ? "" : ve}]`;
+      ie(je);
+    },
+    [ie, x, R, T]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start", children: O === "class" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "path",
+      "input",
       {
-        d: "M12.9998 7C13.6558 7 14.2937 6.78498 14.8158 6.38787C15.338 5.99076 15.7156 5.43345 15.8908 4.80128C16.066 4.16912 16.0292 3.49694 15.7859 2.8877C15.5427 2.27846 15.1065 1.76573 14.5441 1.42804C13.9817 1.09034 13.3241 0.946293 12.672 1.01795C12.02 1.08961 11.4094 1.37303 10.9337 1.8248C10.4581 2.27658 10.1436 2.8718 10.0385 3.51932C9.93341 4.16685 10.0434 4.83097 10.3518 5.41L6.88176 8.88C6.80034 8.96122 6.73572 9.05769 6.69158 9.16388C6.64744 9.27008 6.62465 9.38393 6.62451 9.49894C6.62437 9.61395 6.64689 9.72785 6.69077 9.83416C6.73465 9.94046 6.79904 10.0371 6.88026 10.1185C6.96149 10.1999 7.05795 10.2645 7.16415 10.3087C7.27035 10.3528 7.3842 10.3756 7.4992 10.3758C7.61421 10.3759 7.72812 10.3534 7.83442 10.3095C7.94072 10.2656 8.03734 10.2012 8.11876 10.12L11.5888 6.648C12.0088 6.873 12.4888 7 12.9988 7H12.9998Z",
-        fill: "currentColor"
+        className: "h-6 w-24 rounded border border-foreground/20 bg-background px-2 py-0.5 text-sm focus-visible:outline-0",
+        readOnly: !0,
+        value: S
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "path",
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoCircledIcon, {}) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
+    ] })
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${ge ? "z-auto" : ""}`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
+      ["none", "auto"].indexOf(O) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "input",
+        {
+          readOnly: O === "class",
+          onKeyPress: (W) => {
+            W.key === "Enter" && Se();
+          },
+          onKeyDown: (W) => {
+            if (W.keyCode !== 38 && W.keyCode !== 40)
+              return;
+            W.preventDefault(), $(!0);
+            const xe = parseInt$1(W.target.value);
+            let ve = isNaN$1(xe) ? 0 : xe;
+            W.keyCode === 38 && (ve += 1), W.keyCode === 40 && (ve -= 1);
+            const ye = `${ve}`, se = `${ye.startsWith("-") ? "-" : ""}${R}[${ye.replace("-", "")}${O === "-" ? "" : O}]`;
+            he(se);
+          },
+          onKeyUp: (W) => {
+            ce && (W.preventDefault(), $(!1));
+          },
+          onBlur: () => Se(),
+          onChange: (W) => {
+            G(!1), v(W.target.value);
+          },
+          onClick: (W) => {
+            var xe;
+            (xe = W == null ? void 0 : W.target) == null || xe.select(), g(!1);
+          },
+          value: ge ? q : x,
+          className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
+            " ",
+            Z ? "border-red-500 text-red-500" : "border-foreground/20"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { open: h, delayDuration: 100, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => g(!h),
+            className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block ${T.length === 1 ? "px-2 font-semibold" : ""}`, children: O }),
+              T.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleDownIcon, {}) : null
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipPortal, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          UnitSelection,
+          {
+            units: T,
+            current: O,
+            onSelect: (W) => {
+              g(!1), z(W), Me(W);
+            }
+          }
+        ) }) })
+      ] })
+    ] }),
+    ["none", "auto"].indexOf(O) !== -1 || ge ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      DragStyleButton,
       {
-        opacity: "0.6",
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M9.535 2H1V14H15V7.465C14.69 7.645 14.355 7.783 14 7.875V13H2V5H9.126C8.86504 3.98486 9.01223 2.90789 9.536 2H9.535ZM7 3V4H5V3H7ZM4 3V4H2V3H4Z",
-        fill: "currentColor"
+        onDragStart: () => le(!0),
+        onDragEnd: (W) => {
+          if (ee(() => ""), le(!1), isEmpty(W))
+            return;
+          const xe = `${W}`, ye = `${xe.startsWith("-") ? "-" : ""}${R}[${xe.replace("-", "")}${O === "-" ? "" : O}]`;
+          ie(ye);
+        },
+        onDrag: (W) => {
+          if (isEmpty(W))
+            return;
+          ee(W);
+          const xe = `${W}`, ye = `${xe.startsWith("-") ? "-" : ""}${R}[${xe.replace("-", "")}${O === "-" ? "" : O}]`;
+          he(ye);
+        },
+        currentValue: x,
+        unit: O,
+        negative: _,
+        cssProperty: A
       }
     )
-  ] }),
-  static: Cross1Icon
-}, StyleContext = createContext({ canReset: !1, canChange: !0 }), BlockStyleProvider = ({ children: r, canReset: h = !1, canChange: g = !0 }) => (
-  // eslint-disable-next-line react/jsx-no-constructed-context-values
-  /* @__PURE__ */ jsxRuntimeExports.jsx(StyleContext.Provider, { value: { canReset: h, canChange: g }, children: r })
-), DropDownChoices = ({ label: r, property: h, onChange: g }) => {
-  const { getClasses: x } = useTailwindClassList(), v = x(h), S = useCurrentClassByProperty(h), C = useMemo(() => get(S, "cls", ""), [S]), { canChange: R } = useContext(StyleContext), A = /\[.*\]/g.test(C);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: r ? "w-full rounded" : "grow", children: A ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Input$1, { className: "w-[70%] rounded py-1", readOnly: !0, value: C }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoCircledIcon, {}) }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Current value is using a Tailwind arbitrary value." })
+  ] }) }) });
+}, useCurrentClassByProperty = (r) => {
+  const h = useSelectedBlockCurrentClasses();
+  return findLast(h, { property: r });
+}, canChangeClass = (r, h) => {
+  const g = {
+    xs: 0,
+    sm: 1,
+    md: 2,
+    lg: 3,
+    xl: 4,
+    "2xl": 5
+  };
+  return g[get(r, "mq", "xs")] <= g[h];
+}, CLASS_PREFIXES = {
+  width: "w-",
+  height: "h-",
+  minWidth: "min-w-",
+  minHeight: "min-h-",
+  maxWidth: "max-w-",
+  maxHeight: "max-h-",
+  zIndex: "z-",
+  gap: "gap-",
+  gapX: "gap-x-",
+  gapY: "gap-y-",
+  margin: "m-",
+  marginX: "mx-",
+  marginY: "my-",
+  marginTop: "mt-",
+  marginBottom: "mb-",
+  marginLeft: "ml-",
+  marginRight: "mr-",
+  padding: "p-",
+  paddingX: "px-",
+  paddingY: "py-",
+  paddingTop: "pt-",
+  paddingBottom: "pb-",
+  paddingLeft: "pl-",
+  paddingRight: "pr-",
+  spaceX: "space-x-",
+  spaceY: "space-y-",
+  border: "border-",
+  borderTop: "border-t-",
+  borderBottom: "border-b-",
+  borderLeft: "border-l-",
+  borderRight: "border-r-",
+  borderX: "border-x-",
+  borderY: "border-y-",
+  borderRadius: "rounded-",
+  borderRadiusTop: "rounded-t-",
+  borderRadiusRight: "rounded-r-",
+  borderRadiusBottom: "rounded-b-",
+  borderRadiusLeft: "rounded-l-",
+  borderRadiusTopLeft: "rounded-tl-",
+  borderRadiusTopRight: "rounded-tr-",
+  borderRadiusBottomRight: "rounded-br-",
+  borderRadiusBottomLeft: "rounded-bl-",
+  fontSize: "text-",
+  lineHeight: "leading-",
+  letterSpacing: "tracking-",
+  textIndent: "indent-",
+  rotate: "rotate-",
+  duration: "duration-",
+  transitionDelay: "delay-",
+  scale: "scale-",
+  scaleX: "scale-x-",
+  scaleY: "scale-y-",
+  translateX: "translate-x-",
+  translateY: "translate-y-",
+  skewX: "skew-x-",
+  skewY: "skew-y-",
+  top: "top-",
+  bottom: "bottom-",
+  left: "left-",
+  right: "right-",
+  inset: "inset-",
+  insetX: "inset-x-",
+  insetY: "inset-y-",
+  opacity: "opacity-",
+  flexBasis: "basis-"
+}, BREAKPOINTS = {
+  xs: "",
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px"
+}, getBreakpoint = (r) => `${r.toUpperCase()} ${BREAKPOINTS[r] ? `(${BREAKPOINTS[r]} & up)` : ""}`, BlockStyle = (r) => {
+  const { t: h } = useTranslation(), { type: g = "icons", label: x, property: v, onEmitChange: S = () => {
+  }, units: C, negative: R = !1 } = r, [A] = useDarkMode(), [T] = useStylingState(), [, _] = useCanvasWidth(), O = useCurrentClassByProperty(v), z = useAddClassesToBlocks(), Z = useRemoveClassesFromBlocks(), [G] = useSelectedBlockIds(), q = useMemo(() => get(O, "fullCls", ""), [O]), ee = useCallback(
+    (he, Se = !0) => {
+      const Me = { dark: A, mq: _, mod: T, cls: he, property: v, fullCls: "" };
+      (A || T !== "") && (Me.mq = "xs");
+      const W = generateFullClsName(Me);
+      z(G, [W], Se);
+    },
+    [G, A, _, T, v, z]
+  ), ge = useCallback(() => {
+    Z(G, [q]);
+  }, [G, q, Z]), le = useMemo(() => canChangeClass(O, _), [O, _]);
+  useEffect(() => {
+    S(le, O);
+  }, [le, S, O]);
+  const [, , ce] = useCanvasWidth(), $ = useCallback(
+    (he) => {
+      ce({
+        xs: 400,
+        sm: 640,
+        md: 800,
+        lg: 1024,
+        xl: 1420,
+        "2xl": 1920
+      }[he]);
+    },
+    [ce]
+  ), ie = get(O, "dark", null) === A && get(O, "mod", null) === T && get(O, "mq", null) === _;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: le, canReset: O && ie, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] ${O && !ie ? "text-foreground" : ""}`, children: h(x) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[150px]", children: [
+        g === "arbitrary" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          AdvanceChoices,
+          {
+            currentClass: get(O, "cls", ""),
+            classPrefix: get(CLASS_PREFIXES, v, ""),
+            units: C || [],
+            onChange: ee,
+            negative: R,
+            cssProperty: v
+          }
+        ) : null,
+        g === "icons" && /* @__PURE__ */ jsxRuntimeExports.jsx(IconChoices, { property: v, onChange: ee }),
+        g === "range" && /* @__PURE__ */ jsxRuntimeExports.jsx(RangeChoices, { property: v, onChange: ee }),
+        g === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: v, onChange: ee }),
+        g === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: x, property: v, onChange: ee })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${q ? "visible" : "invisible"}`, children: ie ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => ge(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : le && O ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            className: "invisible ml-3 mt-1 rounded-full bg-blue-500 text-white group-hover:visible",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoCircledIcon, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          "Current style is set at  ",
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-bold", children: [
+            getBreakpoint(get(O, "mq")),
+            A && !O.dark ? "(Light mode)" : ""
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => $(get(O, "mq")),
+              className: "block w-full cursor-default text-right font-semibold text-blue-500",
+              children: [
+                "Switch to ",
+                get(O, "mq").toUpperCase()
+              ]
+            }
+          )
+        ] }) }) })
+      ] }) : null })
     ] })
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-    DropDown,
-    {
-      rounded: r,
-      onChange: (T) => g(T, h),
-      selected: C,
-      options: v,
-      disabled: !R
-    }
-  ) });
-};
-function DropDown({ selected: r, onChange: h, rounded: g = !1, options: x, disabled: v = !1 }) {
-  const S = r.replace(/.*:/g, "").trim(), { undo: C, redo: R } = useUndoManager();
+  ] }) });
+}, basicUnits = ["px", "%", "em", "rem", "ch", "vh", "vw"], MultipleChoices = ({
+  label: r,
+  options: h,
+  borderB: g = !1,
+  borderT: x = !1,
+  type: v = "arbitrary",
+  units: S = basicUnits,
+  negative: C = !1
+}) => {
+  const { t: R } = useTranslation(), [A, T] = useState(h[0].key), _ = useSelectedBlockCurrentClasses(), O = useCallback((z) => map(_, "property").includes(z), [_]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "select",
+    "div",
     {
-      disabled: !x.length || v,
-      className: `${g ? "rounded-md border border-border" : "border-0"} disable:bg-gray-500 h-full w-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
-      onChange: (A) => h(A.target.value),
-      onKeyDown: (A) => {
-        A.ctrlKey && (A.key === "z" && C(), A.key === "y" && R());
-      },
-      value: S,
+      className: `mb-2 border-border py-2 first:pt-0 last:pb-0 ${g ? "border-b" : ""} ${x ? "border-t" : ""}`,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("option", { className: "bg-transparent", value: "" }),
-        React__default.Children.toArray(
-          x.map((A) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { className: "bg-transparent", value: A, children: A }))
-        )
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row text-xs", children: [
+          r && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: R(r) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: React__default.Children.toArray(
+            h.map(({ label: z, key: Z }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => T(Z),
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${Z === A ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  children: [
+                    React__default.createElement("div", {
+                      className: O(Z) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                    }),
+                    React__default.createElement(get(EDITOR_ICONS, Z, BoxIcon), { className: "text-inherit w-3 h-3" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: startCase(toLower(z)) })
+            ] }) }))
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          BlockStyle,
+          {
+            type: v,
+            units: [...S],
+            label: "",
+            property: A,
+            negative: C
+          }
+        ) })
       ]
     }
   );
-}
-const RangeChoices = ({ property: r, onChange: h }) => {
-  const { canReset: g, canChange: x } = useContext(StyleContext), v = useCurrentClassByProperty(r), S = useMemo(() => get(v, "cls", ""), [v]), { getClasses: C } = useTailwindClassList(), R = C(r, [""]), A = R.indexOf(S) > -1 ? R.indexOf(S) : 0, T = /\[.*\]/g.test(S);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: T ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-2 py-[5px]", children: S }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
+}, NestedOptions = ({ heading: r, items: h }) => {
+  const { t: g } = useTranslation(), x = useSelectedBlockCurrentClasses(), v = useMemo(() => {
+    const S = (A) => flatten(
+      A.map((T) => T.styleType === "multiple" ? map(T.options, "key") : T.property)
+    ), C = flatten(
+      h.map((A) => A.styleType === "accordion" ? S(A.items) : A.styleType === "multiple" ? map(A.options, "key") : A.property)
+    ), R = map(x, "property");
+    return intersection(C, R).length > 0;
+  }, [x, h]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("details", { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("summary", { className: "my-px cursor-default rounded-md bg-gray-50 p-px px-2 text-[11px] text-foreground dark:bg-gray-800", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline", children: [
+      startCase(g(r.toLowerCase())),
+      v ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "span",
+        {
+          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${v ? "bg-blue-500" : "bg-gray-300"}`
+        }
+      ) : null
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2", children: h.map((S) => S.styleType === "multiple" ? /* @__PURE__ */ jsxRuntimeExports.jsx(MultipleChoices, { ...S }, S.label) : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyle, { ...S }, S.label)) })
+  ] });
+}, SectionContext = createContext({}), StylingGroup = ({ section: r, showAccordian: h }) => {
+  const { t: g } = useTranslation(), x = useSelectedBlockCurrentClasses(), v = useCallback(
+    (C = []) => {
+      const R = {};
+      for (let T = 0; T < x.length; T++)
+        R[x[T].property] = x[T].cls;
+      let A = !0;
+      for (const T in C)
+        if (!has(R, T) || R[T] !== C[T]) {
+          A = !1;
+          break;
+        }
+      return A;
+    },
+    [x]
+  ), S = useMemo(() => ({}), []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionContext.Provider, { value: S, children: h ? /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: r.heading, className: "border-none", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { className: "border-slate-150 border-t py-2 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-x-2 text-xs font-medium", children: startCase(g(r.heading)) }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContent, { className: "py-2", children: React__default.Children.toArray(
+      r.items.map((C) => has(C, "component") ? React__default.createElement(C.component, { key: C.label }) : has(C, "styleType") ? C.styleType === "multiple" ? /* @__PURE__ */ jsxRuntimeExports.jsx(MultipleChoices, { ...C }, C.label) : C.styleType === "accordion" && v(C == null ? void 0 : C.conditions) ? /* @__PURE__ */ jsxRuntimeExports.jsx(NestedOptions, { ...C }, C.label) : null : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyle, { ...C }, C.label))
+    ) })
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-2", children: React__default.Children.toArray(
+    r.items.map((C) => has(C, "component") ? React__default.createElement(C.component, { key: C.label }) : has(C, "styleType") ? C.styleType === "multiple" ? /* @__PURE__ */ jsxRuntimeExports.jsx(MultipleChoices, { ...C }, C.label) : C.styleType === "accordion" && v(C == null ? void 0 : C.conditions) ? /* @__PURE__ */ jsxRuntimeExports.jsx(NestedOptions, { ...C }, C.label) : null : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyle, { ...C }, C.label))
+  ) }) });
+}, StylingHelpers = () => {
+  const r = useSelectedBlock(), [h] = useSelectedStylingBlocks(), { t: g } = useTranslation(), x = useAddClassesToBlocks(), v = getRegisteredChaiBlock(r._type), S = get(first(h), "prop"), C = get(v.props, `${S}.presets`, {});
+  if (!has(v, "props") || isEmpty(C))
+    return null;
+  const R = (A) => {
+    const T = A.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    x([r._id], T, !0);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "default", className: "w-full", size: "sm", children: [
+      g("Apply Presets"),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(CaretDownIcon, {})
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuContent, { className: "max-h-80 w-56", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "no-scrollbar h-full", children: isEmpty(C) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuLabel, { children: [
+        v.type,
+        " ",
+        g("presets")
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuGroup, { children: keys(C).map((A) => /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuItem, { className: "group text-xs", onClick: () => R(C[A]), children: [
+        capitalize(startCase(g(A))),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuShortcut, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: g("apply") })
+      ] })) })
+    ] }) }) })
+  ] }) });
+}, BlockStylingProps = () => {
+  const r = useSelectedBlock(), [h, g] = useSelectedStylingBlocks(), { t: x } = useTranslation();
+  if (!r) return null;
+  const v = Object.keys(r).filter(
+    (C) => typeof r[C] == "string" && r[C].startsWith("#styles:")
+  );
+  if (isEmpty(v) || v.length <= 1) return null;
+  const S = (C) => find(h, (R) => R.prop === C);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-1", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "block-styling-props", className: "py-1 text-xs", children: [
+      x("Style element"),
+      ":"
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-2", children: map(v, (C) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Badge,
       {
-        type: "button",
-        className: "hover:bg-bg-gray-700 box-border w-2/12 rounded-bl rounded-tl bg-background px-1 text-center disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !x && (!g || A - 1 < 0),
-        onClick: () => h(nth(R, A - 1), r),
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          MinusIcon,
-          {
-            className: !x && (!g || A - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
-          }
-        ) })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: !1, property: r, onChange: h }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
+        className: "cursor-pointer",
+        onClick: () => {
+          g([{ id: `${C}-${r._id}`, blockId: r._id, prop: C }]);
+        },
+        variant: S(C) ? "default" : "secondary",
+        children: startCase(C)
+      },
+      C
+    )) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "my-2 h-[1px] w-full bg-border" })
+  ] });
+}, MAPPER = {
+  px: 1,
+  "%": 1,
+  em: 100,
+  rem: 100,
+  ch: 1,
+  vw: 1,
+  vh: 1,
+  "-": 1,
+  deg: 1,
+  ms: 0.1
+};
+function BlockStyling() {
+  const { flexChild: r, gridChild: h } = useSelectedBlocksDisplayChild(), [g] = useSelectedStylingBlocks(), [x, v] = React__default.useState(""), [S, C] = React__default.useState({
+    onDrag: (T) => T,
+    onDragEnd: (T) => T,
+    dragStartY: 0,
+    dragging: !1,
+    dragStartValue: 0,
+    dragUnit: "",
+    negative: !1,
+    cssProperty: ""
+  }), R = useThrottledCallback(
+    (T) => {
+      const _ = !get(S, "negative", !1), O = get(S, "cssProperty", "");
+      let z = parseFloat(S.dragStartValue);
+      z = isNaN(z) ? 0 : z;
+      let Z = MAPPER[S.dragUnit];
+      (startsWith(O, "scale") || O === "opacity") && (Z = 10);
+      let q = (S.dragStartY - T.pageY) / Z + z;
+      _ && q < 0 && (q = 0), O === "opacity" && q > 1 && (q = 1), S.onDrag(`${q}`), v(`${q}`);
+    },
+    [S],
+    50
+  ), A = useCallback(() => {
+    setTimeout(() => S.onDragEnd(`${x}`), 100), C({
+      onDrag: (T) => T,
+      onDragEnd: (T) => T,
+      dragStartY: 0,
+      dragging: !1,
+      dragStartValue: 0,
+      dragUnit: "",
+      negative: !1,
+      cssProperty: ""
+    });
+  }, [S, x, C]);
+  return isEmpty(g) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(BlockSettingsContext.Provider, { value: { setDragData: C }, children: [
+    S.dragging ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
       {
-        type: "button",
-        className: "hover:bg-bg-gray-700 w-2/12 rounded-br rounded-tr bg-background px-1 text-center disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !x && (!g || A + 1 >= R.length),
-        onClick: () => h(nth(R, A + 1), r),
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          PlusIcon,
-          {
-            className: !x && (!g || A + 1 >= R.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
-          }
-        ) })
+        onMouseMove: R,
+        onMouseUp: () => A(),
+        className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10"
       }
-    )
-  ] }) });
-}, IconChoices = ({ property: r, onChange: h }) => {
-  const { getClasses: g } = useTailwindClassList(), x = g(r), { canChange: v } = useContext(StyleContext), S = useCurrentClassByProperty(r), C = useMemo(() => get(S, "cls", ""), [S]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex grow flex-wrap gap-1", children: map(x, (R) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ) : null,
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStylingProps, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(StylingHelpers, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Accordion, { defaultValue: ["Styles"], type: "multiple", className: "w-full", children: [
+        r && /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: FLEX_CHILD_SECTION, showAccordian: r || h }),
+        h && /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: GRID_CHILD_SECTION, showAccordian: r || h }),
+        SETTINGS_SECTIONS.map((T) => /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: T, showAccordian: r || h }, T.heading))
+      ] })
+    ] })
+  ] });
+}
+const CoreBlock = ({
+  block: r,
+  disabled: h,
+  parentId: g,
+  position: x
+}) => {
+  const [, v] = useAtom$1(draggedBlockAtom), { type: S, icon: C, label: R } = r, { addCoreBlock: A, addPredefinedBlock: T } = useAddBlock(), [, _] = useSelectedBlockIds(), { clearHighlight: O } = useBlockHighlight(), z = () => {
+    if (has(r, "blocks")) {
+      const q = isFunction$1(r.blocks) ? r.blocks() : r.blocks;
+      T(syncBlocksWithDefaults(q), g || null, x);
+    } else
+      A(r, g || null, x);
+    pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+  }, Z = useFeature("dnd"), { t: G } = useTranslation();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
       {
+        disabled: h,
+        onClick: z,
         type: "button",
-        disabled: !v,
-        onClick: () => h(R, r),
-        className: `cursor-pointer rounded border border-border p-1 disabled:cursor-not-allowed ${C === R ? "bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: React__default.createElement(get(EDITOR_ICONS, R, BoxIcon))
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: startCase(toLower(R)) })
-  ] })) });
-}, COLOR_PROP = {
-  backgroundColor: "bg",
-  textColor: "text",
-  borderColor: "border",
-  boxShadowColor: "shadow",
-  outlineColor: "outline",
-  divideColor: "divide",
-  fromColor: "from",
-  viaColor: "via",
-  toColor: "to",
-  ringColor: "ring",
-  ringOffsetColor: "ring-offset"
-}, ColorChoice = ({ property: r, onChange: h }) => {
-  const g = useCurrentClassByProperty(r), x = useMemo(() => get(g, "cls", ""), [g]), { canChange: v } = useContext(StyleContext), [S, C] = useState([]), [R, A] = useState({ color: "", shade: "" }), T = x.split("-"), _ = get(T, "1", ""), O = get(T, "2", ""), z = useCallback(
-    // eslint-disable-next-line no-shadow
-    (q) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(q) ? (C([]), A({ color: q })) : (C(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), A((ee) => ({ ...ee, color: q, shade: ee.shade ? ee.shade : "500" })));
-    },
-    [C, A]
-  );
-  useEffect(() => {
-    if (["current", "inherit", "transparent", "black", "white"].includes(_))
-      return C([]);
-    C(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
-  }, [_]);
-  const Z = useCallback(
-    // eslint-disable-next-line no-shadow
-    (q) => {
-      A({ color: _, shade: q });
-    },
-    [_]
-  );
-  useEffect(() => {
-    A({ color: "", shade: "" });
-  }, [g]);
-  const { match: G } = useTailwindClassList();
-  return useEffect(() => {
-    const ee = `${get(COLOR_PROP, r, "")}-${R.color}${R.shade ? `-${R.shade}` : ""}`;
-    G(r, ee) && h(ee, r);
-  }, [G, R, h, r]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      DropDown,
-      {
-        disabled: !v,
-        rounded: !0,
-        selected: _,
-        onChange: z,
-        options: [
-          "current",
-          "transparent",
-          "primary",
-          "secondary",
-          "black",
-          "white",
-          "slate",
-          "gray",
-          "zinc",
-          "neutral",
-          "stone",
-          "red",
-          "orange",
-          "amber",
-          "yellow",
-          "lime",
-          "green",
-          "emerald",
-          "teal",
-          "cyan",
-          "sky",
-          "blue",
-          "indigo",
-          "violet",
-          "purple",
-          "fuchsia",
-          "pink",
-          "rose"
+        onDragStart: (q) => {
+          q.dataTransfer.setData("text/plain", JSON.stringify(omit(r, ["component", "icon"]))), q.dataTransfer.setDragImage(new Image(), 0, 0), v(omit(r, ["component", "icon"])), setTimeout(() => {
+            _([]), O();
+          }, 200);
+        },
+        draggable: Z ? "true" : "false",
+        className: "cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:bg-slate-800/50 dark:disabled:bg-gray-900 dark:disabled:text-foreground",
+        children: [
+          createElement(C || BoxIcon, { className: "w-4 h-4 mx-auto" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-xs", children: capitalize(G(R || S)) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: O, disabled: !_ || !v, onChange: Z, options: S }) })
-  ] });
-}, getUserInputValues = (r, h) => {
-  r = r.toLowerCase();
-  let g = r.trim().replace(/ |\+/g, "");
-  if ((g === "auto" || g === "none") && h.includes(g))
-    return { value: "", unit: g };
-  const x = h.length ? new RegExp(h.join("|"), "g") : /XXXXXX/g;
-  g = g.replace(x, "");
-  const v = r.match(x), S = v && v.length > 1, C = !isEmpty(g) && Number.isNaN(Number(g));
-  return S || C ? { error: "Invalid value" } : v && (v[0] === "auto" || v[0] === "none") ? { value: v[0], unit: "" } : { value: g, unit: v ? v[0] : "" };
-}, getTwClassValue = (r) => {
-  const h = r.startsWith("-") ? "-" : "", g = r.split("-").pop();
-  if (["auto", "none"].includes(g))
-    return { value: "", unit: g };
-  if (g === "px") return { value: "1", unit: "px" };
-  if (g === "screen") return { value: "100", unit: r.indexOf("w-") !== -1 ? "vw" : "vh" };
-  if (g === "full") return { value: "100", unit: "%" };
-  if (includes(r, "skew-"))
-    return { value: `${h}${g}`, unit: "deg" };
-  if (includes(r, "rotate-"))
-    return { value: `${h}${g}`, unit: "deg" };
-  if (includes(r, "opacity-"))
-    return { value: `${g / 100}`, unit: "-" };
-  if (includes(r, "duration-") || includes(r, "delay-"))
-    return { value: `${g}`, unit: "ms" };
-  if (includes(r, "translate-") && !g.includes("/"))
-    return { value: `${h}${`${g / 4}`}`, unit: "rem" };
-  if (includes(r, "scale-"))
-    return { value: `${h}${`${g / 100}`}`, unit: "-" };
-  if (startsWith(r, "border")) {
-    const x = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
-    if (x) return { value: x[0].split("-").pop(), unit: "px" };
-    if (r.match(/border-?(x|y|t|r|b|l)?/g)) return { value: "1", unit: "px" };
-  }
-  if (startsWith(r, "max-w-")) {
-    if (r === "max-w-screen-sm") return { value: "640", unit: "px" };
-    if (r === "max-w-screen-md") return { value: "768", unit: "px" };
-    if (r === "max-w-screen-lg") return { value: "1024", unit: "px" };
-    if (r === "max-w-screen-xl") return { value: "1280", unit: "px" };
-    if (r === "max-w-screen-2xl") return { value: "1536", unit: "px" };
-    if (g === "xs") return { value: "320", unit: "px" };
-    if (g === "sm") return { value: "384", unit: "px" };
-    if (g === "md") return { value: "448", unit: "px" };
-    if (g === "lg") return { value: "512", unit: "px" };
-    if (g === "xl") return { value: "576", unit: "px" };
-    if (g === "2xl") return { value: "672", unit: "px" };
-    if (g === "3xl") return { value: "768", unit: "px" };
-    if (g === "4xl") return { value: "896", unit: "px" };
-    if (g === "5xl") return { value: "1024", unit: "px" };
-    if (g === "6xl") return { value: "1152", unit: "px" };
-    if (g === "7xl") return { value: "1280", unit: "px" };
-    if (g === "prose") return { value: "65", unit: "ch" };
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: G(R || S) }) })
+  ] }) });
+}, hasVideoEmbed = (r) => {
+  const h = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/, g = /(?:https?:\/\/)?(?:www\.)?(player)?.vimeo\.com/;
+  return h.test(r) || g.test(r);
+}, getVideoURLFromHTML = (r) => {
+  if (isEmpty(r)) return r;
+  const h = /<video[^>]+src=['"]([^'">]+)['"]/, g = /<iframe[^>]+src=['"]([^'">]+)['"]/, x = r.match(h), v = r.match(g), S = x ? x[1] : v ? v[1] : null, C = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/, R = /(?:https?:\/\/)?(?:www\.)?player.vimeo\.com/;
+  return S && (C.test(S) || R.test(S)) ? S : r;
+}, NAME_ATTRIBUTES = ["chai-name", "data-chai-name"], ATTRIBUTE_MAP = {
+  img: { alt: "alt", width: "width", height: "height", src: "image" },
+  video: {
+    src: "url",
+    autoplay: "controls.autoPlay",
+    muted: "controls.muted",
+    loop: "controls.loop",
+    controls: "controls.widgets"
+  },
+  a: {
+    href: "link.href",
+    target: "link.target",
+    type: ""
+    // @TODO: Detect here what to url, email, phone, elementId
+  },
+  input: {
+    placeholder: "placeholder",
+    required: "required",
+    type: "inputType",
+    name: "fieldName"
+  },
+  textarea: {
+    placeholder: "placeholder",
+    required: "required",
+    type: "inputType",
+    name: "fieldName"
+  },
+  select: {
+    placeholder: "placeholder",
+    required: "required",
+    multiple: "multiple",
+    name: "fieldName"
   }
-  if (startsWith(r, "text-")) {
-    if (g === "xs") return { value: "12", unit: "px" };
-    if (g === "sm") return { value: "14", unit: "px" };
-    if (g === "base") return { value: "16", unit: "px" };
-    if (g === "lg") return { value: "18", unit: "px" };
-    if (g === "xl") return { value: "20", unit: "px" };
-    if (g === "2xl") return { value: "24", unit: "px" };
-    if (g === "3xl") return { value: "30", unit: "px" };
-    if (g === "4xl") return { value: "36", unit: "px" };
-    if (g === "5xl") return { value: "48", unit: "px" };
-    if (g === "6xl") return { value: "60", unit: "px" };
-    if (g === "7xl") return { value: "72", unit: "px" };
-    if (g === "8xl") return { value: "96", unit: "px" };
-    if (g === "9xl") return { value: "128", unit: "px" };
+}, shouldAddText = (r, h) => r.children.length === 1 && includes(
+  ["Heading", "Paragraph", "Span", "ListItem", "Button", "Label", "TableCell", "Link", "RichText"],
+  h._type
+), getTextContent = (r) => r.map((h) => h.type === "text" ? get(h, "content", "") : isEmpty(h.children) ? "" : getTextContent(h.children)).join(""), getSanitizedValue = (r) => r === null ? "" : r, getAttrs = (r) => {
+  if (r.tagName === "svg") return {};
+  const h = {}, g = ATTRIBUTE_MAP[r.tagName] || {}, x = r.attributes;
+  return forEach(x, ({ key: v, value: S }) => {
+    if (!includes(NAME_ATTRIBUTES, v))
+      if (g[v]) {
+        if (r.tagName === "img" && v === "src" && !S.startsWith("http")) {
+          const C = find(r.attributes, { key: "width" }), R = find(r.attributes, { key: "height" });
+          C && R ? S = `https://via.placeholder.com/${C == null ? void 0 : C.value}x${R == null ? void 0 : R.value}` : S = "https://via.placeholder.com/150x150";
+        }
+        set(h, g[v], getSanitizedValue(S));
+      } else includes(["style", "class", "srcset"], v) || (has(h, "styles_attrs") || (h.styles_attrs = {}), startsWith(v, "@") && (v = v.replace("@", "x-on:")), h.styles_attrs[`${v}`] = getSanitizedValue(S));
+  }), delete h.class, h;
+}, getStyles = (r, h = "styles") => {
+  if (!r.attributes) return { [h]: `${STYLES_KEY},` };
+  const g = find(r.attributes, { key: "class" });
+  if (g) {
+    const x = g.value;
+    return { [h]: `${STYLES_KEY},${x}` };
   }
-  if (startsWith(r, "leading-")) {
-    if (g === "none") return { value: "1", unit: "-" };
-    if (g === "tight") return { value: "1.25", unit: "-" };
-    if (g === "snug") return { value: "1.375", unit: "-" };
-    if (g === "normal") return { value: "1.5", unit: "-" };
-    if (g === "relaxed") return { value: "1.625", unit: "-" };
-    if (g === "loose") return { value: "2", unit: "-" };
+  return { [h]: `${STYLES_KEY},` };
+}, getBlockProps = (r) => {
+  const h = get(r, "attributes", []), g = h.find((R) => R.key === "data-chai-richtext" || R.key === "chai-richtext"), x = h.find((R) => R.key === "data-chai-lightbox" || R.key === "chai-lightbox"), v = h.find((R) => R.key === "data-chai-dropdown" || R.key === "chai-dropdown"), S = h.find(
+    (R) => R.key === "data-chai-dropdown-button" || R.key === "chai-dropdown-button"
+  ), C = h.find(
+    (R) => R.key === "data-chai-dropdown-content" || R.key === "chai-dropdown-content"
+  );
+  if (v)
+    return { _type: "Dropdown" };
+  if (S)
+    return { _type: "DropdownButton" };
+  if (C)
+    return { _type: "DropdownContent" };
+  if (g)
+    return { _type: "RichText" };
+  if (x)
+    return { _type: "LightBoxLink" };
+  switch (r.tagName) {
+    // self closing tags
+    case "img":
+      return { _type: "Image" };
+    case "input":
+      return { _type: "Input", showLabel: !1 };
+    // showLabel: hiding default block label
+    case "hr":
+      return { _type: "Divider" };
+    case "br":
+      return { _type: "LineBreak" };
+    case "textarea":
+      return { _type: "TextArea", showLabel: !1 };
+    case "audio":
+      return { _type: "Audio" };
+    case "canvas":
+      return { _type: "Canvas" };
+    case "video":
+    case "iframe":
+      return { _type: "CustomHTML" };
+    case "svg":
+      return { _type: "Icon" };
+    // non self closing tags
+    // fixed structure
+    case "select":
+      return { _type: "Select", options: [] };
+    case "option":
+      return { _type: "Option" };
+    case "ul":
+    case "ol":
+    case "dl":
+      return {
+        _type: "List",
+        tag: r.tagName,
+        _listType: r.tagName === "ol" ? "list-decimal" : "list-none"
+      };
+    case "li":
+    case "dt":
+      return { _type: "ListItem", tag: r.tagName };
+    // non self closing tags
+    // free flow structure
+    case "span":
+    case "figcaption":
+    case "legend":
+      return { _type: "Span", tag: r.tagName };
+    case "p":
+      return { _type: "Paragraph", content: "" };
+    case "a":
+      return { _type: "Link" };
+    case "form":
+      return { _type: "Form" };
+    case "label":
+      return { _type: "Label" };
+    case "button":
+      return { _type: "Button" };
+    case "code":
+      return { _type: "Code" };
+    case "h1":
+    case "h2":
+    case "h3":
+    case "h4":
+    case "h5":
+    case "h6":
+      return { _type: "Heading", tag: r.tagName };
+    case "table":
+      return { _type: "Table" };
+    case "tr":
+      return { _type: "TableRow" };
+    case "td":
+    case "th":
+      return { _type: "TableCell", tag: r.tagName };
+    case "thead":
+      return { _type: "TableHead" };
+    case "tbody":
+      return { _type: "TableBody" };
+    case "tfoot":
+      return { _type: "TableFooter" };
+    default: {
+      const R = get(r, "children", []).length > 0 ? "Box" : "EmptyBox";
+      return {
+        _type: R,
+        tag: r.tagName,
+        _name: R == "EmptyBox" || r.tagName === "div" ? R : capitalize(r.tagName)
+      };
+    }
   }
-  if (startsWith(r, "tracking-")) {
-    if (g === "tighter") return { value: "-0.05", unit: "em" };
-    if (g === "tight") return { value: "-0.025", unit: "em" };
-    if (g === "normal") return { value: "0", unit: "em" };
-    if (g === "wide") return { value: "0.025", unit: "em" };
-    if (g === "wider") return { value: "0.05", unit: "em" };
-    if (g === "widest") return { value: "0.1", unit: "em" };
+}, traverseNodes = (r, h = null) => flatMapDeep(r, (g) => {
+  var O, z, Z, G, q, ee, ge, le;
+  if (g.type === "comment") return [];
+  console.log("node ===>", g);
+  let x = { _id: generateUUID() };
+  if (h && (x._parent = h.block._id), g.type === "text")
+    return isEmpty(get(g, "content", "")) ? [] : h && shouldAddText(h.node, h.block) ? (set(h, "block.content", get(g, "content", "")), []) : { ...x, _type: "Text", content: get(g, "content", "") };
+  const v = get(g, "attributes", []), S = v.find(
+    (ce) => ce.key === "data-chai-richtext" || ce.key === "chai-richtext"
+  ), C = v.find(
+    (ce) => ce.key === "data-chai-lightbox" || ce.key === "chai-lightbox"
+  ), R = v.find(
+    (ce) => ce.key === "data-chai-dropdown" || ce.key === "chai-dropdown"
+  ), A = v.find(
+    (ce) => ce.key === "data-chai-dropdown-button" || ce.key === "chai-dropdown-button"
+  ), T = v.find(
+    (ce) => ce.key === "data-chai-dropdown-content" || ce.key === "chai-dropdown-content"
+  );
+  if (x = {
+    ...x,
+    ...getBlockProps(g),
+    ...getAttrs(g),
+    ...getStyles(g)
+  }, g.attributes) {
+    const ce = g.attributes.find(($) => includes(NAME_ATTRIBUTES, $.key));
+    ce && (x._name = ce.value);
   }
-  if (["max", "min", "fit"].includes(g)) return { value: r, unit: "class" };
-  if (g.includes("/")) {
-    const [x, v] = map(g.split("/"), (S) => parseInt(S, 10));
-    return { value: h + (x / v * 100).toFixed(2).replace(".00", ""), unit: "%" };
+  if (S)
+    return x.content = stringify(g.children), has(x, "styles_attrs.data-chai-richtext") && delete x.styles_attrs["data-chai-richtext"], has(x, "styles_attrs.chai-richtext") && delete x.styles_attrs["chai-richtext"], [x];
+  if (C) {
+    const ce = [
+      "data-chai-lightbox",
+      "chai-lightbox",
+      "data-vbtype",
+      "data-autoplay",
+      "data-maxwidth",
+      "data-overlay",
+      "data-gall",
+      "href"
+    ];
+    x = {
+      ...x,
+      href: ((O = v.find(($) => $.key === "href")) == null ? void 0 : O.value) || "",
+      hrefType: ((z = v.find(($) => $.key === "data-vbtype")) == null ? void 0 : z.value) || "video",
+      autoplay: ((Z = v.find(($) => $.key === "data-autoplay")) == null ? void 0 : Z.value) === "true" ? "true" : "false",
+      maxWidth: ((q = (G = v.find(($) => $.key === "data-maxwidth")) == null ? void 0 : G.value) == null ? void 0 : q.replace("px", "")) || "",
+      backdropColor: ((ee = v.find(($) => $.key === "data-overlay")) == null ? void 0 : ee.value) || "",
+      galleryName: ((ge = v.find(($) => $.key === "data-gall")) == null ? void 0 : ge.value) || ""
+    }, forEach(ce, ($) => {
+      has(x, `styles_attrs.${$}`) && delete x.styles_attrs[$];
+    });
   }
-  return isNumber(parseFloat(g)) ? { value: `${h + parseFloat(g) * 4}`, unit: "px" } : { value: g, unit: "class" };
-}, getClassValueAndUnit = (r) => {
-  if (isEmpty(r))
-    return { value: "", unit: "" };
-  const h = r.match(/\[.*\]/g);
-  if (h === null)
-    return getValueAndUnitForTWClass(r);
-  const g = get(h, "0", "").replace(/\[|\]/g, ""), x = r.startsWith("-") ? "-" : "", v = first(g.match(/\d+.\d+|\d+/g));
-  return { value: `${x}${v}`, unit: g.replace(v, "") };
-}, getValueAndUnitForTWClass = (r) => isEmpty(r) ? { value: "", unit: "" } : getTwClassValue(r), BlockSettingsContext = React__default.createContext({
-  setDragData: () => {
+  if (R && (delete x.styles_attrs, x.showDropdown = !1), T && delete x.styles_attrs, A) {
+    delete x.styles_attrs;
+    const ce = filter(g.children || [], (ie) => (ie == null ? void 0 : ie.tagName) !== "span");
+    x.content = getTextContent(ce);
+    const $ = find(
+      g.children || [],
+      (ie) => (ie == null ? void 0 : ie.tagName) === "span" && some(ie.children || [], (he) => (he == null ? void 0 : he.tagName) === "svg")
+    );
+    if ($) {
+      const ie = find($.children || [], (he) => (he == null ? void 0 : he.tagName) === "svg");
+      if (ie) {
+        x.icon = stringify([ie]);
+        const { height: he, width: Se } = getSvgDimensions(ie, "16px", "16px");
+        x.iconHeight = he, x.iconWidth = Se;
+      }
+    }
+    return [x];
   }
-}), DragStyleButton = ({
-  unit: r,
-  currentValue: h,
-  onDrag: g,
-  onDragEnd: x,
-  onDragStart: v,
-  negative: S,
-  cssProperty: C
+  if (x._type === "Input") {
+    const ce = x.inputType || "text";
+    ce === "checkbox" ? set(x, "_type", "Checkbox") : ce === "radio" && set(x, "_type", "Radio");
+  } else if (g.tagName === "video" || g.tagName === "iframe") {
+    const ce = stringify([g]);
+    return hasVideoEmbed(ce) && (set(x, "_type", "Video"), set(x, "url", getVideoURLFromHTML(ce)), set(x, "styles", `${STYLES_KEY},`), set(x, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), x.content = ce, [x];
+  } else if (g.tagName === "svg") {
+    const ce = find(g.attributes, { key: "height" }), $ = find(g.attributes, { key: "width" }), ie = get(ce, "value") ? `[${get(ce, "value")}px]` : "24px", he = get($, "value") ? `[${get($, "value")}px]` : "24px", Se = get(find(g.attributes, { key: "class" }), "value", "w-full h-full");
+    return x.styles = `${STYLES_KEY}, ${cn(`w-${he} h-${ie}`, Se)}`.trim(), g.attributes = filter(g.attributes, (Me) => !includes(["style", "width", "height", "class"], Me.key)), x.icon = stringify([g]), [x];
+  } else if (g.tagName == "option" && h && ((le = h.block) == null ? void 0 : le._type) === "Select")
+    return h.block.options.push({
+      label: getTextContent(g.children),
+      ...getAttrs(g)
+    }), [];
+  const _ = traverseNodes(g.children, { block: x, node: g });
+  return [x, ..._];
+}), getSvgDimensions = (r, h, g) => {
+  const x = get(r, "attributes", []), v = find(x, { key: "height" }), S = find(x, { key: "width" });
+  return {
+    height: get(v, "value") ? `[${get(v, "value")}px]` : g,
+    width: get(S, "value") ? `[${get(S, "value")}px]` : h
+  };
+}, getSanitizedHTML = (r) => {
+  r = r.replace(/(\w+)=\\?"(.*?)\\?"/g, (x, v, S) => {
+    let C = S.replace(/\\"/g, '"');
+    return C = C.replace(/{([^}]+)}/g, (R) => R.replace(/"/g, '\\"')), `${v}="${C.replace(/\\"/g, '"')}"`;
+  }), r = r.replace(/\\n/g, "").replace(/\\\\/g, "").replace(/\\([/<>])/g, "$1").replace(/\\./g, "").replace(/[\n\r\t\f\v]/g, "");
+  const h = r.match(/<body[^>]*>[\s\S]*?<\/body>/);
+  return (h && h.length > 0 ? h[0].replace(/<body/, "<div").replace(/<\/body>/, "</div>") : r).replace(/\s+/g, " ").replaceAll("> <", "><").replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "").trim();
+}, getBlocksFromHTML = (r) => {
+  const h = parse(getSanitizedHTML(r));
+  return isEmpty(r) ? [] : flatten(traverseNodes(h));
+}, ImportHTML = ({ parentId: r, position: h }) => {
+  const { t: g } = useTranslation(), [x, v] = useState(""), { addPredefinedBlock: S } = useAddBlock(), C = () => {
+    const R = getBlocksFromHTML(x);
+    S([...R], r, h), v(""), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "border-border/0 p-0 shadow-none", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardDescription, { children: g("Use HTML snippets from Tailwind CSS component libraries") }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "space-y-2 px-3 py-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "current", className: "text-sm", children: g("Tailwind HTML snippet") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Textarea,
+        {
+          autoFocus: !0,
+          tabIndex: 1,
+          ref: (R) => R && R.focus(),
+          onChange: (R) => v(R.target.value),
+          rows: 12,
+          value: x,
+          placeholder: g("Enter your code snippet here"),
+          className: "resize-none overflow-x-auto whitespace-pre bg-background font-mono text-xs font-normal"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CardFooter, { className: "flex flex-col justify-end p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { disabled: x.trim() === "", onClick: () => C(), size: "sm", className: "w-fit", children: g("Import HTML") }) })
+  ] });
+}, DefaultChaiBlocks = ({
+  parentId: r,
+  position: h,
+  gridCols: g = "grid-cols-2"
 }) => {
-  const { setDragData: R } = useContext(BlockSettingsContext);
+  const x = useRegisteredChaiBlocks(), v = useBuilderProp("filterChaiBlock", () => !0), S = filter(x, v), C = groupBy(S, "category"), R = uniq(map(C.core, "group"));
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "button",
+    ChaiBuilderBlocks,
     {
-      type: "button",
-      onMouseDown: (A) => {
-        const T = {
-          onDrag: g,
-          onDragEnd: x,
-          dragging: !0,
-          dragStartY: A.pageY,
-          dragStartValue: `${h}`,
-          dragUnit: r,
-          negative: S,
-          cssProperty: C
-        };
-        v(T), R(T);
-      },
-      color: void 0,
-      className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(RowSpacingIcon, {})
-    }
-  );
-}, UnitSelection = ({ onSelect: r, current: h, units: g }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: g.map((x) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Button,
-  {
-    className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
-    color: h === x ? "primary" : void 0,
-    size: "sm",
-    onClick: (v) => {
-      v.stopPropagation(), r(x);
-    },
-    children: x
-  },
-  x
-)) }), THROTTLE_TIME = 50, AdvanceChoices = (r) => {
-  const [h, g] = useState(!1), [x, v] = useState(""), { currentClass: S, onChange: C, classPrefix: R, cssProperty: A, units: T, negative: _ } = r, [O, z] = useState(A != null && A.toLowerCase().includes("width") ? "%" : T[0]), [Z, G] = useState(!1), [q, ee] = useState(""), [ge, le] = useState(!1), [ce, $] = useState(!1);
-  useEffect(() => {
-    const { value: W, unit: xe } = getClassValueAndUnit(S);
-    if (xe === "") {
-      v(W), z(A != null && A.toLowerCase().includes("width") ? "%" : first(T));
-      return;
+      gridCols: g,
+      parentId: r,
+      position: h,
+      groups: R,
+      blocks: C.core
     }
-    z(xe), v(xe === "class" || isEmpty(W) ? "" : W);
-  }, [S, A, T]);
-  const ie = useThrottledCallback((W) => C(W), [C], THROTTLE_TIME), he = useThrottledCallback((W) => C(W, !1), [C], THROTTLE_TIME), Se = useCallback(
-    (W = !1) => {
-      const xe = getUserInputValues(`${x}`, T);
-      if (get(xe, "error", !1)) {
-        G(!0);
-        return;
-      }
-      const ve = get(xe, "unit") !== "" ? get(xe, "unit") : O;
-      if (ve === "auto" || ve === "none") {
-        ie(`${R}${ve}`);
-        return;
-      }
-      if (get(xe, "value") === "")
-        return;
-      const je = `${get(xe, "value", "").startsWith("-") ? "-" : ""}${R}[${get(xe, "value", "").replace("-", "")}${ve === "-" ? "" : ve}]`;
-      W ? he(je) : ie(je);
-    },
-    [ie, he, x, O, R, T]
-  ), Me = useCallback(
-    (W) => {
-      const xe = getUserInputValues(`${x}`, T);
-      if (get(xe, "error", !1)) {
-        G(!0);
-        return;
-      }
-      if (W === "auto" || W === "none") {
-        ie(`${R}${W}`);
-        return;
-      }
-      if (get(xe, "value") === "")
-        return;
-      const ve = get(xe, "unit") !== "" ? get(xe, "unit") : W, je = `${get(xe, "value", "").startsWith("-") ? "-" : ""}${R}[${get(xe, "value", "").replace("-", "")}${ve === "-" ? "" : ve}]`;
-      ie(je);
-    },
-    [ie, x, R, T]
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start", children: O === "class" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "input",
-      {
-        className: "h-6 w-24 rounded border border-foreground/20 bg-background px-2 py-0.5 text-sm focus-visible:outline-0",
-        readOnly: !0,
-        value: S
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoCircledIcon, {}) }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
-    ] })
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${ge ? "z-auto" : ""}`, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(O) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "input",
-        {
-          readOnly: O === "class",
-          onKeyPress: (W) => {
-            W.key === "Enter" && Se();
-          },
-          onKeyDown: (W) => {
-            if (W.keyCode !== 38 && W.keyCode !== 40)
-              return;
-            W.preventDefault(), $(!0);
-            const xe = parseInt$1(W.target.value);
-            let ve = isNaN$1(xe) ? 0 : xe;
-            W.keyCode === 38 && (ve += 1), W.keyCode === 40 && (ve -= 1);
-            const ye = `${ve}`, se = `${ye.startsWith("-") ? "-" : ""}${R}[${ye.replace("-", "")}${O === "-" ? "" : O}]`;
-            he(se);
-          },
-          onKeyUp: (W) => {
-            ce && (W.preventDefault(), $(!1));
-          },
-          onBlur: () => Se(),
-          onChange: (W) => {
-            G(!1), v(W.target.value);
-          },
-          onClick: (W) => {
-            var xe;
-            (xe = W == null ? void 0 : W.target) == null || xe.select(), g(!1);
-          },
-          value: ge ? q : x,
-          className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
-            " ",
-            Z ? "border-red-500 text-red-500" : "border-foreground/20"
-          )
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { open: h, delayDuration: 100, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => g(!h),
-            className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block ${T.length === 1 ? "px-2 font-semibold" : ""}`, children: O }),
-              T.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleDownIcon, {}) : null
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipPortal, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          UnitSelection,
-          {
-            units: T,
-            current: O,
-            onSelect: (W) => {
-              g(!1), z(W), Me(W);
+}, CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: r, blocks: h, parentId: g, position: x, gridCols: v = "grid-cols-4" }) => {
+  var A;
+  const { t: S } = useTranslation(), [C] = useBlocksStore(), R = (A = find(C, (T) => T._id === g)) == null ? void 0 : A._type;
+  return React__default.Children.toArray(
+    map(
+      sortBy(r, (T) => CORE_GROUPS.indexOf(T) === -1 ? 99 : CORE_GROUPS.indexOf(T)),
+      (T) => reject(filter(values(h), { group: T }), { hidden: !0 }).length ? /* @__PURE__ */ jsxRuntimeExports.jsx(Accordion, { type: "single", value: T, collapsible: !0, className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: T, className: "border-border", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { className: "rounded-md bg-background px-4 py-2 capitalize text-foreground hover:no-underline", children: capitalize(S(T.toLowerCase())) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContent, { className: "mx-auto max-w-xl p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-2 " + v, children: React__default.Children.toArray(
+          reject(filter(values(h), { group: T }), { hidden: !0 }).map((_) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CoreBlock,
+            {
+              parentId: g,
+              position: x,
+              block: _,
+              disabled: !canAcceptChildBlock(R, _.type) || !canBeNestedInside(R, _.type)
             }
-          }
+          ))
         ) }) })
-      ] })
-    ] }),
-    ["none", "auto"].indexOf(O) !== -1 || ge ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
-      DragStyleButton,
+      ] }) }) : null
+    )
+  );
+}, addBlockTabAtom = atomWithStorage("__add_block_tab", "library"), AddBlocksPanel = ({
+  className: r,
+  showHeading: h = !0,
+  parentId: g = void 0,
+  position: x = -1
+}) => {
+  const { t: v } = useTranslation(), [S, C] = useAtom$1(addBlockTabAtom), [, R] = useAtom$1(showPredefinedBlockCategoryAtom), A = useBuilderProp("importHTMLSupport", !0), T = useBuilderProp("addBlocksDialogTabs", []), _ = useCallback(() => {
+    pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex h-full w-full flex-col overflow-hidden", r), children: [
+    h ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2 flex flex-col justify-between rounded-md bg-background/30 p-1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "flex flex-col items-baseline px-1 text-xl font-semibold xl:flex-col", children: v("Add block") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "p-0 text-xs font-light leading-3 opacity-80 xl:pl-1", children: v(S === "html" ? "Enter or paste TailwindCSS HTML snippet" : "Click to add block to page") })
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Tabs,
       {
-        onDragStart: () => le(!0),
-        onDragEnd: (W) => {
-          if (ee(() => ""), le(!1), isEmpty(W))
-            return;
-          const xe = `${W}`, ye = `${xe.startsWith("-") ? "-" : ""}${R}[${xe.replace("-", "")}${O === "-" ? "" : O}]`;
-          ie(ye);
-        },
-        onDrag: (W) => {
-          if (isEmpty(W))
-            return;
-          ee(W);
-          const xe = `${W}`, ye = `${xe.startsWith("-") ? "-" : ""}${R}[${xe.replace("-", "")}${O === "-" ? "" : O}]`;
-          he(ye);
+        onValueChange: (O) => {
+          R(""), C(O);
         },
-        currentValue: x,
-        unit: O,
-        negative: _,
-        cssProperty: A
+        value: S,
+        className: "flex h-full max-h-full flex-col overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { className: "flex w-full items-center", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "library", children: v("Library") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "core", children: v("Blocks") }),
+            A ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "html", children: v("Import") }) : null,
+            map(T, (O) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: O.key, children: React__default.createElement(O.tab) }))
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "core", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "-mx-1.5 h-full max-h-full overflow-y-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DefaultChaiBlocks, { gridCols: "grid-cols-4", parentId: g, position: x }) }) }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesPanel, { parentId: g, position: x }) }),
+          A ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ImportHTML, { parentId: g, position: x }) }) : null,
+          map(T, (O) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: O.key, children: React__default.createElement(O.tabContent, { close: _, parentId: g, position: x }) }))
+        ]
       }
     )
-  ] }) }) });
-}, useCurrentClassByProperty = (r) => {
-  const h = useSelectedBlockCurrentClasses();
-  return findLast(h, { property: r });
-}, canChangeClass = (r, h) => {
-  const g = {
-    xs: 0,
-    sm: 1,
-    md: 2,
-    lg: 3,
-    xl: 4,
-    "2xl": 5
+  ] });
+}, ChaiSelect = ({
+  defaultValue: r = "",
+  onValueChange: h,
+  options: g,
+  placeholder: x = "Select",
+  className: v = ""
+}) => {
+  const [S, C] = useState(r), R = (A) => {
+    const T = A.target.value;
+    C(T), h(T);
   };
-  return g[get(r, "mq", "xs")] <= g[h];
-}, CLASS_PREFIXES = {
-  width: "w-",
-  height: "h-",
-  minWidth: "min-w-",
-  minHeight: "min-h-",
-  maxWidth: "max-w-",
-  maxHeight: "max-h-",
-  zIndex: "z-",
-  gap: "gap-",
-  gapX: "gap-x-",
-  gapY: "gap-y-",
-  margin: "m-",
-  marginX: "mx-",
-  marginY: "my-",
-  marginTop: "mt-",
-  marginBottom: "mb-",
-  marginLeft: "ml-",
-  marginRight: "mr-",
-  padding: "p-",
-  paddingX: "px-",
-  paddingY: "py-",
-  paddingTop: "pt-",
-  paddingBottom: "pb-",
-  paddingLeft: "pl-",
-  paddingRight: "pr-",
-  spaceX: "space-x-",
-  spaceY: "space-y-",
-  border: "border-",
-  borderTop: "border-t-",
-  borderBottom: "border-b-",
-  borderLeft: "border-l-",
-  borderRight: "border-r-",
-  borderX: "border-x-",
-  borderY: "border-y-",
-  borderRadius: "rounded-",
-  borderRadiusTop: "rounded-t-",
-  borderRadiusRight: "rounded-r-",
-  borderRadiusBottom: "rounded-b-",
-  borderRadiusLeft: "rounded-l-",
-  borderRadiusTopLeft: "rounded-tl-",
-  borderRadiusTopRight: "rounded-tr-",
-  borderRadiusBottomRight: "rounded-br-",
-  borderRadiusBottomLeft: "rounded-bl-",
-  fontSize: "text-",
-  lineHeight: "leading-",
-  letterSpacing: "tracking-",
-  textIndent: "indent-",
-  rotate: "rotate-",
-  duration: "duration-",
-  transitionDelay: "delay-",
-  scale: "scale-",
-  scaleX: "scale-x-",
-  scaleY: "scale-y-",
-  translateX: "translate-x-",
-  translateY: "translate-y-",
-  skewX: "skew-x-",
-  skewY: "skew-y-",
-  top: "top-",
-  bottom: "bottom-",
-  left: "left-",
-  right: "right-",
-  inset: "inset-",
-  insetX: "inset-x-",
-  insetY: "inset-y-",
-  opacity: "opacity-",
-  flexBasis: "basis-"
-}, BREAKPOINTS = {
-  xs: "",
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px",
-  "2xl": "1536px"
-}, getBreakpoint = (r) => `${r.toUpperCase()} ${BREAKPOINTS[r] ? `(${BREAKPOINTS[r]} & up)` : ""}`, BlockStyle = (r) => {
-  const { t: h } = useTranslation(), { type: g = "icons", label: x, property: v, onEmitChange: S = () => {
-  }, units: C, negative: R = !1 } = r, [A] = useDarkMode(), [T] = useStylingState(), [, _] = useCanvasWidth(), O = useCurrentClassByProperty(v), z = useAddClassesToBlocks(), Z = useRemoveClassesFromBlocks(), [G] = useSelectedBlockIds(), q = useMemo(() => get(O, "fullCls", ""), [O]), ee = useCallback(
-    (he, Se = !0) => {
-      const Me = { dark: A, mq: _, mod: T, cls: he, property: v, fullCls: "" };
-      (A || T !== "") && (Me.mq = "xs");
-      const W = generateFullClsName(Me);
-      z(G, [W], Se);
-    },
-    [G, A, _, T, v, z]
-  ), ge = useCallback(() => {
-    Z(G, [q]);
-  }, [G, q, Z]), le = useMemo(() => canChangeClass(O, _), [O, _]);
-  useEffect(() => {
-    S(le, O);
-  }, [le, S, O]);
-  const [, , ce] = useCanvasWidth(), $ = useCallback(
-    (he) => {
-      ce({
-        xs: 400,
-        sm: 640,
-        md: 800,
-        lg: 1024,
-        xl: 1420,
-        "2xl": 1920
-      }[he]);
-    },
-    [ce]
-  ), ie = get(O, "dark", null) === A && get(O, "mod", null) === T && get(O, "mq", null) === _;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: le, canReset: O && ie, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] ${O && !ie ? "text-foreground" : ""}`, children: h(x) }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[150px]", children: [
-        g === "arbitrary" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-          AdvanceChoices,
-          {
-            currentClass: get(O, "cls", ""),
-            classPrefix: get(CLASS_PREFIXES, v, ""),
-            units: C || [],
-            onChange: ee,
-            negative: R,
-            cssProperty: v
-          }
-        ) : null,
-        g === "icons" && /* @__PURE__ */ jsxRuntimeExports.jsx(IconChoices, { property: v, onChange: ee }),
-        g === "range" && /* @__PURE__ */ jsxRuntimeExports.jsx(RangeChoices, { property: v, onChange: ee }),
-        g === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: v, onChange: ee }),
-        g === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: x, property: v, onChange: ee })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${q ? "visible" : "invisible"}`, children: ie ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => ge(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : le && O ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            className: "invisible ml-3 mt-1 rounded-full bg-blue-500 text-white group-hover:visible",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoCircledIcon, {})
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-          "Current style is set at  ",
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-bold", children: [
-            getBreakpoint(get(O, "mq")),
-            A && !O.dark ? "(Light mode)" : ""
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("relative inline-block w-full", v), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "select",
+    {
+      className: "mt-1 flex w-full rounded-md border border-border bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      value: S,
+      onChange: R,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", disabled: !0, children: x }),
+        g.map((A) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: A.value, children: A.label }, A.value))
+      ]
+    }
+  ) });
+};
+function UILibrariesSelect({
+  uiLibraries: r,
+  library: h,
+  setLibrary: g
+}) {
+  const { t: x } = useTranslation();
+  return h ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-12", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs font-bold text-gray-500", children: x("Choose library") }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ChaiSelect,
+      {
+        className: "mt-1",
+        options: r.map((v) => ({
+          value: v.uuid,
+          label: v.name
+        })),
+        defaultValue: h,
+        onValueChange: (v) => g(v)
+      }
+    )
+  ] }) : null;
+}
+const BlockCard = ({
+  block: r,
+  library: h,
+  parentId: g = void 0,
+  position: x = -1
+}) => {
+  const [v, S] = useState(!1), C = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: R, addPredefinedBlock: A } = useAddBlock(), [, T] = useSelectedBlockIds(), { clearHighlight: _ } = useBlockHighlight(), O = get(r, "name", get(r, "label")), z = useFeature("dnd"), [, Z] = useAtom$1(draggedBlockAtom), G = (ge) => {
+    const le = has(ge, "styles_attrs.data-page-section");
+    return ge._type === "Box" && le;
+  }, q = useCallback(
+    async (ge) => {
+      if (ge.stopPropagation(), has(r, "component")) {
+        R(r, g, x), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+        return;
+      }
+      S(!0);
+      const le = await C(h, r);
+      isEmpty(le) || A(syncBlocksWithDefaults(le), g, x), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+    },
+    [R, A, r, C, h, g, x]
+  ), ee = async (ge) => {
+    const le = await C(h, r);
+    let ce = g;
+    if (G(first(le)) && (ce = null), !isEmpty(le)) {
+      const $ = { blocks: le, uiLibrary: !0, parent: ce };
+      if (ge.dataTransfer.setData("text/plain", JSON.stringify($)), r.preview) {
+        const ie = new Image();
+        ie.src = r.preview, ie.onload = () => {
+          ge.dataTransfer.setDragImage(ie, 0, 0);
+        };
+      } else
+        ge.dataTransfer.setDragImage(new Image(), 0, 0);
+      Z($), setTimeout(() => {
+        T([]), _(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+      }, 200);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        onClick: v ? () => {
+        } : q,
+        draggable: z ? "true" : "false",
+        onDragStart: ee,
+        className: clsx(
+          "relative mt-2 cursor-pointer overflow-hidden rounded-md border border-border bg-white duration-200 hover:border-blue-500 hover:shadow-xl"
+        ),
+        children: [
+          v && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute flex h-full w-full items-center justify-center bg-black/70", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { className: "animate-spin", size: 15, color: "white" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "button",
+          r.preview ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: r.preview, className: "min-h-[45px] w-full rounded-md", alt: O }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border bg-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: O }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: O }) })
+  ] });
+}, libraryBlocksAtom = atom$1(
+  {}
+), useLibraryBlocks = (r) => {
+  const [h, g] = useAtom$1(libraryBlocksAtom), x = useBuilderProp("getUILibraryBlocks", noop), v = get(h, `${r == null ? void 0 : r.uuid}.blocks`, null), S = get(h, `${r == null ? void 0 : r.uuid}.loading`, "idle"), C = useRef("idle");
+  return useEffect(() => {
+    (async () => {
+      if (S === "complete" || C.current === "loading") return;
+      C.current = "loading", g((A) => ({ ...A, [r == null ? void 0 : r.uuid]: { loading: "loading", blocks: [] } }));
+      const R = await x(r);
+      C.current = "idle", g((A) => ({ ...A, [r == null ? void 0 : r.uuid]: { loading: "complete", blocks: R || [] } }));
+    })();
+  }, [r, v, S, C, g, x]), { data: v || [], isLoading: S === "loading" };
+}, UILibrarySection = ({ parentId: r, position: h }) => {
+  const [g, x] = useAtom$1(selectedLibraryAtom), v = useBuilderProp("uiLibraries", []), S = useRegisteredChaiBlocks(), C = values(S).filter((ce) => ce.category === "custom"), R = v.find((ce) => ce.uuid === g) || first(v), { data: A, isLoading: T } = useLibraryBlocks(R), _ = groupBy([...A, ...C], "group"), [O, z] = useState("Hero"), Z = get(_, O, []), G = useRef(null), { t: q } = useTranslation(), ee = (ce) => {
+    G.current && (clearTimeout(G.current), G.current = null), G.current = setTimeout(() => {
+      G.current && z(ce);
+    }, 300);
+  };
+  if (T)
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 grid h-full w-full grid-cols-12 gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-3 h-full" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-9 h-full" })
+    ] });
+  const ge = filter(Z, (ce, $) => $ % 2 === 0), le = filter(Z, (ce, $) => $ % 2 === 1);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full pt-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesSelect, { library: R == null ? void 0 : R.uuid, setLibrary: x, uiLibraries: v }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: q("Groups") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("hr", { className: "mt-1 border-border" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: React__default.Children.toArray(
+          map(_, (ce, $) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
             {
-              type: "button",
-              onClick: () => $(get(O, "mq")),
-              className: "block w-full cursor-default text-right font-semibold text-blue-500",
+              onMouseEnter: () => ee($),
+              onMouseLeave: () => clearTimeout(G.current),
+              onClick: () => z($),
+              className: cn(
+                "flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-sm text-foreground transition-all ease-in-out hover:bg-gray-200 dark:hover:bg-gray-800",
+                $ === O ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+              ),
               children: [
-                "Switch to ",
-                get(O, "mq").toUpperCase()
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(q($.toLowerCase())) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
-            }
-          )
-        ] }) }) })
-      ] }) : null })
-    ] })
-  ] }) });
-}, basicUnits = ["px", "%", "em", "rem", "ch", "vh", "vw"], MultipleChoices = ({
-  label: r,
-  options: h,
-  borderB: g = !1,
-  borderT: x = !1,
-  type: v = "arbitrary",
-  units: S = basicUnits,
-  negative: C = !1
-}) => {
-  const { t: R } = useTranslation(), [A, T] = useState(h[0].key), _ = useSelectedBlockCurrentClasses(), O = useCallback((z) => map(_, "property").includes(z), [_]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            },
+            $
+          ))
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      ScrollArea,
+      {
+        onMouseEnter: () => G.current ? clearTimeout(G.current) : null,
+        className: "z-10 -mt-2 flex h-full max-h-full w-full flex-col gap-2 border-l border-border transition-all ease-linear",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
+              ge.map((ce) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: r, position: h, block: ce, library: R }))
+            ) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
+              le.map((ce) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: r, position: h, block: ce, library: R }))
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
+        ]
+      }
+    )
+  ] }) }) });
+}, UILibrariesPanel = ({ parentId: r, position: h }) => /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrarySection, { parentId: r, position: h }), placeholderStyle = {
+  display: "flex",
+  alignItems: "center",
+  zIndex: 1
+}, DefaultCursor = React__default.memo(function({ top: h, left: g }) {
+  const x = {
+    position: "absolute",
+    pointerEvents: "none",
+    top: h + "px",
+    left: g + "px",
+    right: 0
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...placeholderStyle, ...x }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-0.5 flex-1 rounded-[1px] bg-green-500" }) });
+}), Overlay = memo(function({ children: h, isDragging: g }) {
+  return g ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pointer-events-none fixed left-0 top-0 z-[100] h-full w-full", children: h }) : null;
+}), DefaultDragPreview = memo(({ id: r, isDragging: h, mouse: g }) => {
+  const [x] = useBlocksStore(), v = useMemo(() => x.find((C) => C._id === r), [x, r]), S = useMemo(
+    () => ({
+      transform: `translate(${(g == null ? void 0 : g.x) - 10}px, ${(g == null ? void 0 : g.y) - 10}px)`
+    }),
+    [g]
+  );
+  return g ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Overlay, { isDragging: h, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: `mb-2 border-border py-2 first:pt-0 last:pb-0 ${g ? "border-b" : ""} ${x ? "border-t" : ""}`,
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row text-xs", children: [
-          r && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: R(r) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: React__default.Children.toArray(
-            h.map(({ label: z, key: Z }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => T(Z),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${Z === A ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
-                  children: [
-                    React__default.createElement("div", {
-                      className: O(Z) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
-                    }),
-                    React__default.createElement(get(EDITOR_ICONS, Z, BoxIcon), { className: "text-inherit w-3 h-3" })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: startCase(toLower(z)) })
-            ] }) }))
-          ) })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          BlockStyle,
-          {
-            type: v,
-            units: [...S],
-            label: "",
-            property: A,
-            negative: C
-          }
-        ) })
-      ]
+      className: "pointer-events-none absolute z-50 rounded border border-border bg-gray-100/80 font-semibold text-blue-600 shadow-md dark:border-gray-700 dark:bg-gray-800",
+      style: S,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", className: "flex !cursor-grab items-center p-0.5", "aria-label": `Type: ${v == null ? void 0 : v._type}`, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "-mt-0.5 h-3 w-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TypeIcon, { type: v == null ? void 0 : v._type }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-2 truncate text-[11px]", children: (v == null ? void 0 : v._name) || (v == null ? void 0 : v._type) })
+      ] })
     }
-  );
-}, NestedOptions = ({ heading: r, items: h }) => {
-  const { t: g } = useTranslation(), x = useSelectedBlockCurrentClasses(), v = useMemo(() => {
-    const S = (A) => flatten(
-      A.map((T) => T.styleType === "multiple" ? map(T.options, "key") : T.property)
-    ), C = flatten(
-      h.map((A) => A.styleType === "accordion" ? S(A.items) : A.styleType === "multiple" ? map(A.options, "key") : A.property)
-    ), R = map(x, "property");
-    return intersection(C, R).length > 0;
-  }, [x, h]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("details", { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("summary", { className: "my-px cursor-default rounded-md bg-gray-50 p-px px-2 text-[11px] text-foreground dark:bg-gray-800", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline", children: [
-      startCase(g(r.toLowerCase())),
-      v ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "span",
+  ) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "hidden" });
+}), PasteAtRootContextMenu = ({ parentContext: r, setParentContext: h }) => {
+  const { t: g } = useTranslation(), { canPaste: x, pasteBlocks: v } = usePasteBlocks();
+  return useEffect(() => {
+    x("root") || h(null);
+  }, [x("root")]), r && x("root") && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      style: { position: "absolute", top: r.y - 75, left: r.x - 56 },
+      onMouseLeave: () => h(null),
+      className: "w-28 rounded-md border bg-white p-1 shadow-xl",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
         {
-          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${v ? "bg-blue-500" : "bg-gray-300"}`
-        }
-      ) : null
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2", children: h.map((S) => S.styleType === "multiple" ? /* @__PURE__ */ jsxRuntimeExports.jsx(MultipleChoices, { ...S }, S.label) : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyle, { ...S }, S.label)) })
-  ] });
-}, SectionContext = createContext({}), StylingGroup = ({ section: r, showAccordian: h }) => {
-  const { t: g } = useTranslation(), x = useSelectedBlockCurrentClasses(), v = useCallback(
-    (C = []) => {
-      const R = {};
-      for (let T = 0; T < x.length; T++)
-        R[x[T].property] = x[T].cls;
-      let A = !0;
-      for (const T in C)
-        if (!has(R, T) || R[T] !== C[T]) {
-          A = !1;
-          break;
+          className: "flex cursor-pointer items-center gap-x-4 rounded px-2 py-1 text-xs hover:bg-blue-50",
+          onClick: () => {
+            v("root"), h(null);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(CardStackIcon, {}),
+            " ",
+            g("Paste")
+          ]
         }
-      return A;
-    },
-    [x]
-  ), S = useMemo(() => ({}), []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionContext.Provider, { value: S, children: h ? /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: r.heading, className: "border-none", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { className: "border-slate-150 border-t py-2 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-x-2 text-xs font-medium", children: startCase(g(r.heading)) }) }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContent, { className: "py-2", children: React__default.Children.toArray(
-      r.items.map((C) => has(C, "component") ? React__default.createElement(C.component, { key: C.label }) : has(C, "styleType") ? C.styleType === "multiple" ? /* @__PURE__ */ jsxRuntimeExports.jsx(MultipleChoices, { ...C }, C.label) : C.styleType === "accordion" && v(C == null ? void 0 : C.conditions) ? /* @__PURE__ */ jsxRuntimeExports.jsx(NestedOptions, { ...C }, C.label) : null : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyle, { ...C }, C.label))
-    ) })
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-2", children: React__default.Children.toArray(
-    r.items.map((C) => has(C, "component") ? React__default.createElement(C.component, { key: C.label }) : has(C, "styleType") ? C.styleType === "multiple" ? /* @__PURE__ */ jsxRuntimeExports.jsx(MultipleChoices, { ...C }, C.label) : C.styleType === "accordion" && v(C == null ? void 0 : C.conditions) ? /* @__PURE__ */ jsxRuntimeExports.jsx(NestedOptions, { ...C }, C.label) : null : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyle, { ...C }, C.label))
-  ) }) });
-}, StylingHelpers = () => {
-  const r = useSelectedBlock(), [h] = useSelectedStylingBlocks(), { t: g } = useTranslation(), x = useAddClassesToBlocks(), v = getRegisteredChaiBlock(r._type), S = get(first(h), "prop"), C = get(v.props, `${S}.presets`, {});
-  if (!has(v, "props") || isEmpty(C))
-    return null;
-  const R = (A) => {
-    const T = A.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    x([r._id], T, !0);
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "default", className: "w-full", size: "sm", children: [
-      g("Apply Presets"),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(CaretDownIcon, {})
-    ] }) }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuContent, { className: "max-h-80 w-56", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "no-scrollbar h-full", children: isEmpty(C) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuLabel, { children: [
-        v.type,
-        " ",
-        g("presets")
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuGroup, { children: keys(C).map((A) => /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuItem, { className: "group text-xs", onClick: () => R(C[A]), children: [
-        capitalize(startCase(g(A))),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuShortcut, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: g("apply") })
-      ] })) })
-    ] }) }) })
-  ] }) });
-}, BlockStylingProps = () => {
-  const r = useSelectedBlock(), [h, g] = useSelectedStylingBlocks(), { t: x } = useTranslation();
-  if (!r) return null;
-  const v = Object.keys(r).filter(
-    (C) => typeof r[C] == "string" && r[C].startsWith("#styles:")
+      )
+    }
   );
-  if (isEmpty(v) || v.length <= 1) return null;
-  const S = (C) => find(h, (R) => R.prop === C);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-1", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "block-styling-props", className: "py-1 text-xs", children: [
-      x("Style element"),
-      ":"
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-2", children: map(v, (C) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Badge,
+}, CopyPasteBlocks = () => {
+  const [r] = useBlocksStore(), [h] = useSelectedBlockIds(), { pasteBlocks: g } = usePasteBlocks(), [, x] = useCopyBlockIds(), { t: v } = useTranslation(), S = useSelectedBlock(), C = useCallback(() => {
+    const R = h.map((A) => {
+      const T = r.find((_) => _._id === A);
+      return {
+        id: A,
+        data: T
+      };
+    });
+    x(R.map((A) => A.id));
+  }, [h, r, x]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      ContextMenuItem,
       {
-        className: "cursor-pointer",
+        disabled: !canDuplicateBlock(S == null ? void 0 : S._type),
+        onClick: C,
+        className: "flex items-center gap-x-4 text-xs",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, {}),
+          " ",
+          v("Copy")
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      ContextMenuItem,
+      {
+        className: "flex items-center gap-x-4 text-xs",
         onClick: () => {
-          g([{ id: `${C}-${r._id}`, blockId: r._id, prop: C }]);
+          g(h);
         },
-        variant: S(C) ? "default" : "secondary",
-        children: startCase(C)
-      },
-      C
-    )) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "my-2 h-[1px] w-full bg-border" })
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CardStackIcon, {}),
+          " ",
+          v("Paste")
+        ]
+      }
+    )
   ] });
-}, MAPPER = {
-  px: 1,
-  "%": 1,
-  em: 100,
-  rem: 100,
-  ch: 1,
-  vw: 1,
-  vh: 1,
-  "-": 1,
-  deg: 1,
-  ms: 0.1
+}, CutBlocks = () => {
+  const [r] = useSelectedBlockIds(), [, h] = useCutBlockIds(), { t: g } = useTranslation();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(ContextMenuItem, { className: "flex items-center gap-x-4 text-xs", onClick: () => h(r), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ScissorsIcon, {}),
+    " ",
+    g("Cut")
+  ] });
+}, RemoveBlocks = () => {
+  const [r] = useSelectedBlockIds(), h = useRemoveBlocks(), g = useSelectedBlock(), { t: x } = useTranslation();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    ContextMenuItem,
+    {
+      disabled: !canDeleteBlock(g == null ? void 0 : g._type),
+      className: "flex items-center gap-x-4 text-xs",
+      onClick: () => h(r),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TrashIcon, {}),
+        " ",
+        x("Remove")
+      ]
+    }
+  );
+}, BlockContextMenuContent = () => {
+  const { t: r } = useTranslation(), [h] = useSelectedBlockIds(), g = useDuplicateBlocks(), x = useSelectedBlock(), v = useCallback(() => {
+    g(h);
+  }, [h, g]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(ContextMenuContent, { className: "border-border text-xs", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      ContextMenuItem,
+      {
+        disabled: !canAddChildBlock(x == null ? void 0 : x._type),
+        className: "flex items-center gap-x-4 text-xs",
+        onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, x),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { size: "14" }),
+          " ",
+          r("Add block")
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      ContextMenuItem,
+      {
+        disabled: !canDuplicateBlock(x == null ? void 0 : x._type),
+        className: "flex items-center gap-x-4 text-xs",
+        onClick: v,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CardStackPlusIcon, {}),
+          " ",
+          r("Duplicate")
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CutBlocks, {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CopyPasteBlocks, {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(RemoveBlocks, {})
+  ] });
+}, BlockContextMenu = ({ children: r }) => /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ContextMenu, { children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx(ContextMenuTrigger, { asChild: !0, children: r }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContextMenuContent, {})
+] }) }), defaultShortcuts = [
+  { key: "ArrowDown", command: "selectNext" },
+  { key: "ArrowUp", command: "selectPrev" },
+  { key: "ArrowLeft", command: "selectParent", when: "isLeaf || isClosed" },
+  { key: "ArrowLeft", command: "close", when: "isOpen" },
+  { key: "ArrowRight", command: "open", when: "isClosed" },
+  { key: "ArrowRight", command: "selectNext", when: "isOpen" },
+  { key: "Home", command: "selectFirst" },
+  { key: "End", command: "selectLast" }
+];
+function selectFirst(r) {
+  r.firstNode && r.select(r.firstNode.id);
+}
+function selectLast(r) {
+  r.lastNode && r.select(r.lastNode.id);
+}
+function selectNext(r) {
+  const h = r.selectedNodes[0].next || r.firstNode;
+  r.select(h.id);
+}
+function selectPrev(r) {
+  const h = r.selectedNodes[0].prev || r.lastNode;
+  r.select(h.id);
+}
+const selectParent = (r, h) => {
+  var x;
+  const g = ((x = r.selectedIds[0]) == null ? void 0 : x.parent) || null;
+  g && h && r.select(g.id);
+}, open = (r, h) => {
+  const g = r.selectedNodes[0];
+  g.isInternal && h && g.open();
+}, close = (r, h) => {
+  const g = r.selectedNodes[0];
+  g.isInternal && h && g.close();
 };
-function BlockStyling() {
-  const { flexChild: r, gridChild: h } = useSelectedBlocksDisplayChild(), [g] = useSelectedStylingBlocks(), [x, v] = React__default.useState(""), [S, C] = React__default.useState({
-    onDrag: (T) => T,
-    onDragEnd: (T) => T,
-    dragStartY: 0,
-    dragging: !1,
-    dragStartValue: 0,
-    dragUnit: "",
-    negative: !1,
-    cssProperty: ""
-  }), R = useThrottledCallback(
-    (T) => {
-      const _ = !get(S, "negative", !1), O = get(S, "cssProperty", "");
-      let z = parseFloat(S.dragStartValue);
-      z = isNaN(z) ? 0 : z;
-      let Z = MAPPER[S.dragUnit];
-      (startsWith(O, "scale") || O === "opacity") && (Z = 10);
-      let q = (S.dragStartY - T.pageY) / Z + z;
-      _ && q < 0 && (q = 0), O === "opacity" && q > 1 && (q = 1), S.onDrag(`${q}`), v(`${q}`);
-    },
-    [S],
-    50
-  ), A = useCallback(() => {
-    setTimeout(() => S.onDragEnd(`${x}`), 100), C({
-      onDrag: (T) => T,
-      onDragEnd: (T) => T,
-      dragStartY: 0,
-      dragging: !1,
-      dragStartValue: 0,
-      dragUnit: "",
-      negative: !1,
-      cssProperty: ""
-    });
-  }, [S, x, C]);
-  return isEmpty(g) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(BlockSettingsContext.Provider, { value: { setDragData: C }, children: [
-    S.dragging ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+function VscJson(r) {
+  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 16 16", fill: "currentColor" }, child: [{ tag: "path", attr: { fillRule: "evenodd", clipRule: "evenodd", d: "M6 2.984V2h-.09c-.313 0-.616.062-.909.185a2.33 2.33 0 0 0-.775.53 2.23 2.23 0 0 0-.493.753v.001a3.542 3.542 0 0 0-.198.83v.002a6.08 6.08 0 0 0-.024.863c.012.29.018.58.018.869 0 .203-.04.393-.117.572v.001a1.504 1.504 0 0 1-.765.787 1.376 1.376 0 0 1-.558.115H2v.984h.09c.195 0 .38.04.556.121l.001.001c.178.078.329.184.455.318l.002.002c.13.13.233.285.307.465l.001.002c.078.18.117.368.117.566 0 .29-.006.58-.018.869-.012.296-.004.585.024.87v.001c.033.283.099.558.197.824v.001c.106.273.271.524.494.753.223.23.482.407.775.53.293.123.596.185.91.185H6v-.984h-.09c-.2 0-.387-.038-.563-.115a1.613 1.613 0 0 1-.457-.32 1.659 1.659 0 0 1-.309-.467c-.074-.18-.11-.37-.11-.573 0-.228.003-.453.011-.672.008-.228.008-.45 0-.665a4.639 4.639 0 0 0-.055-.64 2.682 2.682 0 0 0-.168-.609A2.284 2.284 0 0 0 3.522 8a2.284 2.284 0 0 0 .738-.955c.08-.192.135-.393.168-.602.033-.21.051-.423.055-.64.008-.22.008-.442 0-.666-.008-.224-.012-.45-.012-.678a1.47 1.47 0 0 1 .877-1.354 1.33 1.33 0 0 1 .563-.121H6zm4 10.032V14h.09c.313 0 .616-.062.909-.185.293-.123.552-.3.775-.53.223-.23.388-.48.493-.753v-.001c.1-.266.165-.543.198-.83v-.002c.028-.28.036-.567.024-.863-.012-.29-.018-.58-.018-.869 0-.203.04-.393.117-.572v-.001a1.502 1.502 0 0 1 .765-.787 1.38 1.38 0 0 1 .558-.115H14v-.984h-.09c-.196 0-.381-.04-.557-.121l-.001-.001a1.376 1.376 0 0 1-.455-.318l-.002-.002a1.415 1.415 0 0 1-.307-.465v-.002a1.405 1.405 0 0 1-.118-.566c0-.29.006-.58.018-.869a6.174 6.174 0 0 0-.024-.87v-.001a3.537 3.537 0 0 0-.197-.824v-.001a2.23 2.23 0 0 0-.494-.753 2.331 2.331 0 0 0-.775-.53 2.325 2.325 0 0 0-.91-.185H10v.984h.09c.2 0 .387.038.562.115.174.082.326.188.457.32.127.134.23.29.309.467.074.18.11.37.11.573 0 .228-.003.452-.011.672-.008.228-.008.45 0 .665.004.222.022.435.055.64.033.214.089.416.168.609a2.285 2.285 0 0 0 .738.955 2.285 2.285 0 0 0-.738.955 2.689 2.689 0 0 0-.168.602c-.033.21-.051.423-.055.64a9.15 9.15 0 0 0 0 .666c.008.224.012.45.012.678a1.471 1.471 0 0 1-.877 1.354 1.33 1.33 0 0 1-.563.121H10z" }, child: [] }] })(r);
+}
+function BsLightningFill(r) {
+  return GenIcon({ tag: "svg", attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { d: "M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641z" }, child: [] }] })(r);
+}
+function TbEyeDown(r) {
+  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "path", attr: { d: "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" }, child: [] }, { tag: "path", attr: { d: "M12 18c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" }, child: [] }, { tag: "path", attr: { d: "M19 16v6" }, child: [] }, { tag: "path", attr: { d: "M22 19l-3 3l-3 -3" }, child: [] }] })(r);
+}
+function BiCollapseVertical(r) {
+  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 24 24" }, child: [{ tag: "path", attr: { d: "M12 7.59 7.05 2.64 5.64 4.05 12 10.41l6.36-6.36-1.41-1.41L12 7.59zM5.64 19.95l1.41 1.41L12 16.41l4.95 4.95 1.41-1.41L12 13.59l-6.36 6.36z" }, child: [] }] })(r);
+}
+function BiExpandVertical(r) {
+  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 24 24" }, child: [{ tag: "path", attr: { d: "m12 19.24-4.95-4.95-1.41 1.42L12 22.07l6.36-6.36-1.41-1.42L12 19.24zM5.64 8.29l1.41 1.42L12 4.76l4.95 4.95 1.41-1.42L12 1.93 5.64 8.29z" }, child: [] }] })(r);
+}
+const currentAddSelection = atom$1(null), Node = memo(({ node: r, style: h, dragHandle: g }) => {
+  var se;
+  const x = useBuilderProp("outlineMenuItems", []), { t: v } = useTranslation(), [S, , C] = useHiddenBlockIds(), [R] = useAtom$1(canvasIframeAtom);
+  let A = null;
+  const T = r.children.length > 0, { highlightBlock: _, clearHighlight: O } = useBlockHighlight(), { id: z, data: Z, isSelected: G, willReceiveDrop: q, isDragging: ee, isEditing: ge, handleClick: le } = r, ce = (me) => {
+    me.stopPropagation(), !S.includes(z) && r.toggle();
+  }, $ = (me) => {
+    me.isInternal && (A = me.isOpen, me.isOpen && me.close());
+  }, ie = (me) => {
+    me.isInternal && A !== null && (A ? me.open() : me.close(), A = null);
+  }, [he, Se] = useAtom$1(currentAddSelection), Me = () => {
+    var me;
+    W(), r.parent.isSelected || Se((me = r == null ? void 0 : r.parent) == null ? void 0 : me.id);
+  }, W = () => {
+    Se(null);
+  }, xe = (me) => {
+    W(), me.stopPropagation(), !r.isOpen && !S.includes(z) && r.toggle(), le(me);
+  };
+  useEffect(() => {
+    const me = setTimeout(() => {
+      q && !r.isOpen && !ee && !S.includes(z) && r.toggle();
+    }, 500);
+    return () => clearTimeout(me);
+  }, [q, r, ee]);
+  const ve = useMemo(() => {
+    const me = Object.keys(Z), V = [];
+    for (let ue = 0; ue < me.length; ue++)
+      if (me[ue].endsWith("_attrs")) {
+        const de = Z[me[ue]], Ae = Object.keys(de).join("|");
+        Ae.match(/x-data/) && V.push("data"), Ae.match(/x-on/) && V.push("event"), Ae.match(/x-show|x-if/) && V.push("show");
+      }
+    return V;
+  }, [Z]), ye = (me, V) => {
+    const ue = R.contentDocument || R.contentWindow.document, de = ue.querySelector(`[data-block-id=${me}]`);
+    de && de.setAttribute("data-drop", V);
+    const Ae = de.getBoundingClientRect(), Ee = R.getBoundingClientRect();
+    Ae.top >= Ee.top && Ae.left >= Ee.left && Ae.bottom <= Ee.bottom && Ae.right <= Ee.right || (ue.documentElement.scrollTop = de.offsetTop - Ee.top);
+  }, je = (me) => {
+    W();
+    const V = get(r, "parent.id");
+    V !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: V, position: me }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: me });
+  };
+  return z === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative w-full cursor-pointer", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        onMouseMove: R,
-        onMouseUp: () => A(),
-        className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10"
+        onClick: () => je(-1),
+        className: "h-1 rounded bg-purple-500 opacity-0 duration-200 group-hover:opacity-100",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform items-center gap-x-1 rounded-full bg-purple-500 px-3 py-1 text-[9px] leading-tight text-white hover:bg-purple-500", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-2 w-2 stroke-[3]" }),
+          " ",
+          v("Add block")
+        ] })
       }
-    ) : null,
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStylingProps, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(StylingHelpers, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Accordion, { defaultValue: ["Styles"], type: "multiple", className: "w-full", children: [
-        r && /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: FLEX_CHILD_SECTION, showAccordian: r || h }),
-        h && /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: GRID_CHILD_SECTION, showAccordian: r || h }),
-        SETTINGS_SECTIONS.map((T) => /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: T, showAccordian: r || h }, T.heading))
-      ] })
-    ] })
-  ] });
-}
-const ChaiSelect = ({
-  defaultValue: r = "",
-  onValueChange: h,
-  options: g,
-  placeholder: x = "Select",
-  className: v = ""
-}) => {
-  const [S, C] = useState(r), R = (A) => {
-    const T = A.target.value;
-    C(T), h(T);
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("relative inline-block w-full", v), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "select",
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContextMenu, { id: z, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
     {
-      className: "mt-1 flex w-full rounded-md border border-border bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-      value: S,
-      onChange: R,
+      onMouseEnter: () => _(z),
+      onMouseLeave: () => O(),
+      onClick: xe,
+      style: h,
+      "data-node-id": z,
+      ref: S.includes(z) ? null : g,
+      onDragStart: () => $(r),
+      onDragEnd: () => ie(r),
+      onDragOver: (me) => {
+        me.preventDefault(), ye(z, "yes");
+      },
+      onDragLeave: (me) => {
+        me.preventDefault(), ye(z, "no");
+      },
+      onDrop: (me) => {
+        me.preventDefault(), ye(z, "no");
+      },
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", disabled: !0, children: x }),
-        g.map((A) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: A.value, children: A.label }, A.value))
+        (r == null ? void 0 : r.rowIndex) > 0 && (r.parent.isOpen && canAddChildBlock(get(r, "parent.data._type")) || ((se = r == null ? void 0 : r.parent) == null ? void 0 : se.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            onClick: (me) => {
+              me.stopPropagation(), je(r.childIndex);
+            },
+            onMouseEnter: Me,
+            onMouseLeave: W,
+            className: "absolute -top-0.5 h-1 w-[90%] rounded bg-purple-500 opacity-0 delay-200 duration-200 group-hover:opacity-100",
+            children: /* @__PURE__ */ jsxRuntimeExports.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-purple-500 p-1 outline outline-2 outline-white hover:bg-purple-500", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-3 w-3 stroke-[4] text-white" }) })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: cn(
+              "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 text-foreground/80 outline-none",
+              G ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
+              q && canAcceptChildBlock(Z._type, "Icon") ? "bg-green-200" : "",
+              (r == null ? void 0 : r.id) === he ? "bg-purple-100" : "",
+              ee && "opacity-20",
+              S.includes(z) ? "opacity-50" : ""
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center transition-transform duration-100 ${r.isOpen ? "rotate-90" : ""}`,
+                    children: T && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: ce, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      ChevronRight,
+                      {
+                        className: `h-3 w-3 stroke-[3] ${G ? "text-slate-200" : "text-slate-400"}`
+                      }
+                    ) })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "leading-1 flex items-center", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TypeIcon, { type: Z == null ? void 0 : Z._type }),
+                  ge ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: r }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    "div",
+                    {
+                      className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
+                      onDoubleClick: (me) => {
+                        me.stopPropagation(), r.edit(), r.deselect();
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (Z == null ? void 0 : Z._name) || (Z == null ? void 0 : Z._type.split("/").pop()) }),
+                        ve.includes("data") && /* @__PURE__ */ jsxRuntimeExports.jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
+                        ve.includes("event") && /* @__PURE__ */ jsxRuntimeExports.jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
+                        ve.includes("show") && /* @__PURE__ */ jsxRuntimeExports.jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
+                      ]
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-2 group-hover:visible", children: [
+                !S.includes(z) && x.map((me) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    TooltipTrigger,
+                    {
+                      className: "cursor-pointer rounded bg-transparent hover:bg-white hover:text-blue-500",
+                      asChild: !0,
+                      children: React__default.createElement(me.item, { blockId: z })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: me.tooltip })
+                ] })),
+                canAddChildBlock(Z == null ? void 0 : Z._type) && !S.includes(z) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    TooltipTrigger,
+                    {
+                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: z }),
+                      className: "cursor-pointer rounded bg-transparent hover:text-black",
+                      asChild: !0,
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { size: "15" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-[9999]", side: "left", children: v("Add block") })
+                ] }) : null,
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    TooltipTrigger,
+                    {
+                      onClick: (me) => {
+                        me.stopPropagation(), C(z), r.isOpen && r.toggle();
+                      },
+                      className: "cursor-pointer rounded bg-transparent hover:text-black",
+                      asChild: !0,
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(EyeOff, { size: "15" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-[9999]", side: "left", children: v("Hide block") })
+                ] })
+              ] })
+            ]
+          }
+        )
       ]
     }
-  ) });
-};
-function UILibrariesSelect({
-  uiLibraries: r,
-  library: h,
-  setLibrary: g
-}) {
-  const { t: x } = useTranslation();
-  return h ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-12", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs font-bold text-gray-500", children: x("Choose library") }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ChaiSelect,
-      {
-        className: "mt-1",
-        options: r.map((v) => ({
-          value: v.uuid,
-          label: v.name
-        })),
-        defaultValue: h,
-        onValueChange: (v) => g(v)
-      }
-    )
-  ] }) : null;
-}
-const BlockCard = ({
-  block: r,
-  library: h,
-  parentId: g = void 0,
-  position: x = -1
-}) => {
-  const [v, S] = useState(!1), C = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: R, addPredefinedBlock: A } = useAddBlock(), [, T] = useSelectedBlockIds(), { clearHighlight: _ } = useBlockHighlight(), O = get(r, "name", get(r, "label")), z = useFeature("dnd"), [, Z] = useAtom$1(draggedBlockAtom), G = (ge) => {
-    const le = has(ge, "styles_attrs.data-page-section");
-    return ge._type === "Box" && le;
-  }, q = useCallback(
-    async (ge) => {
-      if (ge.stopPropagation(), has(r, "component")) {
-        R(r, g, x), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-        return;
+  ) }) });
+}), Input = ({ node: r }) => {
+  var h, g;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "input",
+    {
+      autoFocus: !0,
+      className: cn(
+        "ml-2 !h-4 w-full rounded-sm border border-border bg-background px-1 text-[11px] leading-tight outline-none",
+        r.isSelected ? "text-black dark:text-white" : ""
+      ),
+      type: "text",
+      defaultValue: ((h = r.data) == null ? void 0 : h._name) || ((g = r.data) == null ? void 0 : g._type),
+      onFocus: (x) => x.currentTarget.select(),
+      onBlur: (x) => r.submit(x.currentTarget.value),
+      onKeyDown: (x) => {
+        x.key === "Enter" && r.submit(x.currentTarget.value);
       }
-      S(!0);
-      const le = await C(h, r);
-      isEmpty(le) || A(syncBlocksWithDefaults(le), g, x), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-    },
-    [R, A, r, C, h, g, x]
-  ), ee = async (ge) => {
-    const le = await C(h, r);
-    let ce = g;
-    if (G(first(le)) && (ce = null), !isEmpty(le)) {
-      const $ = { blocks: le, uiLibrary: !0, parent: ce };
-      if (ge.dataTransfer.setData("text/plain", JSON.stringify($)), r.preview) {
-        const ie = new Image();
-        ie.src = r.preview, ie.onload = () => {
-          ge.dataTransfer.setDragImage(ie, 0, 0);
-        };
-      } else
-        ge.dataTransfer.setDragImage(new Image(), 0, 0);
-      Z($), setTimeout(() => {
-        T([]), _(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-      }, 200);
     }
+  );
+}, useCanMove = () => {
+  const [r] = useBlocksStore();
+  return (h, g) => {
+    var S;
+    const x = (S = find(r, { _id: g })) == null ? void 0 : S._type, v = first(h.map((C) => {
+      var R;
+      return (R = find(r, { _id: C })) == null ? void 0 : R._type;
+    }));
+    return canAcceptChildBlock(x, v);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+}, 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 = () => {
+    setIds([]), setStyleBlocks([]);
+  }, filteredTreeData = useMemo(() => {
+    const r = (g, x) => g.filter((v) => !x.includes(v._id)).map((v) => ({
+      ...v,
+      children: v.children ? r(v.children, x) : []
+    }));
+    return [...r(treeData, cutBlocksIds), { _type: ROOT_TEMP_KEY, _id: ROOT_TEMP_KEY, children: [] }];
+  }, [treeData, cutBlocksIds]), onRename = ({ id: r, name: h, node: g }) => {
+    updateBlockProps([r], { _name: h }, g.data._name);
+  }, onMove = ({ dragIds: r, parentId: h, index: g }) => {
+    canMove(r, h) && moveBlocks(r, h, g);
+  }, onSelect = (r) => {
+    if (r.length === 0) return;
+    const h = r[0] ? r[0].id : "";
+    setStyleBlocks([]), setIds([h]);
+  }, onContextMenu = (r) => {
+    var x;
+    r.preventDefault(), parentContext && setParentContext(null);
+    const h = r.target, g = h.getAttribute("data-node-id") || ((x = h.closest("[data-node-id]")) == null ? void 0 : x.getAttribute("data-node-id"));
+    g ? (setStyleBlocks([]), setIds([g])) : (setStyleBlocks([]), setIds([]), setParentContext({ x: r.clientX, y: r.clientY }));
+  }, debouncedDisableDrop = useDebouncedCallback(
+    ({ parentNode: r, dragNodes: h }) => {
+      var g;
+      return (r == null ? void 0 : r.data._type) === ROOT_TEMP_KEY || !canAcceptChildBlock(r == null ? void 0 : r.data._type, (g = h[0]) == null ? void 0 : g.data._type);
+    },
+    [],
+    300
+  ), handleKeyDown = (e) => {
+    if (!treeRef.current) return;
+    const tree = treeRef.current, selectedNode = tree.selectedNodes[0];
+    if (!selectedNode) return;
+    setIds[selectedNode.id], setStyleBlocks([]);
+    const isLeaf = !selectedNode.isInternal, isClosed = !selectedNode.isOpen, isOpen = selectedNode.isOpen, shortcut = defaultShortcuts.find((s) => s.key === e.key && (!s.when || eval(s.when)));
+    if (shortcut)
+      switch (e.preventDefault(), shortcut.command) {
+        case "selectNext":
+          selectNext(tree);
+          break;
+        case "selectPrev":
+          selectPrev(tree);
+          break;
+        case "selectParent":
+          selectParent(tree, isLeaf || isClosed);
+          break;
+        case "close":
+          close(tree, isOpen);
+          break;
+        case "open":
+          open(tree, isClosed);
+          break;
+        case "selectFirst":
+          selectFirst(tree);
+          break;
+        case "selectLast":
+          selectLast(tree);
+          break;
+      }
+  };
+  return useEffect(() => {
+    const r = () => {
+      treeRef.current && setTreeRef(treeRef.current);
+    };
+    r();
+    const h = new MutationObserver(r);
+    return h.observe(document.body, { childList: !0, subtree: !0 }), () => h.disconnect();
+  }, [setTreeRef]), isEmpty(treeData) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-10 flex h-full w-full items-center justify-center p-8 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mb-1.5 text-sm text-gray-400", children: [
+    t("This page is empty"),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK), variant: "default", size: "sm", children: [
+      "+ ",
+      t("Add Block")
+    ] })
+  ] }) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("flex h-full select-none flex-col space-y-1"), onClick: () => clearSelection(), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        onClick: v ? () => {
-        } : q,
-        draggable: z ? "true" : "false",
-        onDragStart: ee,
-        className: clsx(
-          "relative mt-2 cursor-pointer overflow-hidden rounded-md border border-border bg-white duration-200 hover:border-blue-500 hover:shadow-xl"
-        ),
+        id: "outline-view",
+        className: "no-scrollbar h-full overflow-y-auto text-sm",
+        onKeyDown: (r) => {
+          treeRef.current.isEditing || handleKeyDown(r);
+        },
         children: [
-          v && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute flex h-full w-full items-center justify-center bg-black/70", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { className: "animate-spin", size: 15, color: "white" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2 flex items-center justify-end gap-x-2 pb-2 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button,
+                {
+                  onClick: () => setHiddenBlocks([]),
+                  variant: "outline",
+                  className: "h-fit p-1 disabled:cursor-not-allowed disabled:opacity-50",
+                  size: "sm",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "h-4 w-4" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Show hidden blocks") })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { className: "h-fit p-1", onClick: () => {
+                var r;
+                return (r = treeRef == null ? void 0 : treeRef.current) == null ? void 0 : r.openAll();
+              }, variant: "outline", size: "sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx(BiExpandVertical, { size: "14" }) }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Expand all") })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { className: "h-fit p-1", onClick: () => {
+                var r;
+                return (r = treeRef == null ? void 0 : treeRef.current) == null ? void 0 : r.closeAll();
+              }, variant: "outline", size: "sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx(BiCollapseVertical, { size: "14" }) }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Collapse all") })
+            ] })
           ] }),
-          r.preview ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: r.preview, className: "min-h-[45px] w-full rounded-md", alt: O }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border bg-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: O }) })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: O }) })
-  ] });
-}, libraryBlocksAtom = atom$1(
-  {}
-), useLibraryBlocks = (r) => {
-  const [h, g] = useAtom$1(libraryBlocksAtom), x = useBuilderProp("getUILibraryBlocks", noop), v = get(h, `${r == null ? void 0 : r.uuid}.blocks`, null), S = get(h, `${r == null ? void 0 : r.uuid}.loading`, "idle"), C = useRef("idle");
-  return useEffect(() => {
-    (async () => {
-      if (S === "complete" || C.current === "loading") return;
-      C.current = "loading", g((A) => ({ ...A, [r == null ? void 0 : r.uuid]: { loading: "loading", blocks: [] } }));
-      const R = await x(r);
-      C.current = "idle", g((A) => ({ ...A, [r == null ? void 0 : r.uuid]: { loading: "complete", blocks: R || [] } }));
-    })();
-  }, [r, v, S, C, g, x]), { data: v || [], isLoading: S === "loading" };
-}, UILibrarySection = ({ parentId: r, position: h }) => {
-  const [g, x] = useAtom$1(selectedLibraryAtom), v = useBuilderProp("uiLibraries", []), S = useRegisteredChaiBlocks(), C = values(S).filter((ce) => ce.category === "custom"), R = v.find((ce) => ce.uuid === g) || first(v), { data: A, isLoading: T } = useLibraryBlocks(R), _ = groupBy([...A, ...C], "group"), [O, z] = useState("Hero"), Z = get(_, O, []), G = useRef(null), { t: q } = useTranslation(), ee = (ce) => {
-    G.current && (clearTimeout(G.current), G.current = null), G.current = setTimeout(() => {
-      G.current && z(ce);
-    }, 300);
-  };
-  if (T)
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 grid h-full w-full grid-cols-12 gap-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-3 h-full" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-9 h-full" })
-    ] });
-  const ge = filter(Z, (ce, $) => $ % 2 === 0), le = filter(Z, (ce, $) => $ % 2 === 1);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full pt-2", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesSelect, { library: R == null ? void 0 : R.uuid, setLibrary: x, uiLibraries: v }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: q("Groups") }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("hr", { className: "mt-1 border-border" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: React__default.Children.toArray(
-          map(_, (ce, $) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "group relative z-[9999] ml-5 w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
-              onMouseEnter: () => ee($),
-              onMouseLeave: () => clearTimeout(G.current),
-              onClick: () => z($),
-              className: cn(
-                "flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-sm text-foreground transition-all ease-in-out hover:bg-gray-200 dark:hover:bg-gray-800",
-                $ === O ? "bg-blue-500 text-white hover:bg-blue-600" : ""
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(q($.toLowerCase())) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
-              ]
-            },
-            $
-          ))
-        ) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      ScrollArea,
-      {
-        onMouseEnter: () => G.current ? clearTimeout(G.current) : null,
-        className: "z-10 -mt-2 flex h-full max-h-full w-full flex-col gap-2 border-l border-border transition-all ease-linear",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              ge.map((ce) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: r, position: h, block: ce, library: R }))
-            ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              le.map((ce) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: r, position: h, block: ce, library: R }))
-            ) })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
+              onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: 0 }),
+              className: "h-1 w-[90%] rounded bg-purple-500 opacity-0 duration-200 group-hover:opacity-100",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-[45%] top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-purple-500 p-1 outline outline-2 outline-white hover:bg-purple-500", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-3 w-3 stroke-[3] text-white" }) })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Tree,
+            {
+              ref: treeRef,
+              height: window.innerHeight - 160,
+              className: "no-scrollbar !h-full max-w-full space-y-1 !overflow-y-auto !overflow-x-hidden",
+              rowClassName: "flex items-center h-full border-b border-transparent",
+              selection: ids[0] || "",
+              onRename,
+              openByDefault: !1,
+              onMove,
+              data: [...filteredTreeData],
+              renderCursor: DefaultCursor,
+              onSelect,
+              childrenAccessor: (r) => r.children,
+              width: "100%",
+              rowHeight: 28,
+              renderDragPreview: DefaultDragPreview,
+              indent: 10,
+              onContextMenu,
+              disableDrop: debouncedDisableDrop,
+              idAccessor: "_id",
+              children: Node
+            }
+          )
         ]
       }
-    )
-  ] }) }) });
-}, UILibrariesPanel = ({ parentId: r, position: h }) => /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrarySection, { parentId: r, position: h }), Core = "Core", Import = "Import", Breakpoints$1 = "Breakpoints", Clear = "Clear", Cancel = "Cancel", Yes = "Yes", Preview = "Preview", Settings = "Settings", Styling = "Styling", Remove = "Remove", Choose = "Choose", Cut = "Cut", Copy = "Copy", Paste = "Paste", Delete = "Delete", classes = "classes", Theme = "Theme", Outline = "Outline", Copied = "Copied", Stop = "Stop", Edit = "Edit", Tag = "Tag", Value = "Value", Images = "Images", Library = "Library", Blocks = "Blocks", Basic = "Basic", Media = "Media", Advanced = "Advanced", Form = "Form", Groups = "Groups", Accordions = "Accordions", Buttons = "Buttons", Layouts = "Layouts", FAQ = "FAQ", Hero = "Hero", Features = "Features", Footer = "Footer", Navbar = "Navbar", Icons = "Icons", Testimonials = "Testimonials", Blog = "Blog", Saved = "Saved", Unsaved = "Unsaved", Randomize = "Randomize", theme_config = { heading_font: "Heading Font", body_font: "Body Font", rounded_corner: "Rounded Corners", primary: "Primary", secondary: "Secondary", background: "Background", text_color: "Text Color", background_dark_mode: "Background (Dark Mode)", text_color_dark_mode: "Text Color (Dark Mode)" }, web_blocks = { box: "box", tag: "Tag", div: "div", level: "Level", header: "header", footer: "footer", section: "section", article: "article", aside: "aside", main: "main", nav: "navigation", figure: "figure", details: "details", summary: "summary", dialog: "dialog", strike: "strike", caption: "caption", legend: "legend", figcaption: "figure caption", mark: "mark", background_image: "Background Image", label: "Label", default: "default", icon_size: "Icon Size", icon_position: "Icon Position", start: "Start", end: "End", button: "Button", custom_html: "Custom HTML", html_code: "HTML Code", default_snippet: "The HTML snippet goes here...", placeholder: "Enter custom HTML code here", custom_script: "Custom Script", dark_mode: "Dark Mode", divider: "Divider", empty_box: "Empty Box", heading: "Heading", image: "Image", alt: "Alt", width: "Width", height: "Height", video: "Video", span: "Span", content: "Content", icon: "Icon", richtext: "Rich Text", list: "List", list_type: "List Type", listitem: "List Item", link: "Link", list_item: "List Item", none: "None", disc: "Disc", number: "Number", paragraph: "Paragraph", lightbox_link: "Lightbox Link", href: "Link", type: "Type", iframe: "iframe", inline: "inline", ajax: "ajax", autoplay: "Video autoplay", max_width: "Max Width", backdrop_color: "Background Color", gallery_name: "Gallery Name", slot: "Slot", empty_slot: "Empty Slot", text: "Text", video_url: "Video URL", controls: "Show Controls", loop: "Loop", muted: "Muted", checkbox: "Checkbox", required: "Required", checked: "Checked", submit_button: "Submit Button", form: "Form", submit_url: "Submit URL", error_message: "Error Message", success_message: "Success Message", input: "Input", value: "Value", show_label: "Show Label", field_name: "Field Name", radio: "Radio", multiple: "Multiple", options: "Options", select: "Select", multiple_choice: "Multiple Choice", textarea: "Textarea", rows: "Rows" }, Undo = "Undo", Redo = "Redo", Duplicate = "Duplicate", Close = "Close", Selected = "Selected", Select = "Select", Attributes = "Attributes", apply = "apply", presets = "presets", Orientation = "Orientation", Color = "Color", Upload = "Upload", lngEn = {
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(PasteAtRootContextMenu, { parentContext, setParentContext })
+  ] });
+}, Core = "Core", Import = "Import", Breakpoints$1 = "Breakpoints", Clear = "Clear", Cancel = "Cancel", Yes = "Yes", Preview = "Preview", Settings = "Settings", Styling = "Styling", Remove = "Remove", Choose = "Choose", Cut = "Cut", Copy = "Copy", Paste = "Paste", Delete = "Delete", classes = "classes", Theme = "Theme", Outline = "Outline", Copied = "Copied", Stop = "Stop", Edit = "Edit", Tag = "Tag", Value = "Value", Images = "Images", Library = "Library", Blocks = "Blocks", Basic = "Basic", Media = "Media", Advanced = "Advanced", Form = "Form", Groups = "Groups", Accordions = "Accordions", Buttons = "Buttons", Layouts = "Layouts", FAQ = "FAQ", Hero = "Hero", Features = "Features", Footer = "Footer", Navbar = "Navbar", Icons = "Icons", Testimonials = "Testimonials", Blog = "Blog", Saved = "Saved", Unsaved = "Unsaved", Randomize = "Randomize", theme_config = { heading_font: "Heading Font", body_font: "Body Font", rounded_corner: "Rounded Corners", primary: "Primary", secondary: "Secondary", background: "Background", text_color: "Text Color", background_dark_mode: "Background (Dark Mode)", text_color_dark_mode: "Text Color (Dark Mode)" }, web_blocks = { box: "box", tag: "Tag", div: "div", level: "Level", header: "header", footer: "footer", section: "section", article: "article", aside: "aside", main: "main", nav: "navigation", figure: "figure", details: "details", summary: "summary", dialog: "dialog", strike: "strike", caption: "caption", legend: "legend", figcaption: "figure caption", mark: "mark", background_image: "Background Image", label: "Label", default: "default", icon_size: "Icon Size", icon_position: "Icon Position", start: "Start", end: "End", button: "Button", custom_html: "Custom HTML", html_code: "HTML Code", default_snippet: "The HTML snippet goes here...", placeholder: "Enter custom HTML code here", custom_script: "Custom Script", dark_mode: "Dark Mode", divider: "Divider", empty_box: "Empty Box", heading: "Heading", image: "Image", alt: "Alt", width: "Width", height: "Height", video: "Video", span: "Span", content: "Content", icon: "Icon", richtext: "Rich Text", list: "List", list_type: "List Type", listitem: "List Item", link: "Link", list_item: "List Item", none: "None", disc: "Disc", number: "Number", paragraph: "Paragraph", lightbox_link: "Lightbox Link", href: "Link", type: "Type", iframe: "iframe", inline: "inline", ajax: "ajax", autoplay: "Video autoplay", max_width: "Max Width", backdrop_color: "Background Color", gallery_name: "Gallery Name", slot: "Slot", empty_slot: "Empty Slot", text: "Text", video_url: "Video URL", controls: "Show Controls", loop: "Loop", muted: "Muted", checkbox: "Checkbox", required: "Required", checked: "Checked", submit_button: "Submit Button", form: "Form", submit_url: "Submit URL", error_message: "Error Message", success_message: "Success Message", input: "Input", value: "Value", show_label: "Show Label", field_name: "Field Name", radio: "Radio", multiple: "Multiple", options: "Options", select: "Select", multiple_choice: "Multiple Choice", textarea: "Textarea", rows: "Rows" }, Undo = "Undo", Redo = "Redo", Duplicate = "Duplicate", Close = "Close", Selected = "Selected", Select = "Select", Attributes = "Attributes", apply = "apply", presets = "presets", Orientation = "Orientation", Color = "Color", Upload = "Upload", lngEn = {
   "Add block": "Add Block",
   "Add blocks": "Add blocks",
   "Enter or paste TailwindCSS HTML snippet": "Enter or paste TailwindCSS HTML snippet",
@@ -32444,145 +32555,6 @@ i18n.use(initReactI18next).init({
     // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
   }
 });
-const CoreBlock = ({
-  block: r,
-  disabled: h,
-  parentId: g,
-  position: x
-}) => {
-  const [, v] = useAtom$1(draggedBlockAtom), { type: S, icon: C, label: R } = r, { addCoreBlock: A, addPredefinedBlock: T } = useAddBlock(), [, _] = useSelectedBlockIds(), { clearHighlight: O } = useBlockHighlight(), z = () => {
-    if (has(r, "blocks")) {
-      const q = isFunction$1(r.blocks) ? r.blocks() : r.blocks;
-      T(syncBlocksWithDefaults(q), g || null, x);
-    } else
-      A(r, g || null, x);
-    pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, Z = useFeature("dnd"), { t: G } = useTranslation();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        disabled: h,
-        onClick: z,
-        type: "button",
-        onDragStart: (q) => {
-          q.dataTransfer.setData("text/plain", JSON.stringify(omit(r, ["component", "icon"]))), q.dataTransfer.setDragImage(new Image(), 0, 0), v(omit(r, ["component", "icon"])), setTimeout(() => {
-            _([]), O();
-          }, 200);
-        },
-        draggable: Z ? "true" : "false",
-        className: "cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:bg-slate-800/50 dark:disabled:bg-gray-900 dark:disabled:text-foreground",
-        children: [
-          createElement(C || BoxIcon, { className: "w-4 h-4 mx-auto" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-xs", children: capitalize(G(R || S)) })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: G(R || S) }) })
-  ] }) });
-}, DefaultChaiBlocks = ({
-  parentId: r,
-  position: h,
-  gridCols: g = "grid-cols-2"
-}) => {
-  const x = useRegisteredChaiBlocks(), v = useBuilderProp("filterChaiBlock", () => !0), S = filter(x, v), C = groupBy(S, "category"), R = uniq(map(C.core, "group"));
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    ChaiBuilderBlocks,
-    {
-      gridCols: g,
-      parentId: r,
-      position: h,
-      groups: R,
-      blocks: C.core
-    }
-  );
-}, CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: r, blocks: h, parentId: g, position: x, gridCols: v = "grid-cols-4" }) => {
-  var A;
-  const { t: S } = useTranslation(), [C] = useBlocksStore(), R = (A = find(C, (T) => T._id === g)) == null ? void 0 : A._type;
-  return React__default.Children.toArray(
-    map(
-      sortBy(r, (T) => CORE_GROUPS.indexOf(T) === -1 ? 99 : CORE_GROUPS.indexOf(T)),
-      (T) => reject(filter(values(h), { group: T }), { hidden: !0 }).length ? /* @__PURE__ */ jsxRuntimeExports.jsx(Accordion, { type: "single", value: T, collapsible: !0, className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: T, className: "border-border", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { className: "rounded-md bg-background px-4 py-2 capitalize text-foreground hover:no-underline", children: capitalize(S(T.toLowerCase())) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContent, { className: "mx-auto max-w-xl p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-2 " + v, children: React__default.Children.toArray(
-          reject(filter(values(h), { group: T }), { hidden: !0 }).map((_) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-            CoreBlock,
-            {
-              parentId: g,
-              position: x,
-              block: _,
-              disabled: !canAcceptChildBlock(R, _.type) || !canBeNestedInside(R, _.type)
-            }
-          ))
-        ) }) })
-      ] }) }) : null
-    )
-  );
-}, addBlockTabAtom = atomWithStorage("__add_block_tab", "library"), AddBlocksPanel = ({
-  className: r,
-  showHeading: h = !0,
-  parentId: g = void 0,
-  position: x = -1
-}) => {
-  const { t: v } = useTranslation(), [S, C] = useAtom$1(addBlockTabAtom), [, R] = useAtom$1(showPredefinedBlockCategoryAtom), A = useBuilderProp("importHTMLSupport", !0), T = useBuilderProp("addBlocksDialogTabs", []), _ = useCallback(() => {
-    pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex h-full w-full flex-col overflow-hidden", r), children: [
-    h ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2 flex flex-col justify-between rounded-md bg-background/30 p-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "flex flex-col items-baseline px-1 text-xl font-semibold xl:flex-col", children: v("Add block") }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "p-0 text-xs font-light leading-3 opacity-80 xl:pl-1", children: v(S === "html" ? "Enter or paste TailwindCSS HTML snippet" : "Click to add block to page") })
-    ] }) : null,
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      Tabs,
-      {
-        onValueChange: (O) => {
-          R(""), C(O);
-        },
-        value: S,
-        className: "flex h-full max-h-full flex-col overflow-hidden",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { className: "flex w-full items-center", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "library", children: v("Library") }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "core", children: v("Blocks") }),
-            A ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "html", children: v("Import") }) : null,
-            map(T, (O) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: O.key, children: React__default.createElement(O.tab) }))
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "core", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "-mx-1.5 h-full max-h-full overflow-y-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DefaultChaiBlocks, { gridCols: "grid-cols-4", parentId: g, position: x }) }) }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesPanel, { parentId: g, position: x }) }),
-          A ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ImportHTML, { parentId: g, position: x }) }) : null,
-          map(T, (O) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: O.key, children: React__default.createElement(O.tabContent, { close: _, parentId: g, position: x }) }))
-        ]
-      }
-    )
-  ] });
-};
-function usePubSub(r, h) {
-  useEffect(() => {
-    const g = pubsub.subscribe(r, h);
-    return () => g();
-  }, [r, h]);
-}
-const AddBlocksDialog = () => {
-  const { t: r } = useTranslation(), [h, g] = useState(""), [x, v] = useState(-1), [S, C] = useState(!1);
-  return usePubSub(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, (R) => {
-    g(R ? R._id : null), v(isNaN(R == null ? void 0 : R.position) ? -1 : R == null ? void 0 : R.position), C(!0);
-  }), usePubSub(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK, () => {
-    g(""), v(-1), C(!1);
-  }), /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialog, { open: S, onOpenChange: () => S ? C(!1) : "", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogContent, { className: "max-w-5xl overflow-hidden border-border", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogHeader, { className: "flex flex-row items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogTitle, { className: "text-foreground", children: r("Add blocks") }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          onClick: () => C(!1),
-          className: "text-gray-500 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Cross2Icon, { className: "h-6 w-6" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar h-[500px] max-h-full overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AddBlocksPanel, { parentId: h, position: x, showHeading: !1 }) })
-  ] }) });
-};
 function FaFilePen(r) {
   return GenIcon({ tag: "svg", attr: { viewBox: "0 0 576 512" }, child: [{ tag: "path", attr: { d: "M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 125.7-86.8 86.8c-10.3 10.3-17.5 23.1-21 37.2l-18.7 74.9c-2.3 9.2-1.8 18.8 1.3 27.5L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zM549.8 235.7l14.4 14.4c15.6 15.6 15.6 40.9 0 56.6l-29.4 29.4-71-71 29.4-29.4c15.6-15.6 40.9-15.6 56.6 0zM311.9 417L441.1 287.8l71 71L382.9 487.9c-4.1 4.1-9.2 7-14.9 8.4l-60.1 15c-5.5 1.4-11.2-.2-15.2-4.2s-5.6-9.7-4.2-15.2l15-60.1c1.4-5.6 4.3-10.8 8.4-14.9z" }, child: [] }] })(r);
 }
@@ -32849,169 +32821,7 @@ const AIUserPrompt = ({ blockId: r }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(AISetContext, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(AIUserPrompt, { blockId: first(r) })
   ] });
-}, AttrsEditor = React__default.memo(function r({ preloadedAttributes: h = [], onAttributesChange: g }) {
-  const [x, v] = useState([]), [S, C] = useState(""), [R, A] = useState(""), [T, _] = useState(null), [O, z] = useState(""), Z = useRef(null), G = useRef(null);
-  useEffect(() => {
-    v(h);
-  }, [h]);
-  const q = () => {
-    if (S.startsWith("@")) {
-      z("Attribute keys cannot start with '@'");
-      return;
-    }
-    if (S) {
-      const $ = [...x, { key: S, value: R }];
-      g($), v(x), C(""), A(""), z("");
-    }
-  }, ee = ($) => {
-    const ie = x.filter((he, Se) => Se !== $);
-    g(ie), v(ie);
-  }, ge = ($) => {
-    _($), C(x[$].key), A(x[$].value);
-  }, le = () => {
-    if (S.startsWith("@")) {
-      z("Attribute keys cannot start with '@'");
-      return;
-    }
-    if (T !== null && S) {
-      const $ = [...x];
-      $[T] = { key: S, value: R }, g($), v($), _(null), C(""), A(""), z("");
-    }
-  }, ce = ($) => {
-    $.key === "Enter" && !$.shiftKey && ($.preventDefault(), T !== null ? le() : q());
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "form",
-      {
-        onSubmit: ($) => {
-          $.preventDefault(), T !== null ? le() : q();
-        },
-        className: "space-y-3",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-y-1", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "attrKey", className: "text-[11px] font-normal leading-tight text-slate-600", children: "Key" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Input$1,
-                {
-                  autoCapitalize: "off",
-                  autoCorrect: "off",
-                  spellCheck: "false",
-                  id: "attrKey",
-                  ref: Z,
-                  value: S,
-                  onChange: ($) => C($.target.value),
-                  placeholder: "Enter Key",
-                  className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "attrValue", className: "text-[11px] font-normal text-slate-600", children: "Value" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Textarea,
-                {
-                  autoCapitalize: "off",
-                  autoCorrect: "off",
-                  spellCheck: "false",
-                  id: "attrValue",
-                  rows: 2,
-                  ref: G,
-                  value: R,
-                  onChange: ($) => A($.target.value),
-                  onKeyDown: ce,
-                  placeholder: "Enter Value",
-                  className: "text-xs font-normal leading-tight placeholder:text-slate-400"
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "submit", disabled: !S.length, variant: "default", size: "sm", className: "h-8 w-24 text-xs", children: T !== null ? "Save" : "Add" }) }),
-          O && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-red-500", children: O })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 py-4", children: x.map(($, ie) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: $.key }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] font-normal", children: $.value.toString() })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => ge(ie), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Edit2, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => ee(ie), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }) })
-      ] })
-    ] }, ie)) })
-  ] });
-}), BlockAttributesEditor = React.memo(() => {
-  const r = useSelectedBlock(), [h, g] = useState([]), [x] = useSelectedStylingBlocks(), v = useUpdateBlocksProps(), S = `${get(x, "0.prop")}_attrs`;
-  React.useEffect(() => {
-    const R = map(get(r, S), (A, T) => ({ key: T, value: A }));
-    isEmpty(R) ? g([]) : g(R);
-  }, [get(r, S)]);
-  const C = React.useCallback(
-    (R = []) => {
-      const A = {};
-      forEach(R, (T) => {
-        isEmpty(T.key) || set(A, T.key, T.value);
-      }), v([get(r, "_id")], { [S]: A });
-    },
-    [r, v, S]
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-col gap-y-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AttrsEditor, { preloadedAttributes: h, onAttributesChange: C }) }) }) });
-});
-function getDNDSupport() {
-  return new URLSearchParams(window.location.search).has("dnd");
-}
-const FEATURE_TOGGLES = {
-  dnd: getDNDSupport()
-}, builderStore = getDefaultStore$1(), setDebugLogs = (r) => {
-}, getParentNodeIds = (r, h) => {
-  const g = [];
-  let x = find(r, { _id: h }), v = get(x, "_parent", "");
-  for (; isString(v) && !isEmpty(v); )
-    g.push(x == null ? void 0 : x._parent), x = find(r, { _id: v }), v = x == null ? void 0 : x._parent;
-  return flatten(g);
-}, expandedIdsAtom = atom$1([]), useExpandTree = () => {
-  const [r] = useSelectedBlockIds(), h = useAtomValue$1(presentBlocksAtom), [, g] = useAtom$1(expandedIdsAtom);
-  useEffect(() => {
-    let x = [];
-    const v = first(r);
-    isString(v) && (x = [v, ...getParentNodeIds(h, v)]), g(x);
-  }, [r, h, g]);
-}, UndoRedo = () => {
-  const { hasUndo: r, hasRedo: h, undo: g, redo: x } = useUndoManager();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { disabled: !r(), size: "sm", onClick: g, className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResetIcon, {}) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { disabled: !h(), onClick: x, size: "sm", className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResetIcon, { className: "rotate-180 scale-y-[-1] transform" }) })
-  ] });
-};
-function DarkMode() {
-  const [r, h] = useDarkMode();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SunIcon, { className: "size-4 shrink-0" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Switch,
-      {
-        id: "dark-mode-switch",
-        checked: r,
-        onCheckedChange: () => {
-          h(!r);
-        },
-        className: `${r ? "bg-violet-600" : "bg-violet-300"} relative ml-2 inline-flex h-[20px] w-[40px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: `${r ? "translate-x-5" : "translate-x-0"} pointer-events-none -mt-px inline-block h-[18px] w-[20px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(FaMoon, { className: "size-4 ml-3 shrink-0" })
-  ] });
-}
-const TabletIcon = ({ landscape: r = !1 }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+}, TabletIcon = ({ landscape: r = !1 }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
   "svg",
   {
     className: r ? "rotate-90" : "",
@@ -33119,7 +32929,66 @@ const TabletIcon = ({ landscape: r = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
       ] })
     ] })
   ] });
-}, ClearCanvas = () => {
+};
+function DarkMode() {
+  const [r, h] = useDarkMode();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SunIcon, { className: "size-4 shrink-0" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Switch,
+      {
+        id: "dark-mode-switch",
+        checked: r,
+        onCheckedChange: () => {
+          h(!r);
+        },
+        className: `${r ? "bg-violet-600" : "bg-violet-300"} relative ml-2 inline-flex h-[20px] w-[40px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: `${r ? "translate-x-5" : "translate-x-0"} pointer-events-none -mt-px inline-block h-[18px] w-[20px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(FaMoon, { className: "size-4 ml-3 shrink-0" })
+  ] });
+}
+const UndoRedo = () => {
+  const { hasUndo: r, hasRedo: h, undo: g, redo: x } = useUndoManager();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { disabled: !r(), size: "sm", onClick: g, className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResetIcon, {}) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { disabled: !h(), onClick: x, size: "sm", className: "rounded-full", variant: "ghost", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResetIcon, { className: "rotate-180 scale-y-[-1] transform" }) })
+  ] });
+};
+function getDNDSupport() {
+  return new URLSearchParams(window.location.search).has("dnd");
+}
+const FEATURE_TOGGLES = {
+  dnd: getDNDSupport()
+}, builderStore = getDefaultStore$1(), setDebugLogs = (r) => {
+}, getParentNodeIds = (r, h) => {
+  const g = [];
+  let x = find(r, { _id: h }), v = get(x, "_parent", "");
+  for (; isString(v) && !isEmpty(v); )
+    g.push(x == null ? void 0 : x._parent), x = find(r, { _id: v }), v = x == null ? void 0 : x._parent;
+  return flatten(g);
+}, expandedIdsAtom = atom$1([]), useExpandTree = () => {
+  const [r] = useSelectedBlockIds(), h = useAtomValue$1(presentBlocksAtom), [, g] = useAtom$1(expandedIdsAtom);
+  useEffect(() => {
+    let x = [];
+    const v = first(r);
+    isString(v) && (x = [v, ...getParentNodeIds(h, v)]), g(x);
+  }, [r, h, g]);
+};
+function usePubSub(r, h) {
+  useEffect(() => {
+    const g = pubsub.subscribe(r, h);
+    return () => g();
+  }, [r, h]);
+}
+const ClearCanvas = () => {
   const { t: r } = useTranslation(), { setNewBlocks: h } = useBlocksStoreUndoableActions(), [, g] = useSelectedBlockIds(), [, x] = useSelectedStylingBlocks(), v = useCallback(() => {
     h([]), g([]), x([]);
   }, [h]);
@@ -33185,7 +33054,117 @@ const TabletIcon = ({ landscape: r = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
       /* @__PURE__ */ jsxRuntimeExports.jsx(AiAssistant, {})
     ] })
   ] });
-};
+}, AttrsEditor = React__default.memo(function r({ preloadedAttributes: h = [], onAttributesChange: g }) {
+  const [x, v] = useState([]), [S, C] = useState(""), [R, A] = useState(""), [T, _] = useState(null), [O, z] = useState(""), Z = useRef(null), G = useRef(null);
+  useEffect(() => {
+    v(h);
+  }, [h]);
+  const q = () => {
+    if (S.startsWith("@")) {
+      z("Attribute keys cannot start with '@'");
+      return;
+    }
+    if (S) {
+      const $ = [...x, { key: S, value: R }];
+      g($), v(x), C(""), A(""), z("");
+    }
+  }, ee = ($) => {
+    const ie = x.filter((he, Se) => Se !== $);
+    g(ie), v(ie);
+  }, ge = ($) => {
+    _($), C(x[$].key), A(x[$].value);
+  }, le = () => {
+    if (S.startsWith("@")) {
+      z("Attribute keys cannot start with '@'");
+      return;
+    }
+    if (T !== null && S) {
+      const $ = [...x];
+      $[T] = { key: S, value: R }, g($), v($), _(null), C(""), A(""), z("");
+    }
+  }, ce = ($) => {
+    $.key === "Enter" && !$.shiftKey && ($.preventDefault(), T !== null ? le() : q());
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "form",
+      {
+        onSubmit: ($) => {
+          $.preventDefault(), T !== null ? le() : q();
+        },
+        className: "space-y-3",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-y-1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "attrKey", className: "text-[11px] font-normal leading-tight text-slate-600", children: "Key" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Input$1,
+                {
+                  autoCapitalize: "off",
+                  autoCorrect: "off",
+                  spellCheck: "false",
+                  id: "attrKey",
+                  ref: Z,
+                  value: S,
+                  onChange: ($) => C($.target.value),
+                  placeholder: "Enter Key",
+                  className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "attrValue", className: "text-[11px] font-normal text-slate-600", children: "Value" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Textarea,
+                {
+                  autoCapitalize: "off",
+                  autoCorrect: "off",
+                  spellCheck: "false",
+                  id: "attrValue",
+                  rows: 2,
+                  ref: G,
+                  value: R,
+                  onChange: ($) => A($.target.value),
+                  onKeyDown: ce,
+                  placeholder: "Enter Value",
+                  className: "text-xs font-normal leading-tight placeholder:text-slate-400"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "submit", disabled: !S.length, variant: "default", size: "sm", className: "h-8 w-24 text-xs", children: T !== null ? "Save" : "Add" }) }),
+          O && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-red-500", children: O })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 py-4", children: x.map(($, ie) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: $.key }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] font-normal", children: $.value.toString() })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => ge(ie), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Edit2, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => ee(ie), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }) })
+      ] })
+    ] }, ie)) })
+  ] });
+}), BlockAttributesEditor = React.memo(() => {
+  const r = useSelectedBlock(), [h, g] = useState([]), [x] = useSelectedStylingBlocks(), v = useUpdateBlocksProps(), S = `${get(x, "0.prop")}_attrs`;
+  React.useEffect(() => {
+    const R = map(get(r, S), (A, T) => ({ key: T, value: A }));
+    isEmpty(R) ? g([]) : g(R);
+  }, [get(r, S)]);
+  const C = React.useCallback(
+    (R = []) => {
+      const A = {};
+      forEach(R, (T) => {
+        isEmpty(T.key) || set(A, T.key, T.value);
+      }), v([get(r, "_id")], { [S]: A });
+    },
+    [r, v, S]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-col gap-y-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AttrsEditor, { preloadedAttributes: h, onAttributesChange: C }) }) }) });
+});
 function BlockAttributesToggle() {
   const { t: r } = useTranslation(), [h, g] = useState(!0), [x] = useSelectedStylingBlocks();
   return isEmpty(x) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -33233,6 +33212,26 @@ const SettingsPanel = () => {
       }
     )
   ] }) });
+}, AddBlocksDialog = () => {
+  const { t: r } = useTranslation(), [h, g] = useState(""), [x, v] = useState(-1), [S, C] = useState(!1);
+  return usePubSub(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, (R) => {
+    g(R ? R._id : null), v(isNaN(R == null ? void 0 : R.position) ? -1 : R == null ? void 0 : R.position), C(!0);
+  }), usePubSub(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK, () => {
+    g(""), v(-1), C(!1);
+  }), /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialog, { open: S, onOpenChange: () => S ? C(!1) : "", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogContent, { className: "max-w-5xl overflow-hidden border-border", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogHeader, { className: "flex flex-row items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogTitle, { className: "text-foreground", children: r("Add blocks") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: () => C(!1),
+          className: "text-gray-500 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Cross2Icon, { className: "h-6 w-6" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar h-[500px] max-h-full overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AddBlocksPanel, { parentId: h, position: x, showHeading: !1 }) })
+  ] }) });
 };
 function LayoutCard({ disabled: r = !1, description: h, title: g, selected: x, onSelect: v, children: S }) {
   const { t: C } = useTranslation();