@crediblemark/build 0.22.7 → 0.24.0

package/dist/{chunk-JNHQNNGW.mjs → chunk-EDVDS4CH.mjs}

@@ -1,13 +1,13 @@
 import {
   LoadedRichTextMenu
-} from "./chunk-AEKBE267.mjs";
+} from "./chunk-FC3ZRBT2.mjs";
 import {
   DragIcon,
   collisionStore,
   createDynamicCollisionDetector,
   setDeep,
   useSensors
-} from "./chunk-K27LFPQL.mjs";
+} from "./chunk-62JTNLF7.mjs";
 import {
   AutoFieldPrivate,
   Button,
@@ -16,7 +16,7 @@ import {
   fieldContextStore,
   useContextStore,
   useSafeId
-} from "./chunk-2JUMF5G3.mjs";
+} from "./chunk-ACKK2BYK.mjs";
 import {
   RichTextRenderFallback,
   SlotRender,
@@ -30,7 +30,7 @@ import {
   ActionBar,
   IconButton,
   Loader
-} from "./chunk-T6RT6PV4.mjs";
+} from "./chunk-AP7SVXSU.mjs";
 import {
   Box,
   ChartColumn,
@@ -55,6 +55,7 @@ import {
   Megaphone,
   Minimize2,
   Monitor,
+  Moon,
   PanelLeft,
   PanelRight,
   Quote,
@@ -63,6 +64,7 @@ import {
   Settings,
   Shapes,
   Smartphone,
+  Sun,
   Tablet,
   ToyBrick,
   Trash,
@@ -83,7 +85,7 @@ import {
   useRegisterHistorySlice,
   useRegisterPermissionsSlice,
   useResetAutoZoom
-} from "./chunk-ZY24NW7X.mjs";
+} from "./chunk-E7XYUXJM.mjs";
 import {
   getItem,
   insert,
@@ -1516,7 +1518,7 @@ import {
 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var Editor = lazy(
-  () => import("./Editor-L674TD7T.mjs").then((m) => ({
+  () => import("./Editor-5TR52PVR.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -2559,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 = ({
@@ -2589,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",
@@ -2605,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 }),
@@ -2620,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;
@@ -2748,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);
@@ -3019,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,
@@ -3423,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 {
@@ -3436,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";
@@ -3678,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;
@@ -3825,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,
@@ -4013,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";
@@ -4347,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();
@@ -4367,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();
@@ -4513,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",
@@ -5005,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";
@@ -5013,7 +5060,7 @@ var FrameContext = createContext7(null);
 var FrameProvider = ({
   children
 }) => {
-  const frameRef = useRef13(null);
+  const frameRef = useRef14(null);
   const value = useMemo17(
     () => ({
       frameRef
@@ -5037,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,
@@ -5163,16 +5211,39 @@ var HeaderInner = ({
           }),
           children: /* @__PURE__ */ jsxs11("div", { className: getClassName15("inner"), children: [
             /* @__PURE__ */ jsxs11("div", { className: getClassName15("leftActions"), children: [
-              /* @__PURE__ */ jsx30("div", { style: { marginRight: "16px" }, children: /* @__PURE__ */ jsx30(
-                Button,
-                {
-                  href: "/dashboard",
-                  variant: "secondary",
-                  size: "medium",
-                  icon: /* @__PURE__ */ jsx30(LayoutDashboard, { size: 14 }),
-                  children: "Dashboard"
-                }
-              ) }),
+              /* @__PURE__ */ jsxs11("div", { style: { marginRight: "8px", display: "flex", gap: "8px", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsx30(
+                  Button,
+                  {
+                    href: "/dashboard",
+                    variant: "secondary",
+                    size: "medium",
+                    icon: /* @__PURE__ */ jsx30(LayoutDashboard, { size: 14 }),
+                    children: "Dashboard"
+                  }
+                ),
+                /* @__PURE__ */ jsx30(
+                  IconButton,
+                  {
+                    type: "button",
+                    onClick: () => {
+                      const editorEl = document.querySelector(".CredBuild");
+                      if (!editorEl) return;
+                      const isDark = editorEl.classList.contains("dark");
+                      const newTheme = isDark ? "light" : "dark";
+                      if (isDark) {
+                        editorEl.classList.remove("dark");
+                      } else {
+                        editorEl.classList.add("dark");
+                      }
+                      localStorage.setItem("credbuild-theme", newTheme);
+                      window.dispatchEvent(new CustomEvent("credbuild-theme-change", { detail: newTheme }));
+                    },
+                    title: "Toggle Theme",
+                    children: theme === "dark" ? /* @__PURE__ */ jsx30(Sun, { size: 16 }) : /* @__PURE__ */ jsx30(Moon, { size: 16 })
+                  }
+                )
+              ] }),
               /* @__PURE__ */ jsxs11("div", { className: getClassName15("toggle"), children: [
                 /* @__PURE__ */ jsx30("div", { className: getClassName15("leftSideBarToggle"), children: /* @__PURE__ */ jsx30(
                   IconButton,
@@ -5310,7 +5381,7 @@ import {
   useCallback as useCallback18,
   useEffect as useEffect19,
   useMemo as useMemo19,
-  useRef as useRef14,
+  useRef as useRef15,
   useState as useState14
 } from "react";
 
@@ -5364,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;
@@ -5533,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
   );
@@ -5614,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" };
@@ -5630,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;
@@ -5905,8 +5976,23 @@ var Layout = ({ children }) => {
     [overrides]
   );
   const [mounted, setMounted] = useState16(false);
+  const [theme, setTheme] = useState16("dark");
   useEffect22(() => {
     setMounted(true);
+    const savedTheme = localStorage.getItem("credbuild-theme");
+    if (savedTheme) {
+      setTheme(savedTheme);
+    }
+    const handleThemeToggle = (e) => {
+      const newTheme = e.detail || localStorage.getItem("credbuild-theme");
+      if (newTheme) setTheme(newTheme);
+    };
+    window.addEventListener("credbuild-theme-change", handleThemeToggle);
+    window.addEventListener("storage", handleThemeToggle);
+    return () => {
+      window.removeEventListener("credbuild-theme-change", handleThemeToggle);
+      window.removeEventListener("storage", handleThemeToggle);
+    };
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
@@ -5993,7 +6079,7 @@ var Layout = ({ children }) => {
   return /* @__PURE__ */ jsxs16(
     "div",
     {
-      className: `CredBuild ${getClassName21({
+      className: `CredBuild ${theme === "dark" ? "dark" : ""} ${getClassName21({
         hidePlugins: hasLegacySideBarPlugin
       })}`,
       id: instanceId,
@@ -6017,7 +6103,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,
                     {
@@ -6246,7 +6332,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/{chunk-AEKBE267.mjs → chunk-FC3ZRBT2.mjs}

@@ -1,12 +1,12 @@
 import {
   LoadedRichTextMenuInner
-} from "./chunk-T6RT6PV4.mjs";
+} from "./chunk-AP7SVXSU.mjs";
 
 // components/RichTextMenu/index.tsx
 import { lazy, Suspense } from "react";
 import { jsx } from "react/jsx-runtime";
 var LoadedRichTextMenuFull = lazy(
-  () => import("./full-SGY5HNVB.mjs").then((m) => ({
+  () => import("./full-AGQP4VE6.mjs").then((m) => ({
     default: m.LoadedRichTextMenuFull
   }))
 );

package/dist/{chunk-RDTXKOE7.mjs → chunk-P6XSBCUA.mjs}

@@ -2,7 +2,7 @@ import {
   AutoFieldPrivate,
   NestedFieldProvider,
   useNestedFieldContext
-} from "./chunk-2JUMF5G3.mjs";
+} from "./chunk-ACKK2BYK.mjs";
 
 // components/AutoField/subfield.tsx
 import { memo } from "react";

package/dist/{chunk-67TMLSKM.mjs → chunk-QA2U7BOE.mjs}

@@ -5,7 +5,7 @@ import {
   Heading4,
   Heading5,
   Heading6
-} from "./chunk-ZY24NW7X.mjs";
+} from "./chunk-E7XYUXJM.mjs";
 
 // components/RichTextMenu/controls/HeadingSelect/use-options.ts
 import { useMemo } from "react";

package/dist/{chunk-4PJ4QMWI.mjs → chunk-RUAHVDDE.mjs}

@@ -4,7 +4,7 @@ import {
 import {
   useAppStore,
   useAppStoreApi
-} from "./chunk-ZY24NW7X.mjs";
+} from "./chunk-E7XYUXJM.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-BFHV72KK.mjs";

package/dist/{full-SGY5HNVB.mjs → full-AGQP4VE6.mjs}

@@ -1,10 +1,10 @@
 import {
   LoadedRichTextMenuInner
-} from "./chunk-T6RT6PV4.mjs";
-import "./chunk-NYBWAKLT.mjs";
-import "./chunk-67TMLSKM.mjs";
-import "./chunk-JNMMY5D7.mjs";
-import "./chunk-ZY24NW7X.mjs";
+} from "./chunk-AP7SVXSU.mjs";
+import "./chunk-7HQNPCGI.mjs";
+import "./chunk-QA2U7BOE.mjs";
+import "./chunk-6TAU2PST.mjs";
+import "./chunk-E7XYUXJM.mjs";
 import "./chunk-64A37UUC.mjs";
 import "./chunk-SMAWAXVX.mjs";
 import "./chunk-BFHV72KK.mjs";