@crediblemark/build 0.22.9 → 0.24.1

package/dist/{chunk-D4PXAFBJ.mjs → chunk-5H2KI7SK.mjs}

@@ -2561,7 +2561,8 @@ import { useEffect as useEffect12, useState as useState8 } from "react";
 var styles_module_default5 = { "ComponentList": "_ComponentList_1jl8i_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1jl8i_5", "ComponentList-content": "_ComponentList-content_1jl8i_9", "ComponentList-title": "_ComponentList-title_1jl8i_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_1jl8i_53" };
 
 // components/ComponentList/index.tsx
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect11, useRef as useRef9 } from "react";
+import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
 import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 var getClassName5 = get_class_name_factory_default("ComponentList", styles_module_default5);
 var ComponentListItem = ({
@@ -2591,7 +2592,16 @@ var ComponentList = ({
   const config = useAppStore((s) => s.config);
   const setUi = useAppStore((s) => s.setUi);
   const componentList = useAppStore((s) => s.state.ui.componentList);
+  const parentRef = useRef9(null);
   const { expanded = true } = componentList[id] || {};
+  const components = Object.keys(config.components);
+  const virtualizer = useVirtualizer2({
+    count: components.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 40,
+    // Estimated height of each item
+    overscan: 5
+  });
   return /* @__PURE__ */ jsxs4("div", { className: getClassName5({ isExpanded: expanded }), children: [
     title && /* @__PURE__ */ jsxs4(
       "button",
@@ -2607,7 +2617,6 @@ var ComponentList = ({
             }
           }
         }),
-        title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
           /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
             id.toLowerCase().includes("hero") && /* @__PURE__ */ jsx12(LayoutTemplate, { size: 12, strokeWidth: 2.5 }),
@@ -2622,16 +2631,52 @@ var ComponentList = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx12("div", { className: getClassName5("content"), children: /* @__PURE__ */ jsx12(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
-      return /* @__PURE__ */ jsx12(
-        ComponentListItem,
-        {
-          label: config.components[componentKey]["label"] ?? componentKey,
-          name: componentKey
+    /* @__PURE__ */ jsx12(
+      "div",
+      {
+        ref: parentRef,
+        className: getClassName5("content"),
+        style: {
+          maxHeight: expanded ? "500px" : "0px",
+          overflowY: "auto",
+          transition: "max-height 0.3s ease-in-out"
         },
-        componentKey
-      );
-    }) }) })
+        children: /* @__PURE__ */ jsx12(
+          "div",
+          {
+            style: {
+              height: `${virtualizer.getTotalSize()}px`,
+              width: "100%",
+              position: "relative"
+            },
+            children: /* @__PURE__ */ jsx12(Drawer, { children: children || virtualizer.getVirtualItems().map((virtualItem) => {
+              const componentKey = components[virtualItem.index];
+              return /* @__PURE__ */ jsx12(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: `${virtualItem.size}px`,
+                    transform: `translateY(${virtualItem.start}px)`
+                  },
+                  children: /* @__PURE__ */ jsx12(
+                    ComponentListItem,
+                    {
+                      label: config.components[componentKey]["label"] ?? componentKey,
+                      name: componentKey
+                    }
+                  )
+                },
+                virtualItem.key
+              );
+            }) })
+          }
+        )
+      }
+    )
   ] });
 };
 ComponentList.Item = ComponentListItem;
@@ -2750,9 +2795,9 @@ import {
   forwardRef as forwardRef2,
   useCallback as useCallback11,
   useContext as useContext7,
-  useRef as useRef9
+  useRef as useRef10
 } from "react";
-import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
+import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
 import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
 var getClassName7 = get_class_name_factory_default("LayerTree", styles_module_default7);
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default7);
@@ -3021,8 +3066,8 @@ var VirtualizedLayerTreeItems = ({
   selectedPathIds,
   tree
 }) => {
-  const listRef = useRef9(null);
-  const virtualizer = useVirtualizer2({
+  const listRef = useRef10(null);
+  const virtualizer = useVirtualizer3({
     count: tree.items.length,
     estimateSize: (index) => getEstimatedRowHeight(tree.items[index].itemId),
     getItemKey: (index) => tree.items[index].itemId,
@@ -3425,12 +3470,12 @@ import {
   useCallback as useCallback22,
   useEffect as useEffect23,
   useMemo as useMemo21,
-  useRef as useRef17,
+  useRef as useRef18,
   useState as useState17
 } from "react";
 
 // components/CredBuild/components/Preview/index.tsx
-import { useCallback as useCallback14, useEffect as useEffect15, useRef as useRef11, useMemo as useMemo13 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect15, useRef as useRef12, useMemo as useMemo13 } from "react";
 
 // components/AutoFrame/index.tsx
 import {
@@ -3438,7 +3483,7 @@ import {
   useCallback as useCallback13,
   useContext as useContext9,
   useEffect as useEffect14,
-  useRef as useRef10,
+  useRef as useRef11,
   useState as useState9
 } from "react";
 import hash from "object-hash";
@@ -3680,8 +3725,8 @@ function AutoFrame({
   const handleStylesLoaded = useCallback13(() => {
     setStylesLoaded(true);
   }, []);
-  const onReadyRef = useRef10(onReady);
-  const onNotReadyRef = useRef10(onNotReady);
+  const onReadyRef = useRef11(onReady);
+  const onNotReadyRef = useRef11(onNotReady);
   useEffect14(() => {
     onReadyRef.current = onReady;
     onNotReadyRef.current = onNotReady;
@@ -3827,7 +3872,7 @@ var Preview = ({ id = "credbuild-preview" }) => {
   );
   const Frame = useMemo13(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
-  const ref = useRef11(null);
+  const ref = useRef12(null);
   useBubbleIframeEvents(ref);
   const inner = !renderData ? /* @__PURE__ */ jsx23(
     Page,
@@ -4015,7 +4060,7 @@ import {
   useCallback as useCallback16,
   useEffect as useEffect17,
   useMemo as useMemo15,
-  useRef as useRef12,
+  useRef as useRef13,
   useState as useState11
 } from "react";
 import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
@@ -4349,7 +4394,7 @@ import { jsx as jsx26 } from "react/jsx-runtime";
 var DEBUG2 = false;
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout2) => {
-  const lastFallbackDisable = useRef12(null);
+  const lastFallbackDisable = useRef13(null);
   return useCallback16((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
@@ -4369,7 +4414,7 @@ var DragDropContextClient = ({
   const dispatch = useAppStore((s) => s.dispatch);
   const instanceId = useAppStore((s) => s.instanceId);
   const appStore = useAppStoreApi();
-  const debouncedParamsRef = useRef12(null);
+  const debouncedParamsRef = useRef13(null);
   const tempDisableFallback = useTempDisableFallback(100);
   const [zoneStore] = useState11(() => {
     const rootVirtualizers = /* @__PURE__ */ new Map();
@@ -4515,8 +4560,8 @@ var DragDropContextClient = ({
   ]);
   const sensors = useSensors();
   const [dragListeners, setDragListeners] = useState11({});
-  const dragMode = useRef12(null);
-  const initialSelector = useRef12(void 0);
+  const dragMode = useRef13(null);
+  const initialSelector = useRef13(void 0);
   const nextContextValue = useMemo15(
     () => ({
       mode: "edit",
@@ -5007,7 +5052,7 @@ import { useShallow as useShallow6 } from "zustand/react/shallow";
 import {
   createContext as createContext7,
   useContext as useContext12,
-  useRef as useRef13,
+  useRef as useRef14,
   useMemo as useMemo17
 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
@@ -5015,7 +5060,7 @@ var FrameContext = createContext7(null);
 var FrameProvider = ({
   children
 }) => {
-  const frameRef = useRef13(null);
+  const frameRef = useRef14(null);
   const value = useMemo17(
     () => ({
       frameRef
@@ -5039,7 +5084,8 @@ var styles_module_default16 = { "CredBuildHeader": "_CredBuildHeader_qzv5u_1", "
 import { Fragment as Fragment11, jsx as jsx30, jsxs as jsxs11 } from "react/jsx-runtime";
 var getClassName15 = get_class_name_factory_default("CredBuildHeader", styles_module_default16);
 var HeaderInner = ({
-  hidePlugins
+  hidePlugins,
+  theme
 }) => {
   const {
     onPublish,
@@ -5176,7 +5222,7 @@ var HeaderInner = ({
                     children: "Dashboard"
                   }
                 ),
-                /* @__PURE__ */ jsxs11(
+                /* @__PURE__ */ jsx30(
                   IconButton,
                   {
                     type: "button",
@@ -5194,10 +5240,7 @@ var HeaderInner = ({
                       window.dispatchEvent(new CustomEvent("credbuild-theme-change", { detail: newTheme }));
                     },
                     title: "Toggle Theme",
-                    children: [
-                      /* @__PURE__ */ jsx30(Sun, { className: "cb-theme-sun", size: 16 }),
-                      /* @__PURE__ */ jsx30(Moon, { className: "cb-theme-moon", size: 16 })
-                    ]
+                    children: theme === "dark" ? /* @__PURE__ */ jsx30(Sun, { size: 16 }) : /* @__PURE__ */ jsx30(Moon, { size: 16 })
                   }
                 )
               ] }),
@@ -5338,7 +5381,7 @@ import {
   useCallback as useCallback18,
   useEffect as useEffect19,
   useMemo as useMemo19,
-  useRef as useRef14,
+  useRef as useRef15,
   useState as useState14
 } from "react";
 
@@ -5392,7 +5435,7 @@ var Canvas = () => {
     }))
   );
   const [showTransition, setShowTransition] = useState14(false);
-  const isResizingRef = useRef14(false);
+  const isResizingRef = useRef15(false);
   const defaultRender = useMemo19(() => {
     const CredBuildDefault = ({ children }) => /* @__PURE__ */ jsx32(Fragment12, { children });
     return CredBuildDefault;
@@ -5561,10 +5604,10 @@ var Canvas = () => {
 };
 
 // lib/use-sidebar-resize.ts
-import { useCallback as useCallback19, useEffect as useEffect20, useRef as useRef15, useState as useState15 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect20, useRef as useRef16, useState as useState15 } from "react";
 function useSidebarResize(position, dispatch) {
   const [width, setWidth] = useState15(null);
-  const sidebarRef = useRef15(null);
+  const sidebarRef = useRef16(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
   );
@@ -5642,7 +5685,7 @@ function useSidebarResize(position, dispatch) {
 }
 
 // components/CredBuild/components/ResizeHandle/index.tsx
-import { useCallback as useCallback20, useRef as useRef16 } from "react";
+import { useCallback as useCallback20, useRef as useRef17 } from "react";
 
 // css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/ResizeHandle/styles.module.css#css-module
 var styles_module_default19 = { "ResizeHandle": "_ResizeHandle_144bf_2", "ResizeHandle--left": "_ResizeHandle--left_144bf_16", "ResizeHandle--right": "_ResizeHandle--right_144bf_20" };
@@ -5658,10 +5701,10 @@ var ResizeHandle = ({
 }) => {
   const { frameRef } = useCanvasFrame();
   const resetAutoZoom = useResetAutoZoom(frameRef);
-  const handleRef = useRef16(null);
-  const isDragging = useRef16(false);
-  const startX = useRef16(0);
-  const startWidth = useRef16(0);
+  const handleRef = useRef17(null);
+  const isDragging = useRef17(false);
+  const startX = useRef17(0);
+  const startWidth = useRef17(0);
   const handleMouseMove = useCallback20(
     (e) => {
       if (!isDragging.current) return;
@@ -6039,6 +6082,7 @@ var Layout = ({ children }) => {
       className: `CredBuild ${theme === "dark" ? "dark" : ""} ${getClassName21({
         hidePlugins: hasLegacySideBarPlugin
       })}`,
+      "data-theme": theme,
       id: instanceId,
       style: { height },
       children: [
@@ -6060,7 +6104,7 @@ var Layout = ({ children }) => {
                 className: getLayoutClassName("inner"),
                 style: layoutOptions,
                 children: [
-                  /* @__PURE__ */ jsx36("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsx36(Header, { hidePlugins: hasLegacySideBarPlugin }) }),
+                  /* @__PURE__ */ jsx36("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsx36(Header, { theme, hidePlugins: hasLegacySideBarPlugin }) }),
                   /* @__PURE__ */ jsxs16(
                     Sidebar,
                     {
@@ -6289,7 +6333,7 @@ function CredBuildProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = useRef17(null);
+  const previousData = useRef18(null);
   useEffect23(() => {
     return appStore.subscribe(
       (s) => s.state.data,

package/dist/index.js

@@ -11102,6 +11102,7 @@ init_get_class_name_factory();
 var import_react76 = require("react");
 init_store2();
 init_lucide_react();
+var import_react_virtual2 = require("@tanstack/react-virtual");
 var import_jsx_runtime71 = require("react/jsx-runtime");
 var getClassName28 = get_class_name_factory_default("ComponentList", styles_module_default19);
 var ComponentListItem = ({
@@ -11131,7 +11132,16 @@ var ComponentList = ({
   const config = useAppStore((s) => s.config);
   const setUi = useAppStore((s) => s.setUi);
   const componentList = useAppStore((s) => s.state.ui.componentList);
+  const parentRef = (0, import_react76.useRef)(null);
   const { expanded = true } = componentList[id] || {};
+  const components = Object.keys(config.components);
+  const virtualizer = (0, import_react_virtual2.useVirtualizer)({
+    count: components.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 40,
+    // Estimated height of each item
+    overscan: 5
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: getClassName28({ isExpanded: expanded }), children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
       "button",
@@ -11147,7 +11157,6 @@ var ComponentList = ({
             }
           }
         }),
-        title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
             id.toLowerCase().includes("hero") && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LayoutTemplate, { size: 12, strokeWidth: 2.5 }),
@@ -11162,16 +11171,52 @@ var ComponentList = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: getClassName28("content"), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-        ComponentListItem,
-        {
-          label: config.components[componentKey]["label"] ?? componentKey,
-          name: componentKey
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      "div",
+      {
+        ref: parentRef,
+        className: getClassName28("content"),
+        style: {
+          maxHeight: expanded ? "500px" : "0px",
+          overflowY: "auto",
+          transition: "max-height 0.3s ease-in-out"
         },
-        componentKey
-      );
-    }) }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          "div",
+          {
+            style: {
+              height: `${virtualizer.getTotalSize()}px`,
+              width: "100%",
+              position: "relative"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Drawer, { children: children || virtualizer.getVirtualItems().map((virtualItem) => {
+              const componentKey = components[virtualItem.index];
+              return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: `${virtualItem.size}px`,
+                    transform: `translateY(${virtualItem.start}px)`
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                    ComponentListItem,
+                    {
+                      label: config.components[componentKey]["label"] ?? componentKey,
+                      name: componentKey
+                    }
+                  )
+                },
+                virtualItem.key
+              );
+            }) })
+          }
+        )
+      }
+    )
   ] });
 };
 ComponentList.Item = ComponentListItem;
@@ -11803,7 +11848,7 @@ init_root_droppable_id();
 var import_react82 = require("react");
 init_store2();
 init_use_context_store();
-var import_react_virtual2 = require("@tanstack/react-virtual");
+var import_react_virtual3 = require("@tanstack/react-virtual");
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var getClassName30 = get_class_name_factory_default("LayerTree", styles_module_default21);
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default21);
@@ -12073,7 +12118,7 @@ var VirtualizedLayerTreeItems = ({
   tree
 }) => {
   const listRef = (0, import_react82.useRef)(null);
-  const virtualizer = (0, import_react_virtual2.useVirtualizer)({
+  const virtualizer = (0, import_react_virtual3.useVirtualizer)({
     count: tree.items.length,
     estimateSize: (index) => getEstimatedRowHeight(tree.items[index].itemId),
     getItemKey: (index) => tree.items[index].itemId,
@@ -13584,7 +13629,8 @@ var styles_module_default25 = { "CredBuildHeader": "_CredBuildHeader_qzv5u_1", "
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var getClassName33 = get_class_name_factory_default("CredBuildHeader", styles_module_default25);
 var HeaderInner = ({
-  hidePlugins
+  hidePlugins,
+  theme
 }) => {
   const {
     onPublish,
@@ -13721,7 +13767,7 @@ var HeaderInner = ({
                     children: "Dashboard"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                   IconButton,
                   {
                     type: "button",
@@ -13739,10 +13785,7 @@ var HeaderInner = ({
                       window.dispatchEvent(new CustomEvent("credbuild-theme-change", { detail: newTheme }));
                     },
                     title: "Toggle Theme",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Sun, { className: "cb-theme-sun", size: 16 }),
-                      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Moon, { className: "cb-theme-moon", size: 16 })
-                    ]
+                    children: theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Sun, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Moon, { size: 16 })
                   }
                 )
               ] }),
@@ -14764,6 +14807,7 @@ var Layout = ({ children }) => {
       className: `CredBuild ${theme === "dark" ? "dark" : ""} ${getClassName43({
         hidePlugins: hasLegacySideBarPlugin
       })}`,
+      "data-theme": theme,
       id: instanceId,
       style: { height },
       children: [
@@ -14785,7 +14829,7 @@ var Layout = ({ children }) => {
                 className: getLayoutClassName("inner"),
                 style: layoutOptions,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Header, { hidePlugins: hasLegacySideBarPlugin }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Header, { theme, hidePlugins: hasLegacySideBarPlugin }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
                     Sidebar,
                     {

package/dist/index.mjs

@@ -12,7 +12,7 @@ import {
   registerOverlayPortal,
   useCredBuild,
   useGetCredBuild
-} from "./chunk-D4PXAFBJ.mjs";
+} from "./chunk-5H2KI7SK.mjs";
 import "./chunk-FC3ZRBT2.mjs";
 import {
   setDeep

package/dist/no-external.js

@@ -11102,6 +11102,7 @@ init_get_class_name_factory();
 var import_react76 = require("react");
 init_store2();
 init_lucide_react();
+var import_react_virtual2 = require("@tanstack/react-virtual");
 var import_jsx_runtime71 = require("react/jsx-runtime");
 var getClassName28 = get_class_name_factory_default("ComponentList", styles_module_default19);
 var ComponentListItem = ({
@@ -11131,7 +11132,16 @@ var ComponentList = ({
   const config = useAppStore((s) => s.config);
   const setUi = useAppStore((s) => s.setUi);
   const componentList = useAppStore((s) => s.state.ui.componentList);
+  const parentRef = (0, import_react76.useRef)(null);
   const { expanded = true } = componentList[id] || {};
+  const components = Object.keys(config.components);
+  const virtualizer = (0, import_react_virtual2.useVirtualizer)({
+    count: components.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 40,
+    // Estimated height of each item
+    overscan: 5
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: getClassName28({ isExpanded: expanded }), children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
       "button",
@@ -11147,7 +11157,6 @@ var ComponentList = ({
             }
           }
         }),
-        title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
             id.toLowerCase().includes("hero") && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LayoutTemplate, { size: 12, strokeWidth: 2.5 }),
@@ -11162,16 +11171,52 @@ var ComponentList = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: getClassName28("content"), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-        ComponentListItem,
-        {
-          label: config.components[componentKey]["label"] ?? componentKey,
-          name: componentKey
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      "div",
+      {
+        ref: parentRef,
+        className: getClassName28("content"),
+        style: {
+          maxHeight: expanded ? "500px" : "0px",
+          overflowY: "auto",
+          transition: "max-height 0.3s ease-in-out"
         },
-        componentKey
-      );
-    }) }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          "div",
+          {
+            style: {
+              height: `${virtualizer.getTotalSize()}px`,
+              width: "100%",
+              position: "relative"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Drawer, { children: children || virtualizer.getVirtualItems().map((virtualItem) => {
+              const componentKey = components[virtualItem.index];
+              return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: `${virtualItem.size}px`,
+                    transform: `translateY(${virtualItem.start}px)`
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                    ComponentListItem,
+                    {
+                      label: config.components[componentKey]["label"] ?? componentKey,
+                      name: componentKey
+                    }
+                  )
+                },
+                virtualItem.key
+              );
+            }) })
+          }
+        )
+      }
+    )
   ] });
 };
 ComponentList.Item = ComponentListItem;
@@ -11803,7 +11848,7 @@ init_root_droppable_id();
 var import_react82 = require("react");
 init_store2();
 init_use_context_store();
-var import_react_virtual2 = require("@tanstack/react-virtual");
+var import_react_virtual3 = require("@tanstack/react-virtual");
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var getClassName30 = get_class_name_factory_default("LayerTree", styles_module_default21);
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default21);
@@ -12073,7 +12118,7 @@ var VirtualizedLayerTreeItems = ({
   tree
 }) => {
   const listRef = (0, import_react82.useRef)(null);
-  const virtualizer = (0, import_react_virtual2.useVirtualizer)({
+  const virtualizer = (0, import_react_virtual3.useVirtualizer)({
     count: tree.items.length,
     estimateSize: (index) => getEstimatedRowHeight(tree.items[index].itemId),
     getItemKey: (index) => tree.items[index].itemId,
@@ -13584,7 +13629,8 @@ var styles_module_default25 = { "CredBuildHeader": "_CredBuildHeader_qzv5u_1", "
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var getClassName33 = get_class_name_factory_default("CredBuildHeader", styles_module_default25);
 var HeaderInner = ({
-  hidePlugins
+  hidePlugins,
+  theme
 }) => {
   const {
     onPublish,
@@ -13721,7 +13767,7 @@ var HeaderInner = ({
                     children: "Dashboard"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                   IconButton,
                   {
                     type: "button",
@@ -13739,10 +13785,7 @@ var HeaderInner = ({
                       window.dispatchEvent(new CustomEvent("credbuild-theme-change", { detail: newTheme }));
                     },
                     title: "Toggle Theme",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Sun, { className: "cb-theme-sun", size: 16 }),
-                      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Moon, { className: "cb-theme-moon", size: 16 })
-                    ]
+                    children: theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Sun, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Moon, { size: 16 })
                   }
                 )
               ] }),
@@ -14764,6 +14807,7 @@ var Layout = ({ children }) => {
       className: `CredBuild ${theme === "dark" ? "dark" : ""} ${getClassName43({
         hidePlugins: hasLegacySideBarPlugin
       })}`,
+      "data-theme": theme,
       id: instanceId,
       style: { height },
       children: [
@@ -14785,7 +14829,7 @@ var Layout = ({ children }) => {
                 className: getLayoutClassName("inner"),
                 style: layoutOptions,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Header, { hidePlugins: hasLegacySideBarPlugin }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Header, { theme, hidePlugins: hasLegacySideBarPlugin }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
                     Sidebar,
                     {

package/dist/no-external.mjs

@@ -12,7 +12,7 @@ import {
   registerOverlayPortal,
   useCredBuild,
   useGetCredBuild
-} from "./chunk-D4PXAFBJ.mjs";
+} from "./chunk-5H2KI7SK.mjs";
 import "./chunk-FC3ZRBT2.mjs";
 import {
   setDeep

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediblemark/build",
-  "version": "0.22.9",
+  "version": "0.24.1",
   "description": "The open-source visual editor for React",
   "author": "Rasyiqi Crediblemark",
   "repository": {