@chaibuilder/sdk 2.0.5 → 2.0.6

package/dist/core.js

@@ -3,50 +3,50 @@ var K = (o, n, r) => n in o ? G(o, n, { enumerable: !0, configurable: !0, writab
 var V = (o, n, r) => K(o, typeof n != "symbol" ? n + "" : n, r);
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, useMemo, Component, Children, useState, useRef, Suspense, createElement, memo, lazy } from "react";
-import { O as DropdownMenu, P as DropdownMenuTrigger, Q as DropdownMenuContent, R as DropdownMenuItem, S as Skeleton, B as Button, a6 as Label, H as Dialog, I as DialogTrigger, J as DialogContent, a7 as Popover, ak as Tooltip, al as TooltipTrigger, a8 as PopoverTrigger, am as TooltipContent, a9 as PopoverContent, v as Command, x as CommandInput, y as CommandList, z as CommandEmpty, D as CommandGroup, E as CommandItem, K as DialogHeader, M as DialogTitle, n as Badge, V as DropdownMenuLabel, W as DropdownMenuSeparator, T as DropdownMenuCheckboxItem, a2 as HoverCard, a3 as HoverCardTrigger, a4 as HoverCardContent, aj as Textarea, a5 as Input$1, ao as TooltipPortal, a as AccordionItem, b as AccordionTrigger, d as AccordionContent, A as Accordion, C as Card, q as CardHeader, t as CardDescription, u as CardContent, r as CardFooter, aa as ScrollArea, af as Tabs, ag as TabsList, ah as TabsTrigger, ai as TabsContent, e as AlertDialog, f as AlertDialogTrigger, g as AlertDialogContent, h as AlertDialogHeader, j as AlertDialogTitle, k as AlertDialogDescription, i as AlertDialogFooter, m as AlertDialogCancel, l as AlertDialogAction, ae as Switch, ac as Separator, an as TooltipProvider, ad as Toaster } from "./tooltip-PKiP886L.js";
+import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, useMemo, Component, Children, useRef, useState, Suspense, createElement, memo, lazy } from "react";
+import { O as DropdownMenu, P as DropdownMenuTrigger, Q as DropdownMenuContent, R as DropdownMenuItem, S as Skeleton, B as Button, H as Dialog, I as DialogTrigger, J as DialogContent, a7 as Popover, ak as Tooltip, al as TooltipTrigger, a8 as PopoverTrigger, am as TooltipContent, a9 as PopoverContent, v as Command, x as CommandInput, y as CommandList, z as CommandEmpty, D as CommandGroup, E as CommandItem, K as DialogHeader, M as DialogTitle, n as Badge, V as DropdownMenuLabel, W as DropdownMenuSeparator, T as DropdownMenuCheckboxItem, a2 as HoverCard, a3 as HoverCardTrigger, a4 as HoverCardContent, aj as Textarea, a5 as Input$1, ao as TooltipPortal, a as AccordionItem, b as AccordionTrigger, d as AccordionContent, A as Accordion, C as Card, q as CardHeader, t as CardDescription, u as CardContent, a6 as Label, r as CardFooter, aa as ScrollArea, af as Tabs, ag as TabsList, ah as TabsTrigger, ai as TabsContent, e as AlertDialog, f as AlertDialogTrigger, g as AlertDialogContent, h as AlertDialogHeader, j as AlertDialogTitle, k as AlertDialogDescription, i as AlertDialogFooter, m as AlertDialogCancel, l as AlertDialogAction, ae as Switch, ac as Separator, an as TooltipProvider, ad as Toaster } from "./tooltip-PKiP886L.js";
 import { atom as atom$1, useAtomValue as useAtomValue$1, useAtom as useAtom$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
-import { find, filter, flatten, map, omit, isString, has, get, isObject, memoize, compact, isEmpty, noop, includes, without, each, first, keys, range, values, flattenDeep, set, startsWith, forEach, unset, chunk, cloneDeep, pick, isNull, findIndex, throttle, isFunction as isFunction$1, reverse, startCase, debounce, capitalize, split, take, toUpper, toLower, nth, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, uniq, flatMapDeep, some, reject, sortBy, round } from "lodash-es";
+import { find, filter, flatten, map, omit, isString, has, get, isObject, memoize, compact, isEmpty, noop, includes, without, each, first, keys, range, values, flattenDeep, set, startsWith, forEach, unset, chunk, cloneDeep, pick, isNull, findIndex, throttle, isFunction as isFunction$1, reverse, split, take, startCase, debounce, toUpper, toLower, nth, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, capitalize, groupBy, uniq, flatMapDeep, some, reject, sortBy, round } from "lodash-es";
 import { Provider as Provider$1 } from "react-wrap-balancer";
 import { useTranslation, initReactI18next } from "react-i18next";
 import { useTranslation as He } from "react-i18next";
 import { g as generateUUID, a as getBreakpointValue, c as cn$1 } from "./Functions-BGzDsf1z.js";
 import { flip } from "@floating-ui/dom";
 import { useFloating, shift } from "@floating-ui/react-dom";
-import { PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, Cross2Icon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, InfoCircledIcon, BoxIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretRightIcon, CardStackIcon, CardStackPlusIcon, ScissorsIcon, CheckIcon, SunIcon, ResetIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
+import { PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, Cross2Icon, InfoCircledIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, BoxIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretRightIcon, CardStackIcon, CardStackPlusIcon, ScissorsIcon, CheckIcon, 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 Ue } from "@chaibuilder/runtime";
 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 { toast } from "sonner";
 import { PlusIcon as PlusIcon$1, ChevronRight, DatabaseIcon, ChevronLeft, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Link as Link$1, Unlink, Maximize2, X, Plus, PlusCircle, ChevronDown, Loader, SparklesIcon, Globe, PencilIcon, FileJson, Zap, EyeOff, MoreVertical, Eye, ChevronsDown, ChevronsUp, Languages, FileEdit, Recycle, SmileIcon, ShuffleIcon, Moon, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
-import { useEditor, EditorContent } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import typography from "@tailwindcss/typography";
-import forms from "@tailwindcss/forms";
-import aspectRatio from "@tailwindcss/aspect-ratio";
-import containerQueries from "@tailwindcss/container-queries";
-import { twMerge } from "tailwind-merge";
-import { S as STYLES_KEY, g as getSplitChaiClasses, R as ROOT_TEMP_KEY } from "./getSplitClasses-DphwgQiE.js";
-import ReactDOM from "react-dom";
-import { ErrorBoundary } from "react-error-boundary";
-import { Resizable } from "re-resizable";
 import RjForm from "@rjsf/core";
 import validator from "@rjsf/validator-ajv8";
 import Link from "@tiptap/extension-link";
 import TextAlign from "@tiptap/extension-text-align";
 import Underline from "@tiptap/extension-underline";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
 import clsx$1, { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 import Autosuggest from "react-autosuggest";
+import { toast } from "sonner";
 import Fuse from "fuse.js";
+import { S as STYLES_KEY, g as getSplitChaiClasses, R as ROOT_TEMP_KEY } from "./getSplitClasses-DphwgQiE.js";
 import { parse, stringify } from "himalaya";
 import { Tree } from "react-arborist";
 import i18n from "i18next";
 import { default as ze } from "i18next";
+import { ErrorBoundary } from "react-error-boundary";
+import { useHotkeys } from "react-hotkeys-hook";
 import { motion } from "framer-motion";
+import TreeModel from "tree-model";
+import typography from "@tailwindcss/typography";
+import forms from "@tailwindcss/forms";
+import aspectRatio from "@tailwindcss/aspect-ratio";
+import containerQueries from "@tailwindcss/container-queries";
+import ReactDOM from "react-dom";
+import { Resizable } from "re-resizable";
 const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.write, isAtomStateInitialized = (o) => "v" in o || "e" in o, returnAtomValue = (o) => {
   if ("e" in o)
     throw o.e;
@@ -1458,6 +1458,22 @@ const useBlocksStoreManager = () => {
       });
     }
   };
+}, libraryBlocksAtom = atom$1(
+  {}
+), useLibraryBlocks = (o) => {
+  const [n, r] = useAtom$1(libraryBlocksAtom), a = useBuilderProp("getUILibraryBlocks", noop), l = get(n, `${o == null ? void 0 : o.id}.blocks`, null), i = get(n, `${o == null ? void 0 : o.id}.loading`, "idle"), c = useRef("idle");
+  useEffect(() => {
+    (async () => {
+      if (i === "complete" || c.current === "loading") return;
+      c.current = "loading", r((u) => ({ ...u, [o == null ? void 0 : o.id]: { loading: "loading", blocks: [] } }));
+      const p = await a(o);
+      c.current = "idle", r((u) => ({ ...u, [o == null ? void 0 : o.id]: { loading: "complete", blocks: p || [] } }));
+    })();
+  }, [o, l, i, c, r, a]);
+  const d = useCallback(() => {
+    r((p) => ({ ...p, [o == null ? void 0 : o.id]: { loading: "idle", blocks: [] } }));
+  }, [o, r]);
+  return { data: l || [], isLoading: i === "loading", resetLibrary: d };
 }, canAcceptChildBlock = (o, n) => {
   if (!o) return !0;
   const r = getRegisteredChaiBlock(o);
@@ -4105,227 +4121,7 @@ const getBlockRuntimeProps = memoize((o) => {
     o ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsx(Resizable, { enable: { top: !0, bottom: !1 }, className: "max-h-[400px] min-h-[200px]", children: /* @__PURE__ */ jsx(CodeEditor$1, {}) }) }) : null,
     /* @__PURE__ */ jsx(Breadcrumb, {})
   ] }) });
-}, FONTS = [
-  { title: "Roboto", value: "Roboto" },
-  { title: "Open Sans", value: "Open Sans" },
-  { title: "Montserrat", value: "Montserrat" },
-  { title: "Lato", value: "Lato" },
-  { title: "Poppins", value: "Poppins" },
-  { title: "Oswald", value: "Oswald" },
-  { title: "Raleway", value: "Raleway" },
-  { title: "Ubuntu", value: "Ubuntu" },
-  { title: "Nunito", value: "Nunito" },
-  { title: "Merriweather", value: "Merriweather" },
-  { title: "Nunito Sans", value: "Nunito Sans" },
-  { title: "Playfair Display", value: "Playfair Display" },
-  { title: "Rubik", value: "Rubik" },
-  { title: "Inter", value: "Inter" },
-  { title: "Lora", value: "Lora" },
-  { title: "Kanit", value: "Kanit" },
-  { title: "Fira Sans", value: "Fira Sans" },
-  { title: "Hind", value: "Hind" },
-  { title: "Quicksand", value: "Quicksand" },
-  { title: "Mulish", value: "Mulish" },
-  { title: "Barlow", value: "Barlow" },
-  { title: "Inconsolata", value: "Inconsolata" },
-  { title: "Titillium Web", value: "Titillium Web" },
-  { title: "Heebo", value: "Heebo" },
-  { title: "IBM Plex Sans", value: "IBM Plex Sans" },
-  { title: "DM Sans", value: "DM Sans" },
-  { title: "Nanum Gothic", value: "Nanum Gothic" },
-  { title: "Karla", value: "Karla" },
-  { title: "Arimo", value: "Arimo" },
-  { title: "Cabin", value: "Cabin" },
-  { title: "Oxygen", value: "Oxygen" },
-  { title: "Overpass", value: "Overpass" },
-  { title: "Assistant", value: "Assistant" },
-  { title: "Tajawal", value: "Tajawal" },
-  { title: "Play", value: "Play" },
-  { title: "Exo", value: "Exo" },
-  { title: "Cinzel", value: "Cinzel" },
-  { title: "Faustina", value: "Faustina" },
-  { title: "Philosopher", value: "Philosopher" },
-  { title: "Gelasio", value: "Gelasio" },
-  { title: "Sofia Sans Condensed", value: "Sofia Sans Condensed" },
-  { title: "Noto Sans Devanagari", value: "Noto Sans Devanagari" },
-  { title: "Actor", value: "Actor" },
-  { title: "Epilogue", value: "Epilogue" },
-  { title: "Glegoo", value: "Glegoo" },
-  { title: "Overlock", value: "Overlock" },
-  { title: "Lustria", value: "Lustria" },
-  { title: "Ovo", value: "Ovo" },
-  { title: "Suranna", value: "Suranna" },
-  { title: "Bebas Neue", value: "Bebas Neue" },
-  { title: "Manrope", value: "Manrope" }
-], FontSelector = ({
-  label: o,
-  value: n,
-  onChange: r
-}) => /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
-  /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: startCase(o) }),
-  /* @__PURE__ */ jsx(
-    "select",
-    {
-      className: "mt-1 w-full cursor-pointer rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-      value: n,
-      onChange: (a) => r(a.target.value),
-      children: FONTS.map((a) => /* @__PURE__ */ jsx("option", { value: a.value, children: a.title }, a.value))
-    }
-  )
-] }), ColorPickerInput = ({ value: o, onChange: n }) => {
-  const r = debounce((a) => n(a), 200);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "relative flex h-6 w-6 cursor-pointer rounded-lg border border-border",
-      style: { backgroundColor: o },
-      children: /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "color",
-          value: o.startsWith("#") ? o : "#000000",
-          onChange: (a) => {
-            const l = a.target.value;
-            /^#[0-9A-F]{6}$/i.test(l) && r(l);
-          },
-          className: "absolute inset-0 h-full w-full cursor-pointer rounded-lg border-0 opacity-0"
-        }
-      )
-    }
-  );
-}, BorderRadiusInput = ({ value: o, onChange: n, disabled: r }) => {
-  const a = debounce((l) => n(l), 200);
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      type: "range",
-      min: "0",
-      step: "1",
-      max: "30",
-      disabled: r,
-      defaultValue: o.replace("px", ""),
-      onChange: (l) => a(l.target.value),
-      className: "flex-1 cursor-pointer"
-    }
-  );
-}, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
-  const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), { hasPermission: c } = usePermissions(), [d, p] = useTheme(), u = useThemeOptions(), { t: g } = useTranslation(), m = (A) => {
-    a(A);
-  }, x = () => {
-    const A = l.find((B) => Object.keys(B)[0] === r);
-    if (A) {
-      const B = Object.values(A)[0];
-      B && typeof B == "object" && "fontFamily" in B && "borderRadius" in B && "colors" in B ? p(B) : console.error("Invalid preset structure:", B);
-    } else
-      console.error("Preset not found:", r);
-  }, f = useDebouncedCallback(
-    (A, B) => {
-      p(() => ({
-        ...d,
-        fontFamily: {
-          ...d.fontFamily,
-          [A.replace(/font-/g, "")]: B
-        }
-      }));
-    },
-    [d],
-    200
-  ), h = useDebouncedCallback(
-    (A) => {
-      p(() => ({
-        ...d,
-        borderRadius: `${A}px`
-      }));
-    },
-    [d],
-    200
-  ), b = useDebouncedCallback(
-    (A, B) => {
-      p(() => {
-        const C = get(d, `colors.${A}`);
-        return n ? set(C, 1, B) : set(C, 0, B), {
-          ...d,
-          colors: {
-            ...d.colors,
-            [A]: C
-          }
-        };
-      });
-    },
-    [d],
-    200
-  ), k = (A) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(A.items).map(([B]) => {
-    const C = get(d, `colors.${B}.${n ? 1 : 0}`);
-    return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
-      /* @__PURE__ */ jsx(
-        ColorPickerInput,
-        {
-          value: C,
-          onChange: (j) => b(B, j)
-        }
-      ),
-      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: B.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((j) => j.charAt(0).toUpperCase() + j.slice(1)).join(" ") + (!B.toLowerCase().includes("foreground") && !B.toLowerCase().includes("border") && !B.toLowerCase().includes("input") && !B.toLowerCase().includes("ring") && !B.toLowerCase().includes("background") ? " Background" : "") })
-    ] }, B);
-  }) });
-  return c("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
-    /* @__PURE__ */ jsxs("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto", o), children: [
-      l.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 py-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-          /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: g("Presets") }),
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              value: r,
-              onChange: (A) => m(A.target.value),
-              className: "w-full space-y-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "", children: "Select preset" }),
-                Array.isArray(l) && l.map((A) => /* @__PURE__ */ jsx("option", { value: Object.keys(A)[0], children: capitalize(Object.keys(A)[0]) }, Object.keys(A)[0]))
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex w-[30%] items-end", children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            className: "w-full text-sm",
-            disabled: r === "",
-            variant: "default",
-            onClick: x,
-            children: g("Apply")
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", o), children: [
-        (u == null ? void 0 : u.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(u.fontFamily).map(([A, B]) => /* @__PURE__ */ jsx(
-          FontSelector,
-          {
-            label: A,
-            value: d.fontFamily[A.replace(/font-/g, "")] || B[Object.keys(B)[0]],
-            onChange: (C) => f(A, C)
-          },
-          A
-        )) }),
-        (u == null ? void 0 : u.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 py-3", children: [
-          /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: g("Border Radius") }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 py-2", children: [
-            /* @__PURE__ */ jsx(BorderRadiusInput, { value: d.borderRadius, onChange: h }),
-            /* @__PURE__ */ jsx("span", { className: "w-12 text-sm", children: d.borderRadius })
-          ] })
-        ] }),
-        (u == null ? void 0 : u.colors) && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-0.5", children: [
-          /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: g("Colors") }),
-          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: u.colors.map((A) => k(A)) }, n ? "dark" : "light")
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("br", {}),
-      /* @__PURE__ */ jsx("br", {}),
-      /* @__PURE__ */ jsx("br", {}),
-      /* @__PURE__ */ jsx("br", {})
-    ] }),
-    i && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 w-full", children: React.createElement(i) })
-  ] }) : /* @__PURE__ */ jsx("div", { className: "relative w-full", children: /* @__PURE__ */ jsx("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto text-center", o), children: /* @__PURE__ */ jsx("div", { className: "mt-10 h-full items-center justify-center gap-2 text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "You don't have permission to edit the theme. Please contact your administrator to get access." }) }) }) });
-}), removeSizeAttributes = (o) => {
+}, removeSizeAttributes = (o) => {
   try {
     return o.replace(/<svg([^>]*)\sheight="[^"]*"([^>]*)>/gi, "<svg$1$2>").replace(/<svg([^>]*)\swidth="[^"]*"([^>]*)>/gi, "<svg$1$2>");
   } catch {
@@ -5859,7 +5655,129 @@ const BlockStylingProps = () => {
     )) }),
     /* @__PURE__ */ jsx("div", { className: "my-2 h-[1px] w-full bg-border" })
   ] });
-}, EDITOR_ICONS = {
+}, StyleContext = createContext({ canReset: !1, canChange: !0 }), BlockStyleProvider = ({ children: o, canReset: n = !1, canChange: r = !0 }) => (
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
+  /* @__PURE__ */ jsx(StyleContext.Provider, { value: { canReset: n, canChange: r }, children: o })
+), DropDownChoices = ({ label: o, property: n, onChange: r }) => {
+  const { getClasses: a } = useTailwindClassList(), l = a(n), i = useCurrentClassByProperty(n), c = useMemo(() => get(i, "cls", ""), [i]), { canChange: d } = useContext(StyleContext), p = /\[.*\]/g.test(c);
+  return /* @__PURE__ */ jsx("div", { className: o ? "w-full rounded" : "grow", children: p ? /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ jsx(Input$1, { className: "w-[70%] rounded py-1", readOnly: !0, value: c }),
+    /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsx(InfoCircledIcon, {}) }) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: "Current value is using a Tailwind arbitrary value." })
+    ] })
+  ] }) : /* @__PURE__ */ jsx(
+    DropDown,
+    {
+      rounded: o,
+      onChange: (u) => r(u, n),
+      selected: c,
+      options: l,
+      disabled: !d
+    }
+  ) });
+};
+function DropDown({ selected: o, onChange: n, rounded: r = !1, options: a, disabled: l = !1 }) {
+  const i = o.replace(/.*:/g, "").trim(), { undo: c, redo: d } = useUndoManager();
+  return /* @__PURE__ */ jsxs(
+    "select",
+    {
+      disabled: !a.length || l,
+      className: `${r ? "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: (p) => n(p.target.value),
+      onKeyDown: (p) => {
+        p.ctrlKey && (p.key === "z" && c(), p.key === "y" && d());
+      },
+      value: i,
+      children: [
+        /* @__PURE__ */ jsx("option", { className: "bg-transparent", value: "" }),
+        a.map((p, u) => /* @__PURE__ */ jsx("option", { className: "bg-transparent", value: p, children: p }, `option-${u}`))
+      ]
+    }
+  );
+}
+const 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: o, onChange: n }) => {
+  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), m = get(u, "2", ""), x = useCallback(
+    // eslint-disable-next-line no-shadow
+    (b) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(b) ? (c([]), p({ color: b })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((k) => ({ ...k, color: b, shade: k.shade ? k.shade : "500" })));
+    },
+    [c, p]
+  );
+  useEffect(() => {
+    if (["current", "inherit", "transparent", "black", "white"].includes(g))
+      return c([]);
+    c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
+  }, [g]);
+  const f = useCallback(
+    // eslint-disable-next-line no-shadow
+    (b) => {
+      p({ color: g, shade: b });
+    },
+    [g]
+  );
+  useEffect(() => {
+    p({ color: "", shade: "" });
+  }, [r]);
+  const { match: h } = useTailwindClassList();
+  return useEffect(() => {
+    const k = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
+    h(o, k) && n(k, o);
+  }, [h, d, n, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
+    /* @__PURE__ */ jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsx(
+      DropDown,
+      {
+        disabled: !l,
+        rounded: !0,
+        selected: g,
+        onChange: x,
+        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__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: m, disabled: !g || !l, onChange: f, options: i }) })
+  ] });
+}, EDITOR_ICONS = {
   "not-italic": () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 3H11V5H9V11H11V13H5V11H7V5H5V3H9Z", fill: "white" }) }),
   // visibility
   visible: EyeOpenIcon,
@@ -6053,130 +5971,6 @@ const BlockStylingProps = () => {
     )
   ] }),
   static: Cross1Icon
-}, StyleContext = createContext({ canReset: !1, canChange: !0 }), BlockStyleProvider = ({ children: o, canReset: n = !1, canChange: r = !0 }) => (
-  // eslint-disable-next-line react/jsx-no-constructed-context-values
-  /* @__PURE__ */ jsx(StyleContext.Provider, { value: { canReset: n, canChange: r }, children: o })
-), DropDownChoices = ({ label: o, property: n, onChange: r }) => {
-  const { getClasses: a } = useTailwindClassList(), l = a(n), i = useCurrentClassByProperty(n), c = useMemo(() => get(i, "cls", ""), [i]), { canChange: d } = useContext(StyleContext), p = /\[.*\]/g.test(c);
-  return /* @__PURE__ */ jsx("div", { className: o ? "w-full rounded" : "grow", children: p ? /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ jsx(Input$1, { className: "w-[70%] rounded py-1", readOnly: !0, value: c }),
-    /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsx(InfoCircledIcon, {}) }) }),
-      /* @__PURE__ */ jsx(TooltipContent, { children: "Current value is using a Tailwind arbitrary value." })
-    ] })
-  ] }) : /* @__PURE__ */ jsx(
-    DropDown,
-    {
-      rounded: o,
-      onChange: (u) => r(u, n),
-      selected: c,
-      options: l,
-      disabled: !d
-    }
-  ) });
-};
-function DropDown({ selected: o, onChange: n, rounded: r = !1, options: a, disabled: l = !1 }) {
-  const i = o.replace(/.*:/g, "").trim(), { undo: c, redo: d } = useUndoManager();
-  return /* @__PURE__ */ jsxs(
-    "select",
-    {
-      disabled: !a.length || l,
-      className: `${r ? "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: (p) => n(p.target.value),
-      onKeyDown: (p) => {
-        p.ctrlKey && (p.key === "z" && c(), p.key === "y" && d());
-      },
-      value: i,
-      children: [
-        /* @__PURE__ */ jsx("option", { className: "bg-transparent", value: "" }),
-        React__default.Children.toArray(
-          a.map((p) => /* @__PURE__ */ jsx("option", { className: "bg-transparent", value: p, children: p }))
-        )
-      ]
-    }
-  );
-}
-const 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: o, onChange: n }) => {
-  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), m = get(u, "2", ""), x = useCallback(
-    // eslint-disable-next-line no-shadow
-    (b) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(b) ? (c([]), p({ color: b })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((k) => ({ ...k, color: b, shade: k.shade ? k.shade : "500" })));
-    },
-    [c, p]
-  );
-  useEffect(() => {
-    if (["current", "inherit", "transparent", "black", "white"].includes(g))
-      return c([]);
-    c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
-  }, [g]);
-  const f = useCallback(
-    // eslint-disable-next-line no-shadow
-    (b) => {
-      p({ color: g, shade: b });
-    },
-    [g]
-  );
-  useEffect(() => {
-    p({ color: "", shade: "" });
-  }, [r]);
-  const { match: h } = useTailwindClassList();
-  return useEffect(() => {
-    const k = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    h(o, k) && n(k, o);
-  }, [h, d, n, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
-    /* @__PURE__ */ jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsx(
-      DropDown,
-      {
-        disabled: !l,
-        rounded: !0,
-        selected: g,
-        onChange: x,
-        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__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: m, disabled: !g || !l, onChange: f, options: i }) })
-  ] });
 }, IconChoices = ({ property: o, onChange: n }) => {
   const { getClasses: r } = useTailwindClassList(), a = r(o), { canChange: l } = useContext(StyleContext), i = useCurrentClassByProperty(o), c = useMemo(() => get(i, "cls", ""), [i]);
   return /* @__PURE__ */ jsx("div", { className: "flex grow flex-wrap gap-1", children: map(a, (d) => /* @__PURE__ */ jsxs(Tooltip, { children: [
@@ -6700,25 +6494,23 @@ const COLOR_PROP = {
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-xs", children: [
           o && /* @__PURE__ */ jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
-          /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: React__default.Children.toArray(
-            n.map(({ label: x, key: f }) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => u(f),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${f === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
-                  children: [
-                    React__default.createElement("div", {
-                      className: m(f) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
-                    }),
-                    React__default.createElement(get(EDITOR_ICONS, f, BoxIcon), { className: "text-inherit w-3 h-3" })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(x)) })
-            ] }) }))
-          ) })
+          /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: n.map(({ label: x, key: f }, h) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => u(f),
+                className: `relative cursor-pointer rounded-full p-1 text-[8px] ${f === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                children: [
+                  React__default.createElement("div", {
+                    className: m(f) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                  }),
+                  React__default.createElement(get(EDITOR_ICONS, f, BoxIcon), { className: "text-inherit w-3 h-3" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(x)) })
+          ] }) }, `option-${h}`)) })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ jsx(
           BlockStyle,
@@ -6772,12 +6564,8 @@ const COLOR_PROP = {
   ), i = useMemo(() => ({}), []);
   return /* @__PURE__ */ jsx(SectionContext.Provider, { value: i, children: n ? /* @__PURE__ */ jsxs(AccordionItem, { value: o.heading, className: "border-none", children: [
     /* @__PURE__ */ jsx(AccordionTrigger, { className: "border-slate-150 border-t py-2 text-xs", children: /* @__PURE__ */ jsx("div", { className: "flex items-center py-2", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-2 text-xs font-medium", children: startCase(r(o.heading)) }) }) }),
-    /* @__PURE__ */ jsx(AccordionContent, { className: "py-2", children: React__default.Children.toArray(
-      o.items.map((c) => has(c, "component") ? React__default.createElement(c.component, { key: c.label }) : has(c, "styleType") ? c.styleType === "multiple" ? /* @__PURE__ */ jsx(MultipleChoices, { ...c }, c.label) : c.styleType === "accordion" && l(c == null ? void 0 : c.conditions) ? /* @__PURE__ */ jsx(NestedOptions, { ...c }, c.label) : null : /* @__PURE__ */ jsx(BlockStyle, { ...c }, c.label))
-    ) })
-  ] }) : /* @__PURE__ */ jsx("div", { className: "py-2", children: React__default.Children.toArray(
-    o.items.map((c) => has(c, "component") ? React__default.createElement(c.component, { key: c.label }) : has(c, "styleType") ? c.styleType === "multiple" ? /* @__PURE__ */ jsx(MultipleChoices, { ...c }, c.label) : c.styleType === "accordion" && l(c == null ? void 0 : c.conditions) ? /* @__PURE__ */ jsx(NestedOptions, { ...c }, c.label) : null : /* @__PURE__ */ jsx(BlockStyle, { ...c }, c.label))
-  ) }) });
+    /* @__PURE__ */ jsx(AccordionContent, { className: "py-2", children: o.items.map((c) => has(c, "component") ? React__default.createElement(c.component, { key: c.label }) : has(c, "styleType") ? c.styleType === "multiple" ? /* @__PURE__ */ jsx(MultipleChoices, { ...c }, c.label) : c.styleType === "accordion" && l(c == null ? void 0 : c.conditions) ? /* @__PURE__ */ jsx(NestedOptions, { ...c }, c.label) : null : /* @__PURE__ */ jsx(BlockStyle, { ...c }, c.label)) })
+  ] }) : /* @__PURE__ */ jsx("div", { className: "py-2", children: o.items.map((c) => has(c, "component") ? React__default.createElement(c.component, { key: c.label }) : has(c, "styleType") ? c.styleType === "multiple" ? /* @__PURE__ */ jsx(MultipleChoices, { ...c }, c.label) : c.styleType === "accordion" && l(c == null ? void 0 : c.conditions) ? /* @__PURE__ */ jsx(NestedOptions, { ...c }, c.label) : null : /* @__PURE__ */ jsx(BlockStyle, { ...c }, c.label)) }) });
 }, MAPPER = {
   px: 1,
   "%": 1,
@@ -7363,21 +7151,19 @@ const CHAI_BUILDER_EVENTS = {
         '"'
       ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: L.map((y) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(y.toLowerCase())) }),
-        /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: React__default.Children.toArray(
-          reject(
-            x === "all" ? filter(values(w), { group: y }) : values(w),
-            { hidden: !0 }
-          ).map((E) => /* @__PURE__ */ jsx(
-            CoreBlock,
-            {
-              parentId: r,
-              position: a,
-              block: E,
-              disabled: !canAcceptChildBlock(m, E.type) || !canBeNestedInside(m, E.type)
-            },
-            E.type
-          ))
-        ) })
+        /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: reject(
+          x === "all" ? filter(values(w), { group: y }) : values(w),
+          { hidden: !0 }
+        ).map((E) => /* @__PURE__ */ jsx(
+          CoreBlock,
+          {
+            parentId: r,
+            position: a,
+            block: E,
+            disabled: !canAcceptChildBlock(m, E.type) || !canBeNestedInside(m, E.type)
+          },
+          E.type
+        )) })
       ] }, y)) }) }) })
     ] })
   ] });
@@ -7461,7 +7247,7 @@ function UILibrariesSelect({
       {
         className: "mt-1",
         options: o.map((l) => ({
-          value: l.uuid,
+          value: l.id,
           label: l.name
         })),
         defaultValue: n,
@@ -7529,20 +7315,8 @@ const BlockCard = ({
     ) }),
     /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: m }) })
   ] });
-}, libraryBlocksAtom = atom$1(
-  {}
-), useLibraryBlocks = (o) => {
-  const [n, r] = useAtom$1(libraryBlocksAtom), a = useBuilderProp("getUILibraryBlocks", noop), l = get(n, `${o == null ? void 0 : o.uuid}.blocks`, null), i = get(n, `${o == null ? void 0 : o.uuid}.loading`, "idle"), c = useRef("idle");
-  return useEffect(() => {
-    (async () => {
-      if (i === "complete" || c.current === "loading") return;
-      c.current = "loading", r((p) => ({ ...p, [o == null ? void 0 : o.uuid]: { loading: "loading", blocks: [] } }));
-      const d = await a(o);
-      c.current = "idle", r((p) => ({ ...p, [o == null ? void 0 : o.uuid]: { loading: "complete", blocks: d || [] } }));
-    })();
-  }, [o, l, i, c, r, a]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o, position: n }) => {
-  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((C) => C.category === "custom"), d = l.find((C) => C.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), g = groupBy([...p, ...c], "group"), [m, x] = useState("Hero"), f = get(g, m, []), h = useRef(null), { t: b } = useTranslation(), k = (C) => {
+  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((C) => C.category === "custom"), d = l.find((C) => C.id === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), g = groupBy([...p, ...c], "group"), [m, x] = useState("Hero"), f = get(g, m, []), h = useRef(null), { t: b } = useTranslation(), k = (C) => {
     h.current && (clearTimeout(h.current), h.current = null), h.current = setTimeout(() => {
       h.current && x(C);
     }, 300);
@@ -7555,29 +7329,27 @@ const BlockCard = ({
   const A = filter(f, (C, j) => j % 2 === 0), B = filter(f, (C, j) => j % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
-      /* @__PURE__ */ jsx(UILibrariesSelect, { library: d == null ? void 0 : d.uuid, setLibrary: a, uiLibraries: l }),
+      /* @__PURE__ */ jsx(UILibrariesSelect, { library: d == null ? void 0 : d.id, setLibrary: a, uiLibraries: l }),
       /* @__PURE__ */ jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
         /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: b("Groups") }),
         /* @__PURE__ */ jsx("hr", { className: "mt-1 border-border" }),
-        /* @__PURE__ */ 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(g, (C, j) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              onMouseEnter: () => k(j),
-              onMouseLeave: () => clearTimeout(h.current),
-              onClick: () => x(j),
-              className: cn$1(
-                "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",
-                j === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
-              ),
-              children: [
-                /* @__PURE__ */ jsx("span", { children: capitalize(b(j.toLowerCase())) }),
-                /* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
-              ]
-            },
-            j
-          ))
-        ) })
+        /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: map(g, (C, j) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onMouseEnter: () => k(j),
+            onMouseLeave: () => clearTimeout(h.current),
+            onClick: () => x(j),
+            className: cn$1(
+              "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",
+              j === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { children: capitalize(b(j.toLowerCase())) }),
+              /* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
+            ]
+          },
+          j
+        )) })
       ] })
     ] }),
     /* @__PURE__ */ jsxs(
@@ -7587,12 +7359,26 @@ const BlockCard = ({
         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__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              A.map((C) => /* @__PURE__ */ jsx(BlockCard, { parentId: o, position: n, block: C, library: d }))
-            ) }),
-            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              B.map((C) => /* @__PURE__ */ jsx(BlockCard, { parentId: o, position: n, block: C, library: d }))
-            ) })
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: A.map((C, j) => /* @__PURE__ */ jsx(
+              BlockCard,
+              {
+                parentId: o,
+                position: n,
+                block: C,
+                library: d
+              },
+              `block-${j}`
+            )) }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: B.map((C, j) => /* @__PURE__ */ jsx(
+              BlockCard,
+              {
+                parentId: o,
+                position: n,
+                block: C,
+                library: d
+              },
+              `block-${j}`
+            )) })
           ] }),
           /* @__PURE__ */ jsx("br", {}),
           /* @__PURE__ */ jsx("br", {}),
@@ -8199,7 +7985,227 @@ const selectParent = (o, n) => {
     ) }),
     /* @__PURE__ */ jsx(PasteAtRootContextMenu, { parentContext, setParentContext })
   ] });
-}, Core = "Core", Import = "Import", Breakpoints = "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 = {
+}, FONTS = [
+  { title: "Roboto", value: "Roboto" },
+  { title: "Open Sans", value: "Open Sans" },
+  { title: "Montserrat", value: "Montserrat" },
+  { title: "Lato", value: "Lato" },
+  { title: "Poppins", value: "Poppins" },
+  { title: "Oswald", value: "Oswald" },
+  { title: "Raleway", value: "Raleway" },
+  { title: "Ubuntu", value: "Ubuntu" },
+  { title: "Nunito", value: "Nunito" },
+  { title: "Merriweather", value: "Merriweather" },
+  { title: "Nunito Sans", value: "Nunito Sans" },
+  { title: "Playfair Display", value: "Playfair Display" },
+  { title: "Rubik", value: "Rubik" },
+  { title: "Inter", value: "Inter" },
+  { title: "Lora", value: "Lora" },
+  { title: "Kanit", value: "Kanit" },
+  { title: "Fira Sans", value: "Fira Sans" },
+  { title: "Hind", value: "Hind" },
+  { title: "Quicksand", value: "Quicksand" },
+  { title: "Mulish", value: "Mulish" },
+  { title: "Barlow", value: "Barlow" },
+  { title: "Inconsolata", value: "Inconsolata" },
+  { title: "Titillium Web", value: "Titillium Web" },
+  { title: "Heebo", value: "Heebo" },
+  { title: "IBM Plex Sans", value: "IBM Plex Sans" },
+  { title: "DM Sans", value: "DM Sans" },
+  { title: "Nanum Gothic", value: "Nanum Gothic" },
+  { title: "Karla", value: "Karla" },
+  { title: "Arimo", value: "Arimo" },
+  { title: "Cabin", value: "Cabin" },
+  { title: "Oxygen", value: "Oxygen" },
+  { title: "Overpass", value: "Overpass" },
+  { title: "Assistant", value: "Assistant" },
+  { title: "Tajawal", value: "Tajawal" },
+  { title: "Play", value: "Play" },
+  { title: "Exo", value: "Exo" },
+  { title: "Cinzel", value: "Cinzel" },
+  { title: "Faustina", value: "Faustina" },
+  { title: "Philosopher", value: "Philosopher" },
+  { title: "Gelasio", value: "Gelasio" },
+  { title: "Sofia Sans Condensed", value: "Sofia Sans Condensed" },
+  { title: "Noto Sans Devanagari", value: "Noto Sans Devanagari" },
+  { title: "Actor", value: "Actor" },
+  { title: "Epilogue", value: "Epilogue" },
+  { title: "Glegoo", value: "Glegoo" },
+  { title: "Overlock", value: "Overlock" },
+  { title: "Lustria", value: "Lustria" },
+  { title: "Ovo", value: "Ovo" },
+  { title: "Suranna", value: "Suranna" },
+  { title: "Bebas Neue", value: "Bebas Neue" },
+  { title: "Manrope", value: "Manrope" }
+], FontSelector = ({
+  label: o,
+  value: n,
+  onChange: r
+}) => /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+  /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: startCase(o) }),
+  /* @__PURE__ */ jsx(
+    "select",
+    {
+      className: "mt-1 w-full cursor-pointer rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+      value: n,
+      onChange: (a) => r(a.target.value),
+      children: FONTS.map((a) => /* @__PURE__ */ jsx("option", { value: a.value, children: a.title }, a.value))
+    }
+  )
+] }), ColorPickerInput = ({ value: o, onChange: n }) => {
+  const r = debounce((a) => n(a), 200);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "relative flex h-6 w-6 cursor-pointer rounded-lg border border-border",
+      style: { backgroundColor: o },
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "color",
+          value: o.startsWith("#") ? o : "#000000",
+          onChange: (a) => {
+            const l = a.target.value;
+            /^#[0-9A-F]{6}$/i.test(l) && r(l);
+          },
+          className: "absolute inset-0 h-full w-full cursor-pointer rounded-lg border-0 opacity-0"
+        }
+      )
+    }
+  );
+}, BorderRadiusInput = ({ value: o, onChange: n, disabled: r }) => {
+  const a = debounce((l) => n(l), 200);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "range",
+      min: "0",
+      step: "1",
+      max: "30",
+      disabled: r,
+      defaultValue: o.replace("px", ""),
+      onChange: (l) => a(l.target.value),
+      className: "flex-1 cursor-pointer"
+    }
+  );
+}, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
+  const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), { hasPermission: c } = usePermissions(), [d, p] = useTheme(), u = useThemeOptions(), { t: g } = useTranslation(), m = (A) => {
+    a(A);
+  }, x = () => {
+    const A = l.find((B) => Object.keys(B)[0] === r);
+    if (A) {
+      const B = Object.values(A)[0];
+      B && typeof B == "object" && "fontFamily" in B && "borderRadius" in B && "colors" in B ? p(B) : console.error("Invalid preset structure:", B);
+    } else
+      console.error("Preset not found:", r);
+  }, f = useDebouncedCallback(
+    (A, B) => {
+      p(() => ({
+        ...d,
+        fontFamily: {
+          ...d.fontFamily,
+          [A.replace(/font-/g, "")]: B
+        }
+      }));
+    },
+    [d],
+    200
+  ), h = useDebouncedCallback(
+    (A) => {
+      p(() => ({
+        ...d,
+        borderRadius: `${A}px`
+      }));
+    },
+    [d],
+    200
+  ), b = useDebouncedCallback(
+    (A, B) => {
+      p(() => {
+        const C = get(d, `colors.${A}`);
+        return n ? set(C, 1, B) : set(C, 0, B), {
+          ...d,
+          colors: {
+            ...d.colors,
+            [A]: C
+          }
+        };
+      });
+    },
+    [d],
+    200
+  ), k = (A) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(A.items).map(([B]) => {
+    const C = get(d, `colors.${B}.${n ? 1 : 0}`);
+    return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx(
+        ColorPickerInput,
+        {
+          value: C,
+          onChange: (j) => b(B, j)
+        }
+      ),
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: B.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((j) => j.charAt(0).toUpperCase() + j.slice(1)).join(" ") + (!B.toLowerCase().includes("foreground") && !B.toLowerCase().includes("border") && !B.toLowerCase().includes("input") && !B.toLowerCase().includes("ring") && !B.toLowerCase().includes("background") ? " Background" : "") })
+    ] }, B);
+  }) });
+  return c("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto", o), children: [
+      l.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 py-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: g("Presets") }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: r,
+              onChange: (A) => m(A.target.value),
+              className: "w-full space-y-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "Select preset" }),
+                Array.isArray(l) && l.map((A) => /* @__PURE__ */ jsx("option", { value: Object.keys(A)[0], children: capitalize(Object.keys(A)[0]) }, Object.keys(A)[0]))
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex w-[30%] items-end", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "w-full text-sm",
+            disabled: r === "",
+            variant: "default",
+            onClick: x,
+            children: g("Apply")
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", o), children: [
+        (u == null ? void 0 : u.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(u.fontFamily).map(([A, B]) => /* @__PURE__ */ jsx(
+          FontSelector,
+          {
+            label: A,
+            value: d.fontFamily[A.replace(/font-/g, "")] || B[Object.keys(B)[0]],
+            onChange: (C) => f(A, C)
+          },
+          A
+        )) }),
+        (u == null ? void 0 : u.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 py-3", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: g("Border Radius") }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 py-2", children: [
+            /* @__PURE__ */ jsx(BorderRadiusInput, { value: d.borderRadius, onChange: h }),
+            /* @__PURE__ */ jsx("span", { className: "w-12 text-sm", children: d.borderRadius })
+          ] })
+        ] }),
+        (u == null ? void 0 : u.colors) && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-0.5", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: g("Colors") }),
+          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: u.colors.map((A) => k(A)) }, n ? "dark" : "light")
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("br", {}),
+      /* @__PURE__ */ jsx("br", {}),
+      /* @__PURE__ */ jsx("br", {}),
+      /* @__PURE__ */ jsx("br", {})
+    ] }),
+    i && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 w-full", children: React.createElement(i) })
+  ] }) : /* @__PURE__ */ jsx("div", { className: "relative w-full", children: /* @__PURE__ */ jsx("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto text-center", o), children: /* @__PURE__ */ jsx("div", { className: "mt-10 h-full items-center justify-center gap-2 text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "You don't have permission to edit the theme. Please contact your administrator to get access." }) }) }) });
+}), Core = "Core", Import = "Import", Breakpoints = "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",
@@ -9472,6 +9478,8 @@ const RootLayout = () => {
     /* @__PURE__ */ jsx(Toaster, {})
   ] }) }) });
 };
+if (typeof window > "u")
+  throw new Error("@chaibuilder/sdk is only supported in the browser. Avoid using it in the server side.");
 export {
   AISetContext,
   AIUserPrompt,
@@ -9489,8 +9497,8 @@ export {
   ListTree as Outline,
   PERMISSIONS,
   Breakpoints$1 as ScreenSizes,
-  ThemeConfigPanel as ThemeOptions,
-  UILibrariesPanel as UILibraries,
+  ThemeConfigPanel,
+  UILibrariesPanel,
   UndoRedo,
   generateUUID as generateBlockId,
   getBlocksFromHTML,
@@ -9520,6 +9528,7 @@ export {
   useHighlightBlockId,
   useLanguages,
   useLayoutVariant,
+  useLibraryBlocks,
   usePartailBlocksStore,
   usePartialBlocksList,
   usePasteBlocks,