@chaibuilder/sdk 2.2.25 → 2.2.26

package/dist/core.d.ts

@@ -316,6 +316,7 @@ export declare interface ChaiSidebarPanel {
     panel?: ComponentType;
     width?: number;
     isInternal?: boolean;
+    icon?: React.ReactNode;
 }
 
 export declare const ChaiThemeConfigPanel: React_2.FC<ThemeConfigProps>;

package/dist/core.js

@@ -9322,7 +9322,7 @@ const SettingsPanel = () => {
 }, registerChaiTopBar = (o) => {
   TOP_BAR.component = o;
 }, useTopBarComponent = () => useMemo(() => TOP_BAR.component, []), DEFAULT_PANEL_WIDTH = 280, OutlineButton = ({ isActive: o, show: r }) => /* @__PURE__ */ jsx(Button, { variant: o ? "default" : "ghost", size: "icon", onClick: r, children: /* @__PURE__ */ jsx(Layers, { size: 20 }) }), AiButton = ({ isActive: o, show: r }) => /* @__PURE__ */ jsx(Button, { variant: o ? "default" : "ghost", size: "icon", onClick: r, children: /* @__PURE__ */ jsx(LightningBoltIcon, { className: "rtl:ml-2" }) });
-function useSidebarMenuItems() {
+function useSidebarDefaultPanels() {
   const o = useBuilderProp("askAiCallBack", null), r = useFeature("aiChat");
   return useMemo(() => {
     const n = [];
@@ -9348,11 +9348,17 @@ const RootLayout = () => {
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
     n("outline");
   });
-  const p = useChaiSidebarPanels("top"), u = useChaiSidebarPanels("bottom"), g = useCallback((S) => {
+  const p = useSidebarDefaultPanels(), u = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"), h = useCallback((S) => {
     S.preventDefault();
-  }, []), h = useCallback((S) => {
-    n(r === S ? null : S);
-  }, []), m = useSidebarMenuItems(), { t: f } = useTranslation(), x = useMemo(() => [...m, ...p], [m, p]), y = useBuilderProp("htmlDir", "ltr"), b = find(x, { id: r }) ?? first(x), v = get(b, "width", DEFAULT_PANEL_WIDTH);
+  }, []), m = useCallback(
+    (S) => {
+      n(r === S ? null : S);
+    },
+    [r]
+  ), { t: f } = useTranslation(), x = useMemo(
+    () => [...p, ...u, ...g],
+    [p, u, g]
+  ), y = useBuilderProp("htmlDir", "ltr"), b = find(x, { id: r }) ?? first(x), v = get(b, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (r !== null) {
       const S = find(x, { id: r });
@@ -9373,21 +9379,21 @@ const RootLayout = () => {
   }, [r, x]);
   const _ = useCallback(
     (S) => {
-      h(S);
+      m(S);
     },
-    [h]
+    [m]
   );
   return /* @__PURE__ */ jsx("div", { dir: y, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
-        onContextMenu: g,
+        onContextMenu: h,
         className: "flex h-screen max-h-full flex-col bg-background text-foreground",
         children: [
-          /* @__PURE__ */ jsx("div", { className: "h-14 w-screen shrink-0 border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(o, {}) }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex h-[50px] w-screen items-center border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(o, {}) }) }),
           /* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxs("div", { id: "sidebar", className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: x.map((S, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: [p, u].flat().map((S, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(S, "button", NoopComponent), {
                   position: "top",
                   panelId: S.id,
@@ -9397,7 +9403,7 @@ const RootLayout = () => {
                 /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(S.label) }) })
               ] }, "button-top-" + A)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: u == null ? void 0 : u.map((S, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((S, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(S, "button", NoopComponent), {
                   position: "bottom",
                   panelId: S.id,
@@ -9463,63 +9469,63 @@ const RootLayout = () => {
                   /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: c === "ai" ? /* @__PURE__ */ jsx(AskAI, {}) : c === "theme" ? /* @__PURE__ */ jsx(ThemeConfigPanel, {}) : /* @__PURE__ */ jsx(SettingsPanel, {}) }) })
                 ] }) })
               }
-            ),
-            r !== null && get(b, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => w(), children: /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "p-0 sm:max-w-full", style: { width: `${v}px` }, children: [
-              /* @__PURE__ */ jsx(SheetHeader, { className: "border-b border-border p-4 pb-2", children: /* @__PURE__ */ jsxs(SheetTitle, { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(b, "icon", null) }),
-                /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
-              ] }) }),
-              /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
-                close: E
-              }) }) })
-            ] }) }),
-            " ",
-            r !== null && get(b, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => w(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-0", style: { maxWidth: `${v}px` }, children: [
-              /* @__PURE__ */ jsx(DialogHeader, { className: "border-b border-border p-4 pb-2", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(b, "icon", null) }),
-                /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
-              ] }) }),
-              /* @__PURE__ */ jsx("div", { className: "max-h-[70vh] overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
-                close: E
-              }) }) })
-            ] }) }),
-            r !== null && get(b, "view") === "overlay" && /* @__PURE__ */ jsx(
-              motion.div,
-              {
-                className: "absolute bottom-0 left-12 right-0 top-0 z-50",
-                initial: { opacity: 0 },
-                animate: { opacity: 1 },
-                exit: { opacity: 0 },
-                transition: { duration: 0.3 },
-                children: /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: /* @__PURE__ */ jsxs(
-                  motion.div,
-                  {
-                    className: "flex h-full w-full flex-col bg-background",
-                    initial: { y: -20, opacity: 0 },
-                    animate: { y: 0, opacity: 1 },
-                    exit: { y: 20, opacity: 0 },
-                    transition: { duration: 0.3, delay: 0.1 },
-                    children: [
-                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border p-4 py-2", children: [
-                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-lg font-bold", children: [
-                          /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(b, "icon", null) }),
-                          /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
-                        ] }),
-                        /* @__PURE__ */ jsx(Button, { onClick: () => w(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
-                      ] }),
-                      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
-                        close: E
-                      }) }) })
-                    ]
-                  }
-                ) })
-              }
             )
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsx(AddBlocksDialog, {})
+    /* @__PURE__ */ jsx(AddBlocksDialog, {}),
+    r !== null && get(b, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => w(), children: /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "p-0 sm:max-w-full", style: { width: `${v}px` }, children: [
+      /* @__PURE__ */ jsx(SheetHeader, { className: "border-b border-border p-4 pb-2", children: /* @__PURE__ */ jsxs(SheetTitle, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(b, "icon", null) }),
+        /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
+        close: E
+      }) }) })
+    ] }) }),
+    " ",
+    r !== null && get(b, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => w(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-0", style: { maxWidth: `${v}px` }, children: [
+      /* @__PURE__ */ jsx(DialogHeader, { className: "border-b border-border p-4 pb-2", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(b, "icon", null) }),
+        /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "max-h-[70vh] overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
+        close: E
+      }) }) })
+    ] }) }),
+    r !== null && get(b, "view") === "overlay" && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "absolute bottom-0 left-12 right-0 top-0 z-50",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.3 },
+        children: /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: "flex h-full w-full flex-col bg-background",
+            initial: { y: -20, opacity: 0 },
+            animate: { y: 0, opacity: 1 },
+            exit: { y: 20, opacity: 0 },
+            transition: { duration: 0.3, delay: 0.1 },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex h-[50px] items-center justify-between border-b border-border p-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "-ml-2 flex items-center gap-2 text-lg font-bold", children: [
+                  /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(b, "icon", null) }),
+                  /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
+                ] }),
+                /* @__PURE__ */ jsx(Button, { onClick: () => w(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
+                close: E
+              }) }) })
+            ]
+          }
+        ) })
+      }
+    )
   ] }) });
 }, PreviewScreen = () => {
   const [o, r] = usePreviewMode(), { t: n } = useTranslation(), a = useBuilderProp("previewComponent", null);

package/package.json

@@ -5,7 +5,7 @@
   "author": "Suraj Air",
   "license": "BSD-3-Clause",
   "homepage": "https://chaibuilder.com",
-  "version": "2.2.25",
+  "version": "2.2.26",
   "type": "module",
   "repository": {
     "type": "git",