@crediblemark/build 0.25.1 → 0.25.3

package/dist/{chunk-OUXISRNA.mjs → chunk-FQKSRGRK.mjs}

@@ -1,13 +1,13 @@
 import {
   LoadedRichTextMenu
-} from "./chunk-WEPD3OBO.mjs";
+} from "./chunk-NYBTD3FJ.mjs";
 import {
   DragIcon,
   collisionStore,
   createDynamicCollisionDetector,
   setDeep,
   useSensors
-} from "./chunk-NJZPPQVT.mjs";
+} from "./chunk-QMMMJ4RO.mjs";
 import {
   AutoFieldPrivate,
   Button,
@@ -16,7 +16,7 @@ import {
   fieldContextStore,
   useContextStore,
   useSafeId
-} from "./chunk-PQXVFRLA.mjs";
+} from "./chunk-NYIULQV4.mjs";
 import {
   RichTextRenderFallback,
   SlotRender,
@@ -25,12 +25,12 @@ import {
   getSlotTransform,
   useRichtextProps,
   useSlots
-} from "./chunk-DVK7K7D6.mjs";
+} from "./chunk-2RLA42JA.mjs";
 import {
   ActionBar,
   IconButton,
   Loader
-} from "./chunk-JKWSSGAY.mjs";
+} from "./chunk-3Q7JODIK.mjs";
 import {
   Box,
   ChartColumn,
@@ -44,6 +44,7 @@ import {
   ExternalLink,
   FileText,
   Image,
+  Inbox,
   Info,
   Layers,
   LayoutDashboard,
@@ -60,6 +61,7 @@ import {
   Quote,
   RectangleEllipsis,
   Redo2,
+  Search,
   Settings,
   Shapes,
   Smartphone,
@@ -85,7 +87,7 @@ import {
   useRegisterHistorySlice,
   useRegisterPermissionsSlice,
   useResetAutoZoom
-} from "./chunk-BPBYJDIJ.mjs";
+} from "./chunk-F2M5GHDX.mjs";
 import {
   getItem,
   insert,
@@ -136,7 +138,8 @@ var SliderField = ({
   step = 1,
   unit = "px",
   defaultValue = 0,
-  useUnits = true
+  useUnits = true,
+  style = {}
 }) => {
   const parseValue = (val) => {
     if (typeof val === "number") return val;
@@ -167,7 +170,7 @@ var SliderField = ({
     const newUnit = e.target.value;
     onChange(`${numericValue}${newUnit}`);
   };
-  return /* @__PURE__ */ jsxs("div", { style: { padding: "8px 0" }, children: [
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "0", ...style }, children: [
     /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `
                 .cb-slider-input {
                     -webkit-appearance: none;
@@ -271,7 +274,6 @@ var SliderField = ({
 };
 
 // components/AutoField/fields/ResponsiveSliderField/index.tsx
-import { useState } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var DesktopIcon = () => /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ jsx2("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
@@ -296,7 +298,39 @@ var ResponsiveSliderField = ({
   step = 1,
   defaultValue = 0
 }) => {
-  const [mode, setMode] = useState("desktop");
+  const setUi = useAppStore((s) => s.setUi);
+  const viewportsState = useAppStore((s) => s.state.ui.viewports);
+  const zoomConfig = useAppStore((s) => s.zoomConfig);
+  const setZoomConfig = useAppStore((s) => s.setZoomConfig);
+  const viewportConfigOptions = useAppStore((s) => s.viewports);
+  const getModeFromWidth = (width) => {
+    if (width === "100%") return "desktop";
+    const w = typeof width === "string" ? parseInt(width) : width;
+    if (w <= 480) return "mobile";
+    if (w <= 900) return "tablet";
+    return "desktop";
+  };
+  const mode = getModeFromWidth(viewportsState.current.width);
+  const changeGlobalViewport = (targetMode) => {
+    const targetIcon = targetMode === "mobile" ? "Smartphone" : targetMode === "tablet" ? "Tablet" : "Monitor";
+    const matched = viewportConfigOptions.find((v) => v.icon === targetIcon) || viewportConfigOptions.find((v) => {
+      if (targetMode === "mobile") return v.width !== "100%" && parseInt(String(v.width)) <= 480;
+      if (targetMode === "tablet") return v.width !== "100%" && parseInt(String(v.width)) > 480 && parseInt(String(v.width)) <= 900;
+      return v.width === "100%" || parseInt(String(v.width)) > 900;
+    }) || viewportConfigOptions[0];
+    const isFullWidth = matched.width === "100%";
+    const uiViewport = {
+      ...matched,
+      height: matched.height || "auto",
+      zoom: isFullWidth ? 1 : zoomConfig.zoom
+    };
+    if (isFullWidth) {
+      setZoomConfig({ ...zoomConfig, zoom: 1 });
+    }
+    setUi({
+      viewports: { ...viewportsState, current: uiViewport }
+    });
+  };
   const getCurrentValue = () => {
     const val = value?.[mode];
     if (val !== void 0 && val !== null) {
@@ -324,34 +358,38 @@ var ResponsiveSliderField = ({
       [mode]: newVal
     });
   };
-  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [
-    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0px" }, children: [
-      label && /* @__PURE__ */ jsxs2("label", { style: {
-        fontSize: "10px",
-        fontWeight: 500,
-        color: "var(--cb-silver-muted, #71717a)",
-        display: "flex",
-        alignItems: "center",
-        gap: "4px"
-      }, children: [
-        label,
-        /* @__PURE__ */ jsxs2("span", { style: { fontSize: "9px", opacity: 0.5, fontWeight: "400" }, children: [
-          "(",
-          mode,
-          ")"
-        ] })
-      ] }),
+  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "2px", width: "100%" }, children: [
+    label && /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "2px" }, children: /* @__PURE__ */ jsxs2("label", { style: {
+      fontSize: "10px",
+      fontWeight: 600,
+      color: "var(--cb-silver-muted, #71717a)",
+      display: "flex",
+      alignItems: "center",
+      gap: "4px",
+      textTransform: "uppercase",
+      letterSpacing: "0.05em"
+    }, children: [
+      label,
+      /* @__PURE__ */ jsxs2("span", { style: { fontSize: "9px", opacity: 0.5, fontWeight: "400" }, children: [
+        "(",
+        mode,
+        ")"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
       /* @__PURE__ */ jsxs2("div", { style: {
         display: "flex",
         backgroundColor: "var(--cb-bg-panel, #f1f5f9)",
         borderRadius: "4px",
         padding: "1px",
-        border: "1px solid var(--cb-border, #e2e8f0)"
+        border: "1px solid var(--cb-border, #e2e8f0)",
+        flexShrink: 0
       }, children: [
         /* @__PURE__ */ jsx2(
           "button",
           {
-            onClick: () => setMode("desktop"),
+            type: "button",
+            onClick: () => changeGlobalViewport("desktop"),
             style: {
               padding: "2px 5px",
               border: "none",
@@ -365,13 +403,16 @@ var ResponsiveSliderField = ({
               transition: "all 0.1s ease"
             },
             title: "Desktop",
+            "aria-label": "Desktop viewport",
+            "aria-pressed": mode === "desktop",
             children: /* @__PURE__ */ jsx2(DesktopIcon, {})
           }
         ),
         /* @__PURE__ */ jsx2(
           "button",
           {
-            onClick: () => setMode("tablet"),
+            type: "button",
+            onClick: () => changeGlobalViewport("tablet"),
             style: {
               padding: "2px 5px",
               border: "none",
@@ -385,13 +426,16 @@ var ResponsiveSliderField = ({
               transition: "all 0.1s ease"
             },
             title: "Tablet",
+            "aria-label": "Tablet viewport",
+            "aria-pressed": mode === "tablet",
             children: /* @__PURE__ */ jsx2(TabletIcon, {})
           }
         ),
         /* @__PURE__ */ jsx2(
           "button",
           {
-            onClick: () => setMode("mobile"),
+            type: "button",
+            onClick: () => changeGlobalViewport("mobile"),
             style: {
               padding: "2px 5px",
               border: "none",
@@ -405,23 +449,25 @@ var ResponsiveSliderField = ({
               transition: "all 0.1s ease"
             },
             title: "Mobile",
+            "aria-label": "Mobile viewport",
+            "aria-pressed": mode === "mobile",
             children: /* @__PURE__ */ jsx2(MobileIcon, {})
           }
         )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx2(
-      SliderField,
-      {
-        value: getCurrentValue(),
-        onChange: handleChange,
-        unit,
-        max,
-        min,
-        step,
-        useUnits: false
-      }
-    )
+      ] }),
+      /* @__PURE__ */ jsx2("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx2(
+        SliderField,
+        {
+          value: getCurrentValue(),
+          onChange: handleChange,
+          unit,
+          max,
+          min,
+          step,
+          useUnits: false
+        }
+      ) })
+    ] })
   ] });
 };
 
@@ -487,11 +533,11 @@ var ColorPickerField = ({ value, onChange }) => {
   ] });
 };
 
-// css-module:/home/crediblemark/Project/Credibuild/components/Drawer/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/Drawer/styles.module.css#css-module
 var styles_module_default = { "Drawer": "_Drawer_1bd7y_1", "Drawer-draggable": "_Drawer-draggable_1bd7y_7", "Drawer-draggableBg": "_Drawer-draggableBg_1bd7y_11", "DrawerItem-draggable": "_DrawerItem-draggable_1bd7y_21", "DrawerItem--disabled": "_DrawerItem--disabled_1bd7y_34", "DrawerItem": "_DrawerItem_1bd7y_21", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_1bd7y_43", "DrawerItem-default": "_DrawerItem-default_1bd7y_44", "DrawerItem-name": "_DrawerItem-name_1bd7y_61" };
 
 // components/Drawer/index.tsx
-import { useMemo, useState as useState2 } from "react";
+import { useMemo, useState } from "react";
 
 // components/DragDropContext/context.tsx
 import {
@@ -597,7 +643,7 @@ var DrawerItem = ({
   isDragDisabled
 }) => {
   const resolvedId = id || name;
-  const [dynamicId, setDynamicId] = useState2(generateId(resolvedId));
+  const [dynamicId, setDynamicId] = useState(generateId(resolvedId));
   if (typeof index !== "undefined") {
     console.error(
       "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
@@ -714,6 +760,7 @@ import {
   useMemo as useMemo6,
   useRef as useRef8
 } from "react";
+import DOMPurify from "isomorphic-dompurify";
 
 // components/DraggableComponent/index.tsx
 import {
@@ -723,11 +770,11 @@ import {
   useLayoutEffect,
   useMemo as useMemo3,
   useRef as useRef2,
-  useState as useState3,
+  useState as useState2,
   useTransition
 } from "react";
 
-// css-module:/home/crediblemark/Project/Credibuild/components/DraggableComponent/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/DraggableComponent/styles.module.css#css-module
 var styles_module_default2 = { "DraggableComponent": "_DraggableComponent_yrtpz_1", "DraggableComponent-overlayWrapper": "_DraggableComponent-overlayWrapper_yrtpz_12", "DraggableComponent-overlay": "_DraggableComponent-overlay_yrtpz_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_yrtpz_34", "DraggableComponent--hover": "_DraggableComponent--hover_yrtpz_50", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_yrtpz_57", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_yrtpz_71", "DraggableComponent-actions": "_DraggableComponent-actions_yrtpz_71" };
 
 // components/DraggableComponent/index.tsx
@@ -903,10 +950,10 @@ var DraggableComponent = ({
   );
   const overrides = useAppStore((s) => s.overrides);
   const dispatch = useAppStore((s) => s.dispatch);
-  const iframe = useAppStore((s) => s.iframe);
+  const isIframeEnabled = useAppStore((s) => s.iframe.enabled);
   const lastMeasureRef = useRef2(0);
   const ctx = useContext2(dropZoneContext);
-  const [localZones, setLocalZones] = useState3({});
+  const [localZones, setLocalZones] = useState2({});
   const registerLocalZone = useCallback3(
     (zoneCompound2, active) => {
       ctx?.registerLocalZone?.(zoneCompound2, active);
@@ -939,7 +986,7 @@ var DraggableComponent = ({
     })
   );
   const zoneStore = useContext2(ZoneStoreContext);
-  const [dragAxis, setDragAxis] = useState3(userDragAxis || autoDragAxis);
+  const [dragAxis, setDragAxis] = useState2(userDragAxis || autoDragAxis);
   const dynamicCollisionDetector = useMemo3(
     () => createDynamicCollisionDetector(dragAxis),
     [dragAxis]
@@ -988,7 +1035,7 @@ var DraggableComponent = ({
     }
     return cleanup;
   }, [permissions.drag, zoneCompound, sortable.draggable, sortable.droppable, zoneStore]);
-  const [, setRerender] = useState3(0);
+  const [, setRerender] = useState2(0);
   const ref = useRef2(null);
   const refSetter = useCallback3(
     (el) => {
@@ -1003,17 +1050,17 @@ var DraggableComponent = ({
     },
     [itemRef, sortableRef]
   );
-  const [portalEl, setPortalEl] = useState3();
+  const [portalEl, setPortalEl] = useState2();
   useEffect2(() => {
     setPortalEl(
-      iframe.enabled ? ref.current?.ownerDocument.body : ref.current?.closest("[data-credbuild-preview]") ?? document.body
+      isIframeEnabled ? ref.current?.ownerDocument.body : ref.current?.closest("[data-credbuild-preview]") ?? document.body
     );
-  }, [iframe.enabled]);
+  }, [isIframeEnabled]);
   const getStyle = useCallback3(() => {
     if (!ref.current) return;
     const el = ref.current;
     const rect = el.getBoundingClientRect();
-    const portalContainerEl = iframe.enabled ? null : el.closest("[data-credbuild-preview]");
+    const portalContainerEl = isIframeEnabled ? null : el.closest("[data-credbuild-preview]");
     const targetIsFixed = (() => {
       let node = el;
       while (node && node !== document.documentElement) {
@@ -1039,8 +1086,8 @@ var DraggableComponent = ({
       position: targetIsFixed ? "fixed" : void 0
     };
     return style2;
-  }, [iframe.enabled]);
-  const [style, setStyle] = useState3();
+  }, [isIframeEnabled]);
+  const [style, setStyle] = useState2();
   const lastRectRef = useRef2(null);
   const syncRafRef = useRef2(null);
   const sync = useCallback3(() => {
@@ -1171,7 +1218,7 @@ var DraggableComponent = ({
       zone: zoneCompound
     });
   }, [index, zoneCompound, dispatch]);
-  const [hover, setHover] = useState3(false);
+  const [hover, setHover] = useState2(false);
   const indicativeHover = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === id
@@ -1223,8 +1270,8 @@ var DraggableComponent = ({
     zoneStore,
     id
   ]);
-  const [isVisible, setIsVisible] = useState3(false);
-  const [dragFinished, setDragFinished] = useState3(true);
+  const [isVisible, setIsVisible] = useState2(false);
+  const [dragFinished, setDragFinished] = useState2(true);
   const [_, startTransition] = useTransition();
   useEffect2(() => {
     startTransition(() => {
@@ -1236,8 +1283,8 @@ var DraggableComponent = ({
         setIsVisible(false);
       }
     });
-  }, [hover, indicativeHover, isSelected, iframe, scheduleSync]);
-  const [thisWasDragging, setThisWasDragging] = useState3(false);
+  }, [hover, indicativeHover, isSelected, isIframeEnabled, scheduleSync]);
+  const [thisWasDragging, setThisWasDragging] = useState2(false);
   const onDragFinished = useOnDragFinished(
     useCallback3(
       (finished) => {
@@ -1445,7 +1492,7 @@ var DraggableComponent = ({
   ] });
 };
 
-// css-module:/home/crediblemark/Project/Credibuild/components/DropZone/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/DropZone/styles.module.css#css-module
 var styles_module_default3 = { "DropZone": "_DropZone_1vmgt_1", "DropZone--hasChildren": "_DropZone--hasChildren_1vmgt_11", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_1vmgt_24", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_1vmgt_25", "DropZone--isRootZone": "_DropZone--isRootZone_1vmgt_25", "DropZone--isDestination": "_DropZone--isDestination_1vmgt_35", "DropZone-item": "_DropZone-item_1vmgt_47", "DropZone-hitbox": "_DropZone-hitbox_1vmgt_51", "DropZone--isEnabled": "_DropZone--isEnabled_1vmgt_59", "DropZone--isAnimating": "_DropZone--isAnimating_1vmgt_68" };
 
 // components/DropZone/index.tsx
@@ -1453,7 +1500,7 @@ import { useDroppable as useDroppable2 } from "@dnd-kit/react";
 import { pointerIntersection } from "@dnd-kit/collision";
 
 // components/DropZone/lib/use-min-empty-height.ts
-import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 var getNumItems = (appStore, zoneCompound) => appStore.getState().state.indexes.zones[zoneCompound].contentIds.length;
 var useMinEmptyHeight = ({
   zoneCompound,
@@ -1461,8 +1508,8 @@ var useMinEmptyHeight = ({
   ref
 }) => {
   const appStore = useAppStoreApi();
-  const [prevHeight, setPrevHeight] = useState4(0);
-  const [isAnimating, setIsAnimating] = useState4(false);
+  const [prevHeight, setPrevHeight] = useState3(0);
+  const [isAnimating, setIsAnimating] = useState3(false);
   const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
     return {
       draggedItem: s.draggedItem?.data.zone === zoneCompound ? s.draggedItem : null,
@@ -1516,7 +1563,7 @@ var useMinEmptyHeight = ({
 };
 
 // components/DropZone/lib/use-content-with-preview.ts
-import { useCallback as useCallback6, useContext as useContext3, useEffect as useEffect4, useState as useState5 } from "react";
+import { useCallback as useCallback6, useContext as useContext3, useEffect as useEffect4, useState as useState4 } from "react";
 
 // lib/dnd/use-rendered-callback.ts
 import { useDragDropManager } from "@dnd-kit/react";
@@ -1540,8 +1587,8 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
     (s) => s.previewIndex[zoneCompound]
   );
   const isDragging = useAppStore((s) => s.state.ui.isDragging);
-  const [contentIdsWithPreview, setContentIdsWithPreview] = useState5(contentIds);
-  const [localPreview, setLocalPreview] = useState5(
+  const [contentIdsWithPreview, setContentIdsWithPreview] = useState4(contentIds);
+  const [localPreview, setLocalPreview] = useState4(
     preview
   );
   const updateContent = useRenderedCallback(
@@ -1594,13 +1641,13 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
 };
 
 // components/DropZone/lib/use-drag-axis.ts
-import { useCallback as useCallback7, useEffect as useEffect5, useState as useState6 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect5, useState as useState5 } from "react";
 var GRID_DRAG_AXIS = "dynamic";
 var FLEX_ROW_DRAG_AXIS = "x";
 var DEFAULT_DRAG_AXIS = "y";
 var useDragAxis = (ref, collisionAxis) => {
   const status = useAppStore((s) => s.status);
-  const [dragAxis, setDragAxis] = useState6(
+  const [dragAxis, setDragAxis] = useState5(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
   const calculateDragAxis = useCallback7(() => {
@@ -1632,8 +1679,8 @@ var useDragAxis = (ref, collisionAxis) => {
 import { useShallow as useShallow3 } from "zustand/react/shallow";
 
 // components/Render/context.tsx
-import React3 from "react";
-var renderContext = React3.createContext({
+import React2 from "react";
+var renderContext = React2.createContext({
   config: { components: {} },
   data: { root: {}, content: [] },
   metadata: {}
@@ -1708,9 +1755,9 @@ function useFieldTransformsTracked(config, item, transforms, readOnly, forceRead
 }
 
 // components/InlineTextField/index.tsx
-import { memo, useEffect as useEffect6, useRef as useRef5, useState as useState7 } from "react";
+import { memo, useEffect as useEffect6, useRef as useRef5, useState as useState6 } from "react";
 
-// css-module:/home/crediblemark/Project/Credibuild/components/InlineTextField/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/InlineTextField/styles.module.css#css-module
 var styles_module_default4 = { "InlineTextField": "_InlineTextField_104qp_1" };
 
 // lib/get-selector-for-id.ts
@@ -1780,8 +1827,8 @@ var InlineTextFieldInternal = ({
       };
     }
   }, [appStoreApi, ref, value, disableLineBreaks, componentId, propPath]);
-  const [isHovering, setIsHovering] = useState7(false);
-  const [isFocused, setIsFocused] = useState7(false);
+  const [isHovering, setIsHovering] = useState6(false);
+  const [isFocused, setIsFocused] = useState6(false);
   return /* @__PURE__ */ jsx8(
     "span",
     {
@@ -1879,12 +1926,12 @@ import {
 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var Editor = lazy(
-  () => import("./Editor-CD7CMRO5.mjs").then((m) => ({
+  () => import("./Editor-IPG4RO2L.mjs").then((m) => ({
     default: m.Editor
   }))
 );
 var RichTextRender = lazy(
-  () => import("./Render-WP5OOTBB.mjs").then((m) => ({
+  () => import("./Render-I6PZ5MEA.mjs").then((m) => ({
     default: m.RichTextRender
   }))
 );
@@ -2259,7 +2306,7 @@ var InsertPreview = ({
   if (element) {
     return (
       // Safe to use this since the HTML is set by the user
-      /* @__PURE__ */ jsx13("div", { dangerouslySetInnerHTML: { __html: element.outerHTML } })
+      /* @__PURE__ */ jsx13("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(element.outerHTML) } })
     );
   }
   return /* @__PURE__ */ jsx13(DrawerItemInner, { name: label, children: override });
@@ -2631,7 +2678,7 @@ var DropZoneEdit = forwardRef(
     );
   }
 );
-var DropZoneRenderItem = ({
+var DropZoneRenderItem = memo4(({
   config,
   item,
   metadata
@@ -2658,7 +2705,7 @@ var DropZoneRenderItem = ({
       }
     }
   ) }, props.id);
-};
+});
 var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx13(DropZoneRender, { ...props });
 var DropZoneRender = forwardRef(
   function DropZoneRenderInternal({ className, style, zone, as }, ref) {
@@ -2758,7 +2805,7 @@ function Render({
 }
 
 // lib/use-credbuild.ts
-import { createContext as createContext3, useContext as useContext6, useEffect as useEffect10, useState as useState8 } from "react";
+import { createContext as createContext3, useContext as useContext6, useEffect as useEffect10, useState as useState7 } from "react";
 import { createStore as createStore2, useStore } from "zustand";
 
 // lib/data/resolve-and-replace-data.ts
@@ -2866,7 +2913,7 @@ var convertToPickedStore = (store) => {
   };
 };
 var useRegisterUseCredBuildStore = (appStore) => {
-  const [useCredBuildStore] = useState8(
+  const [useCredBuildStore] = useState7(
     () => createStore2(
       () => generateUseCredBuild(
         convertToPickedStore(appStore.getState()),
@@ -2916,17 +2963,16 @@ function useGetCredBuild() {
 }
 
 // lib/use-component-list.tsx
-import { useEffect as useEffect12, useState as useState9 } from "react";
+import { useEffect as useEffect12, useState as useState8 } from "react";
 
-// css-module:/home/crediblemark/Project/Credibuild/components/ComponentList/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/ComponentList/styles.module.css#css-module
 var styles_module_default5 = { "ComponentList": "_ComponentList_10tqo_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_10tqo_5", "ComponentList-content": "_ComponentList-content_10tqo_9", "ComponentList-title": "_ComponentList-title_10tqo_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_10tqo_53" };
 
 // components/ComponentList/index.tsx
-import { useEffect as useEffect11, useRef as useRef9 } from "react";
-import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
+import { useEffect as useEffect11, memo as memo5 } from "react";
 import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var getClassName5 = get_class_name_factory_default("ComponentList", styles_module_default5);
-var ComponentListItem = ({
+var ComponentListItem = memo5(({
   name,
   label
 }) => {
@@ -2944,40 +2990,36 @@ var ComponentListItem = ({
     }
   }, [overrides]);
   return /* @__PURE__ */ jsx15(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: overrides.componentItem ?? overrides.drawerItem });
-};
+});
 var ComponentList = ({
   children,
   title,
   id
 }) => {
   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 expanded = useAppStore((s) => s.state.ui.componentList[id]?.expanded ?? true);
+  const appStoreApi = useAppStoreApi();
   const components = Object.keys(config.components);
-  const virtualizer = useVirtualizer2({
-    count: components.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 32,
-    // Estimated height of each item
-    overscan: 5
-  });
   return /* @__PURE__ */ jsxs7("div", { className: getClassName5({ isExpanded: expanded }), children: [
     title && /* @__PURE__ */ jsxs7(
       "button",
       {
         type: "button",
         className: getClassName5("title"),
-        onClick: () => setUi({
-          componentList: {
-            ...componentList,
-            [id]: {
-              ...componentList[id],
-              expanded: !expanded
+        "aria-expanded": expanded,
+        "aria-controls": `${id}-content`,
+        onClick: () => {
+          const currentComponentList = appStoreApi.getState().state.ui.componentList;
+          appStoreApi.getState().setUi({
+            componentList: {
+              ...currentComponentList,
+              [id]: {
+                ...currentComponentList[id],
+                expanded: !expanded
+              }
             }
-          }
-        }),
+          });
+        },
         children: [
           /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
             id.toLowerCase().includes("hero") && /* @__PURE__ */ jsx15(LayoutTemplate, { size: 12, strokeWidth: 2.5 }),
@@ -2995,47 +3037,23 @@ var ComponentList = ({
     /* @__PURE__ */ jsx15(
       "div",
       {
-        ref: parentRef,
+        id: `${id}-content`,
         className: getClassName5("content"),
         style: {
-          maxHeight: expanded ? "500px" : "0px",
-          overflowY: "auto",
-          transition: "max-height 0.3s ease-in-out"
+          overflow: "visible",
+          display: expanded ? "block" : "none"
         },
-        children: /* @__PURE__ */ jsx15(
-          "div",
-          {
-            style: {
-              height: `${virtualizer.getTotalSize()}px`,
-              width: "100%",
-              position: "relative"
+        children: /* @__PURE__ */ jsx15(Drawer, { children: children || components.map((componentKey, i) => {
+          return /* @__PURE__ */ jsx15(
+            ComponentListItem,
+            {
+              label: config.components[componentKey]["label"] ?? componentKey,
+              name: componentKey,
+              index: i
             },
-            children: /* @__PURE__ */ jsx15(Drawer, { children: children || virtualizer.getVirtualItems().map((virtualItem) => {
-              const componentKey = components[virtualItem.index];
-              return /* @__PURE__ */ jsx15(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    width: "100%",
-                    height: `${virtualItem.size}px`,
-                    transform: `translateY(${virtualItem.start}px)`
-                  },
-                  children: /* @__PURE__ */ jsx15(
-                    ComponentListItem,
-                    {
-                      label: config.components[componentKey]["label"] ?? componentKey,
-                      name: componentKey
-                    }
-                  )
-                },
-                virtualItem.key
-              );
-            }) })
-          }
-        )
+            componentKey
+          );
+        }) })
       }
     )
   ] });
@@ -3045,7 +3063,7 @@ ComponentList.Item = ComponentListItem;
 // lib/use-component-list.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
 var useComponentList = () => {
-  const [componentList, setComponentList] = useState9();
+  const [componentList, setComponentList] = useState8();
   const config = useAppStore((s) => s.config);
   const uiComponentList = useAppStore((s) => s.state.ui.componentList);
   useEffect12(() => {
@@ -3119,10 +3137,18 @@ var useComponentList = () => {
 };
 
 // components/CredBuild/components/Components/index.tsx
-import { useMemo as useMemo8 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { useMemo as useMemo8, useState as useState9 } from "react";
+
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Components/styles.module.css#css-module
+var styles_module_default6 = { "CredBuildComponents": "_CredBuildComponents_17idm_1", "CredBuildComponents-searchContainer": "_CredBuildComponents-searchContainer_17idm_7", "CredBuildComponents-searchWrapper": "_CredBuildComponents-searchWrapper_17idm_16", "CredBuildComponents-searchInput": "_CredBuildComponents-searchInput_17idm_23", "CredBuildComponents-searchIcon": "_CredBuildComponents-searchIcon_17idm_42", "CredBuildComponents-clearButton": "_CredBuildComponents-clearButton_17idm_49", "CredBuildComponents-listContainer": "_CredBuildComponents-listContainer_17idm_69", "CredBuildComponents-noResults": "_CredBuildComponents-noResults_17idm_74" };
+
+// components/CredBuild/components/Components/index.tsx
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+var getClassName6 = get_class_name_factory_default("CredBuildComponents", styles_module_default6);
 var Components = () => {
   const overrides = useAppStore((s) => s.overrides);
+  const config = useAppStore((s) => s.config);
+  const [searchTerm, setSearchTerm] = useState9("");
   const componentList = useComponentList();
   const Wrapper = useMemo8(() => {
     if (overrides.components) {
@@ -3132,36 +3158,108 @@ var Components = () => {
     }
     return overrides.components || overrides.drawer || "div";
   }, [overrides]);
-  return /* @__PURE__ */ jsx17(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx17(ComponentList, { id: "all" }) });
+  const matchingComponents = useMemo8(() => {
+    if (!searchTerm.trim()) return [];
+    return Object.keys(config.components).filter((componentKey) => {
+      const componentConf = config.components[componentKey] || {};
+      const label = componentConf["label"] ?? componentKey;
+      return label.toLowerCase().includes(searchTerm.toLowerCase()) || componentKey.toLowerCase().includes(searchTerm.toLowerCase());
+    });
+  }, [searchTerm, config.components]);
+  return /* @__PURE__ */ jsxs8(Wrapper, { className: getClassName6(), children: [
+    /* @__PURE__ */ jsx17("div", { className: getClassName6("searchContainer"), children: /* @__PURE__ */ jsxs8("div", { className: getClassName6("searchWrapper"), children: [
+      /* @__PURE__ */ jsx17(Search, { size: 14, className: getClassName6("searchIcon") }),
+      /* @__PURE__ */ jsx17(
+        "input",
+        {
+          type: "text",
+          className: getClassName6("searchInput"),
+          placeholder: "Search blocks...",
+          value: searchTerm,
+          onChange: (e) => setSearchTerm(e.target.value)
+        }
+      ),
+      searchTerm && /* @__PURE__ */ jsx17(
+        "button",
+        {
+          type: "button",
+          className: getClassName6("clearButton"),
+          onClick: () => setSearchTerm(""),
+          title: "Clear search",
+          children: /* @__PURE__ */ jsx17(X, { size: 12 })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx17("div", { className: getClassName6("listContainer"), children: searchTerm.trim() ? matchingComponents.length > 0 ? /* @__PURE__ */ jsxs8("div", { style: { padding: "10px 12px" }, children: [
+      /* @__PURE__ */ jsxs8(
+        "div",
+        {
+          style: {
+            fontSize: "10px",
+            fontWeight: 700,
+            color: "var(--cb-silver-muted)",
+            marginBottom: "8px",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em"
+          },
+          children: [
+            "Search Results (",
+            matchingComponents.length,
+            ")"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx17(Drawer, { children: /* @__PURE__ */ jsx17("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: matchingComponents.map((componentName, i) => {
+        const componentConf = config.components[componentName] || {};
+        return /* @__PURE__ */ jsx17(
+          ComponentList.Item,
+          {
+            label: componentConf["label"] ?? componentName,
+            name: componentName,
+            index: i
+          },
+          componentName
+        );
+      }) }) })
+    ] }) : /* @__PURE__ */ jsxs8("div", { className: getClassName6("noResults"), children: [
+      /* @__PURE__ */ jsx17(Inbox, { size: 20, strokeWidth: 1.5 }),
+      /* @__PURE__ */ jsxs8("div", { children: [
+        'No blocks found matching "',
+        searchTerm,
+        '"'
+      ] })
+    ] }) : componentList ? componentList : /* @__PURE__ */ jsx17(ComponentList, { id: "all" }) })
+  ] });
 };
 
-// css-module:/home/crediblemark/Project/Credibuild/plugins/blocks/styles.module.css#css-module
-var styles_module_default6 = { "BlocksPlugin": "_BlocksPlugin_1ey1i_1" };
+// css-module:/home/runner/work/credbuild/credbuild/plugins/blocks/styles.module.css#css-module
+var styles_module_default7 = { "BlocksPlugin": "_BlocksPlugin_1ey1i_1" };
 
 // plugins/blocks/index.tsx
 import { jsx as jsx18 } from "react/jsx-runtime";
-var getClassName6 = get_class_name_factory_default("BlocksPlugin", styles_module_default6);
+var getClassName7 = get_class_name_factory_default("BlocksPlugin", styles_module_default7);
 var blocksPlugin = () => ({
   name: "blocks",
   label: "Blocks",
-  render: () => /* @__PURE__ */ jsx18("div", { className: getClassName6(), children: /* @__PURE__ */ jsx18(Components, {}) }),
+  render: () => /* @__PURE__ */ jsx18("div", { className: getClassName7(), children: /* @__PURE__ */ jsx18(Components, {}) }),
   icon: /* @__PURE__ */ jsx18(Shapes, {})
 });
 
-// css-module:/home/crediblemark/Project/Credibuild/components/LayerTree/styles.module.css#css-module
-var styles_module_default7 = { "LayerTree": "_LayerTree_nus40_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_nus40_11", "LayerTree-helper": "_LayerTree-helper_nus40_17", "Layer": "_Layer_nus40_1", "Layer-inner": "_Layer-inner_nus40_29", "Layer--containsZone": "_Layer--containsZone_nus40_35", "Layer-clickable": "_Layer-clickable_nus40_39", "Layer--isSelected": "_Layer--isSelected_nus40_58", "Layer-chevron": "_Layer-chevron_nus40_79", "Layer--childIsSelected": "_Layer--childIsSelected_nus40_80", "Layer-zones": "_Layer-zones_nus40_84", "Layer-title": "_Layer-title_nus40_98", "Layer-name": "_Layer-name_nus40_107", "Layer-icon": "_Layer-icon_nus40_113", "Layer-zoneIcon": "_Layer-zoneIcon_nus40_118" };
+// css-module:/home/runner/work/credbuild/credbuild/components/LayerTree/styles.module.css#css-module
+var styles_module_default8 = { "LayerTree": "_LayerTree_nus40_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_nus40_11", "LayerTree-helper": "_LayerTree-helper_nus40_17", "Layer": "_Layer_nus40_1", "Layer-inner": "_Layer-inner_nus40_29", "Layer--containsZone": "_Layer--containsZone_nus40_35", "Layer-clickable": "_Layer-clickable_nus40_39", "Layer--isSelected": "_Layer--isSelected_nus40_58", "Layer-chevron": "_Layer-chevron_nus40_79", "Layer--childIsSelected": "_Layer--childIsSelected_nus40_80", "Layer-zones": "_Layer-zones_nus40_84", "Layer-title": "_Layer-title_nus40_98", "Layer-name": "_Layer-name_nus40_107", "Layer-icon": "_Layer-icon_nus40_113", "Layer-zoneIcon": "_Layer-zoneIcon_nus40_118" };
 
 // components/LayerTree/index.tsx
 import {
   forwardRef as forwardRef2,
   useCallback as useCallback11,
   useContext as useContext7,
-  useRef as useRef10
+  useRef as useRef9,
+  memo as memo6
 } from "react";
-import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
-import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs8 } 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);
+import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
+import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+var getClassName8 = get_class_name_factory_default("LayerTree", styles_module_default8);
+var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default8);
 var DEFAULT_LAYER_ROW_HEIGHT = 32;
 var LAYER_TREE_VIRTUALIZATION_OVERSCAN = 8;
 var MIN_VIRTUALIZED_LAYER_COUNT = 25;
@@ -3258,7 +3356,7 @@ var getScrollParent = (el) => {
   }
   return null;
 };
-var Layer = forwardRef2(function Layer2({
+var Layer = memo6(forwardRef2(function Layer2({
   childIsSelected,
   dataIndex,
   depth,
@@ -3295,7 +3393,7 @@ var Layer = forwardRef2(function Layer2({
     if (t.includes("container") || t.includes("layout") || t.includes("flex")) return /* @__PURE__ */ jsx19(Box, { size: "14", strokeWidth: 2.5 });
     return /* @__PURE__ */ jsx19(LayoutGrid, { size: "14", strokeWidth: 2.5 });
   };
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "li",
     {
       ref,
@@ -3308,7 +3406,7 @@ var Layer = forwardRef2(function Layer2({
       "data-index": dataIndex,
       "data-credbuild-layer-tree-id": node.itemId,
       children: [
-        /* @__PURE__ */ jsx19("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsx19("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs9(
           "button",
           {
             type: "button",
@@ -3341,7 +3439,7 @@ var Layer = forwardRef2(function Layer2({
                   children: /* @__PURE__ */ jsx19(ChevronDown, { size: "12" })
                 }
               ),
-              /* @__PURE__ */ jsxs8("div", { className: getClassNameLayer("title"), children: [
+              /* @__PURE__ */ jsxs9("div", { className: getClassNameLayer("title"), children: [
                 /* @__PURE__ */ jsx19("div", { className: getClassNameLayer("icon"), children: getLayerIcon(node.componentType) }),
                 /* @__PURE__ */ jsx19("div", { className: getClassNameLayer("name"), children: node.label })
               ] })
@@ -3367,17 +3465,17 @@ var Layer = forwardRef2(function Layer2({
       ]
     }
   );
-});
-var LayerTreeZone = ({
+}));
+var LayerTreeZone = memo6(({
   depth,
   selectedId,
   selectedPathIds,
   tree
 }) => {
   const shouldVirtualize = depth === 0 && tree.items.length >= MIN_VIRTUALIZED_LAYER_COUNT;
-  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
-    tree.label && /* @__PURE__ */ jsxs8("div", { className: getClassName7("zoneTitle"), children: [
-      /* @__PURE__ */ jsx19("div", { className: getClassName7("zoneIcon"), children: /* @__PURE__ */ jsx19(Layers, { size: "16" }) }),
+  return /* @__PURE__ */ jsxs9(Fragment5, { children: [
+    tree.label && /* @__PURE__ */ jsxs9("div", { className: getClassName8("zoneTitle"), children: [
+      /* @__PURE__ */ jsx19("div", { className: getClassName8("zoneIcon"), children: /* @__PURE__ */ jsx19(Layers, { size: "16" }) }),
       tree.label
     ] }),
     shouldVirtualize ? /* @__PURE__ */ jsx19(
@@ -3398,15 +3496,15 @@ var LayerTreeZone = ({
       }
     )
   ] });
-};
-var StaticLayerTreeItems = ({
+});
+var StaticLayerTreeItems = memo6(({
   depth,
   selectedId,
   selectedPathIds,
   tree
 }) => {
-  return /* @__PURE__ */ jsxs8("ul", { className: getClassName7(), children: [
-    tree.items.length === 0 && /* @__PURE__ */ jsx19("div", { className: getClassName7("helper"), children: "No items" }),
+  return /* @__PURE__ */ jsxs9("ul", { className: getClassName8(), children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx19("div", { className: getClassName8("helper"), children: "No items" }),
     tree.items.map((node) => /* @__PURE__ */ jsx19(
       Layer,
       {
@@ -3420,15 +3518,15 @@ var StaticLayerTreeItems = ({
       node.itemId
     ))
   ] });
-};
-var VirtualizedLayerTreeItems = ({
+});
+var VirtualizedLayerTreeItems = memo6(({
   depth,
   selectedId,
   selectedPathIds,
   tree
 }) => {
-  const listRef = useRef10(null);
-  const virtualizer = useVirtualizer3({
+  const listRef = useRef9(null);
+  const virtualizer = useVirtualizer2({
     count: tree.items.length,
     estimateSize: (index) => getEstimatedRowHeight(tree.items[index].itemId),
     getItemKey: (index) => tree.items[index].itemId,
@@ -3495,12 +3593,12 @@ var VirtualizedLayerTreeItems = ({
       )
     );
   }
-  return /* @__PURE__ */ jsxs8("ul", { className: getClassName7(), ref: listRef, children: [
-    tree.items.length === 0 && /* @__PURE__ */ jsx19("div", { className: getClassName7("helper"), children: "No items" }),
+  return /* @__PURE__ */ jsxs9("ul", { className: getClassName8(), ref: listRef, children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx19("div", { className: getClassName8("helper"), children: "No items" }),
     renderedItems
   ] });
-};
-var LayerTree = ({
+});
+var LayerTree = memo6(({
   selectedId,
   selectedPathIds,
   trees
@@ -3515,10 +3613,10 @@ var LayerTree = ({
     },
     tree.zoneCompound
   )) });
-};
+});
 
 // components/CredBuild/components/Outline/index.tsx
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo9, memo as memo7 } from "react";
 
 // lib/data/find-zones-for-area.ts
 var findZonesForArea = (state, area) => {
@@ -3530,7 +3628,7 @@ var findZonesForArea = (state, area) => {
 // components/CredBuild/components/Outline/index.tsx
 import { useShallow as useShallow4 } from "zustand/react/shallow";
 import { jsx as jsx20 } from "react/jsx-runtime";
-var Outline = () => {
+var Outline = memo7(() => {
   const outlineOverride = useAppStore((s) => s.overrides.outline);
   const config = useAppStore((s) => s.config);
   const nodes = useAppStore((s) => s.state.indexes.nodes);
@@ -3566,23 +3664,23 @@ var Outline = () => {
       trees
     }
   ) });
-};
+});
 
-// css-module:/home/crediblemark/Project/Credibuild/plugins/outline/styles.module.css#css-module
-var styles_module_default8 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
+// css-module:/home/runner/work/credbuild/credbuild/plugins/outline/styles.module.css#css-module
+var styles_module_default9 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
 
 // plugins/outline/index.tsx
 import { jsx as jsx21 } from "react/jsx-runtime";
-var getClassName8 = get_class_name_factory_default("OutlinePlugin", styles_module_default8);
+var getClassName9 = get_class_name_factory_default("OutlinePlugin", styles_module_default9);
 var outlinePlugin = () => ({
   name: "outline",
   label: "Outline",
-  render: () => /* @__PURE__ */ jsx21("div", { className: getClassName8(), children: /* @__PURE__ */ jsx21(Outline, {}) }),
+  render: () => /* @__PURE__ */ jsx21("div", { className: getClassName9(), children: /* @__PURE__ */ jsx21(Outline, {}) }),
   icon: /* @__PURE__ */ jsx21(List, {})
 });
 
-// css-module:/home/crediblemark/Project/Credibuild/components/Breadcrumbs/styles.module.css#css-module
-var styles_module_default9 = { "Breadcrumbs": "_Breadcrumbs_1e0gb_1", "Breadcrumbs-breadcrumbLabel": "_Breadcrumbs-breadcrumbLabel_1e0gb_7", "Breadcrumbs-breadcrumb": "_Breadcrumbs-breadcrumb_1e0gb_7" };
+// css-module:/home/runner/work/credbuild/credbuild/components/Breadcrumbs/styles.module.css#css-module
+var styles_module_default10 = { "Breadcrumbs": "_Breadcrumbs_1e0gb_1", "Breadcrumbs-breadcrumbLabel": "_Breadcrumbs-breadcrumbLabel_1e0gb_7", "Breadcrumbs-breadcrumb": "_Breadcrumbs-breadcrumb_1e0gb_7" };
 
 // lib/use-breadcrumbs.ts
 import { useMemo as useMemo10 } from "react";
@@ -3621,21 +3719,21 @@ var useBreadcrumbs = (renderCount) => {
 };
 
 // components/Breadcrumbs/index.tsx
-import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
-var getClassName9 = get_class_name_factory_default("Breadcrumbs", styles_module_default9);
+import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+var getClassName10 = get_class_name_factory_default("Breadcrumbs", styles_module_default10);
 var Breadcrumbs = ({
   children,
   numParents = 1
 }) => {
   const setUi = useAppStore((s) => s.setUi);
   const breadcrumbs = useBreadcrumbs(numParents);
-  return /* @__PURE__ */ jsxs9("div", { className: getClassName9(), children: [
-    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs9("div", { className: getClassName9("breadcrumb"), children: [
+  return /* @__PURE__ */ jsxs10("div", { className: getClassName10(), children: [
+    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs10("div", { className: getClassName10("breadcrumb"), children: [
       /* @__PURE__ */ jsx22(
         "button",
         {
           type: "button",
-          className: getClassName9("breadcrumbLabel"),
+          className: getClassName10("breadcrumbLabel"),
           onClick: () => setUi({ itemSelector: breadcrumb.selector }),
           children: breadcrumb.label
         }
@@ -3646,20 +3744,20 @@ var Breadcrumbs = ({
   ] });
 };
 
-// css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Fields/styles.module.css#css-module
-var styles_module_default10 = { "CredBuildFields": "_CredBuildFields_53gu7_1", "CredBuildFields--isLoading": "_CredBuildFields--isLoading_53gu7_6", "CredBuildFields-loadingOverlay": "_CredBuildFields-loadingOverlay_53gu7_10", "CredBuildFields-loadingOverlayInner": "_CredBuildFields-loadingOverlayInner_53gu7_25", "CredBuildFields-field": "_CredBuildFields-field_53gu7_32", "CredBuildFields--wrapFields": "_CredBuildFields--wrapFields_53gu7_36" };
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Fields/styles.module.css#css-module
+var styles_module_default11 = { "CredBuildFields": "_CredBuildFields_53gu7_1", "CredBuildFields--isLoading": "_CredBuildFields--isLoading_53gu7_6", "CredBuildFields-loadingOverlay": "_CredBuildFields-loadingOverlay_53gu7_10", "CredBuildFields-loadingOverlayInner": "_CredBuildFields-loadingOverlayInner_53gu7_25", "CredBuildFields-field": "_CredBuildFields-field_53gu7_32", "CredBuildFields--wrapFields": "_CredBuildFields--wrapFields_53gu7_36" };
 
 // components/CredBuild/components/Fields/index.tsx
 import {
-  memo as memo5,
+  memo as memo8,
   useCallback as useCallback12,
   useContext as useContext8,
   useEffect as useEffect13,
   useMemo as useMemo11
 } from "react";
 import { useShallow as useShallow5 } from "zustand/react/shallow";
-import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
-var getClassName10 = get_class_name_factory_default("CredBuildFields", styles_module_default10);
+import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+var getClassName11 = get_class_name_factory_default("CredBuildFields", styles_module_default11);
 var DefaultFields = ({
   children
 }) => {
@@ -3745,7 +3843,7 @@ var FieldsChildInner = ({ fieldName }) => {
   }, [appStore, fieldStore, fieldName]);
   if (!field || !id || !visible) return null;
   if (field.type === "slot") return null;
-  return /* @__PURE__ */ jsx23("div", { className: getClassName10("field"), children: /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx23("div", { className: getClassName11("field"), children: /* @__PURE__ */ jsx23(
     AutoFieldPrivate,
     {
       field,
@@ -3764,7 +3862,7 @@ var FieldsChild = ({ fieldName }) => {
   }, [appStore, fieldName]);
   return /* @__PURE__ */ jsx23(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ jsx23(FieldsChildInner, { fieldName }) });
 };
-var FieldsChildMemo = memo5(FieldsChild);
+var FieldsChildMemo = memo8(FieldsChild);
 var FieldsInternal = ({ wrapFields = true }) => {
   const overrides = useAppStore((s) => s.overrides);
   const componentResolving = useAppStore((s) => {
@@ -3786,28 +3884,28 @@ var FieldsInternal = ({ wrapFields = true }) => {
   );
   const isLoading = fieldsLoading || componentResolving;
   const Wrapper = useMemo11(() => overrides.fields || DefaultFields, [overrides]);
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "form",
     {
-      className: getClassName10({ wrapFields }),
+      className: getClassName11({ wrapFields }),
       onSubmit: (e) => {
         e.preventDefault();
       },
       children: [
         /* @__PURE__ */ jsx23(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx23(FieldsChildMemo, { fieldName }, fieldName)) }),
-        isLoading && /* @__PURE__ */ jsx23("div", { className: getClassName10("loadingOverlay"), children: /* @__PURE__ */ jsx23("div", { className: getClassName10("loadingOverlayInner"), children: /* @__PURE__ */ jsx23(Loader, { size: 16 }) }) })
+        isLoading && /* @__PURE__ */ jsx23("div", { className: getClassName11("loadingOverlay"), children: /* @__PURE__ */ jsx23("div", { className: getClassName11("loadingOverlayInner"), children: /* @__PURE__ */ jsx23(Loader, { size: 16 }) }) })
       ]
     }
   );
 };
-var Fields = memo5(FieldsInternal);
+var Fields = memo8(FieldsInternal);
 
-// css-module:/home/crediblemark/Project/Credibuild/plugins/fields/styles.module.css#css-module
-var styles_module_default11 = { "FieldsPlugin": "_FieldsPlugin_6as57_1", "FieldsPlugin-header": "_FieldsPlugin-header_6as57_7" };
+// css-module:/home/runner/work/credbuild/credbuild/plugins/fields/styles.module.css#css-module
+var styles_module_default12 = { "FieldsPlugin": "_FieldsPlugin_6as57_1", "FieldsPlugin-header": "_FieldsPlugin-header_6as57_7" };
 
 // plugins/fields/index.tsx
-import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
-var getClassName11 = get_class_name_factory_default("FieldsPlugin", styles_module_default11);
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+var getClassName12 = get_class_name_factory_default("FieldsPlugin", styles_module_default12);
 var CurrentTitle = () => {
   const label = useAppStore((s) => {
     const selectedItem = s.selectedItem;
@@ -3818,8 +3916,8 @@ var CurrentTitle = () => {
 var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
   name: "fields",
   label: "Fields",
-  render: () => /* @__PURE__ */ jsxs11("div", { className: getClassName11(), children: [
-    /* @__PURE__ */ jsx24("div", { className: getClassName11("header"), children: /* @__PURE__ */ jsx24(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ jsx24(CurrentTitle, {}) }) }),
+  render: () => /* @__PURE__ */ jsxs12("div", { className: getClassName12(), children: [
+    /* @__PURE__ */ jsx24("div", { className: getClassName12("header"), children: /* @__PURE__ */ jsx24(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ jsx24(CurrentTitle, {}) }) }),
     /* @__PURE__ */ jsx24(Fields, {})
   ] }),
   icon: /* @__PURE__ */ jsx24(RectangleEllipsis, {}),
@@ -3831,12 +3929,12 @@ import {
   useCallback as useCallback22,
   useEffect as useEffect23,
   useMemo as useMemo21,
-  useRef as useRef18,
+  useRef as useRef17,
   useState as useState18
 } from "react";
 
 // components/CredBuild/components/Preview/index.tsx
-import { useCallback as useCallback14, useEffect as useEffect15, useRef as useRef12, useMemo as useMemo13 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect15, useRef as useRef11, useMemo as useMemo13 } from "react";
 
 // components/AutoFrame/index.tsx
 import {
@@ -3844,7 +3942,7 @@ import {
   useCallback as useCallback13,
   useContext as useContext9,
   useEffect as useEffect14,
-  useRef as useRef11,
+  useRef as useRef10,
   useState as useState10
 } from "react";
 import hash from "object-hash";
@@ -4086,8 +4184,8 @@ function AutoFrame({
   const handleStylesLoaded = useCallback13(() => {
     setStylesLoaded(true);
   }, []);
-  const onReadyRef = useRef11(onReady);
-  const onNotReadyRef = useRef11(onNotReady);
+  const onReadyRef = useRef10(onReady);
+  const onNotReadyRef = useRef10(onNotReady);
   useEffect14(() => {
     onReadyRef.current = onReady;
     onNotReadyRef.current = onNotReady;
@@ -4138,8 +4236,8 @@ function AutoFrame({
 AutoFrame.displayName = "AutoFrame";
 var AutoFrame_default = AutoFrame;
 
-// css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Preview/styles.module.css#css-module
-var styles_module_default12 = { "CredBuildPreview": "_CredBuildPreview_1z08a_1", "CredBuildPreview-frame": "_CredBuildPreview-frame_1z08a_6" };
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Preview/styles.module.css#css-module
+var styles_module_default13 = { "CredBuildPreview": "_CredBuildPreview_1z08a_1", "CredBuildPreview-frame": "_CredBuildPreview-frame_1z08a_6" };
 
 // lib/bubble-pointer-event.ts
 var BaseEvent = typeof PointerEvent !== "undefined" ? PointerEvent : Event;
@@ -4161,7 +4259,7 @@ var BubbledPointerEvent = class extends BaseEvent {
 
 // components/CredBuild/components/Preview/index.tsx
 import { Fragment as Fragment8, jsx as jsx26 } from "react/jsx-runtime";
-var getClassName12 = get_class_name_factory_default("CredBuildPreview", styles_module_default12);
+var getClassName13 = get_class_name_factory_default("CredBuildPreview", styles_module_default13);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
   useEffect15(() => {
@@ -4233,7 +4331,7 @@ var Preview = ({ id = "credbuild-preview" }) => {
   );
   const Frame = useMemo13(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
-  const ref = useRef12(null);
+  const ref = useRef11(null);
   useBubbleIframeEvents(ref);
   const inner = !renderData ? /* @__PURE__ */ jsx26(
     Page,
@@ -4257,7 +4355,7 @@ var Preview = ({ id = "credbuild-preview" }) => {
   return /* @__PURE__ */ jsx26(
     "div",
     {
-      className: getClassName12(),
+      className: getClassName13(),
       id,
       "data-credbuild-preview": true,
       onClick: (e) => {
@@ -4270,7 +4368,7 @@ var Preview = ({ id = "credbuild-preview" }) => {
         AutoFrame_default,
         {
           id: "preview-frame",
-          className: getClassName12("frame"),
+          className: getClassName13("frame"),
           "data-rfd-iframe": true,
           onReady: () => {
             setStatus("READY");
@@ -4290,7 +4388,7 @@ var Preview = ({ id = "credbuild-preview" }) => {
         "div",
         {
           id: "preview-frame",
-          className: getClassName12("frame"),
+          className: getClassName13("frame"),
           ref,
           "data-credbuild-entry": true,
           children: inner
@@ -4366,8 +4464,8 @@ function PropsProvider(props) {
 }
 var usePropsContext = () => useContext10(propsContext);
 
-// css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Layout/styles.module.css#css-module
-var styles_module_default13 = { "CredBuildLayout": "_CredBuildLayout_14aaz_1", "CredBuildLayout-inner": "_CredBuildLayout-inner_14aaz_8", "CredBuildLayout--leftSideBarVisible": "_CredBuildLayout--leftSideBarVisible_14aaz_29", "CredBuildLayout--rightSideBarVisible": "_CredBuildLayout--rightSideBarVisible_14aaz_33", "CredBuild--hidePlugins": "_CredBuild--hidePlugins_14aaz_37", "CredBuildLayout-item": "_CredBuildLayout-item_14aaz_43", "CredBuildLayout-header": "_CredBuildLayout-header_14aaz_49", "CredBuildLayout-left": "_CredBuildLayout-left_14aaz_54", "CredBuildLayout-editor": "_CredBuildLayout-editor_14aaz_67", "CredBuildLayout-right": "_CredBuildLayout-right_14aaz_75", "CredBuildLayout-sidebar": "_CredBuildLayout-sidebar_14aaz_92", "CredBuildPluginTab": "_CredBuildPluginTab_14aaz_107", "CredBuildPluginTab--visible": "_CredBuildPluginTab--visible_14aaz_114", "CredBuildPluginTab-body": "_CredBuildPluginTab-body_14aaz_118", "CredBuildLayout--mounted": "_CredBuildLayout--mounted_14aaz_134" };
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Layout/styles.module.css#css-module
+var styles_module_default14 = { "CredBuildLayout": "_CredBuildLayout_14aaz_1", "CredBuildLayout-inner": "_CredBuildLayout-inner_14aaz_8", "CredBuildLayout--leftSideBarVisible": "_CredBuildLayout--leftSideBarVisible_14aaz_29", "CredBuildLayout--rightSideBarVisible": "_CredBuildLayout--rightSideBarVisible_14aaz_33", "CredBuild--hidePlugins": "_CredBuild--hidePlugins_14aaz_37", "CredBuildLayout-item": "_CredBuildLayout-item_14aaz_43", "CredBuildLayout-header": "_CredBuildLayout-header_14aaz_49", "CredBuildLayout-left": "_CredBuildLayout-left_14aaz_54", "CredBuildLayout-editor": "_CredBuildLayout-editor_14aaz_67", "CredBuildLayout-right": "_CredBuildLayout-right_14aaz_75", "CredBuildLayout-sidebar": "_CredBuildLayout-sidebar_14aaz_92", "CredBuildPluginTab": "_CredBuildPluginTab_14aaz_107", "CredBuildPluginTab--visible": "_CredBuildPluginTab--visible_14aaz_114", "CredBuildPluginTab-body": "_CredBuildPluginTab-body_14aaz_118", "CredBuildLayout--mounted": "_CredBuildLayout--mounted_14aaz_134" };
 
 // lib/use-inject-css.ts
 import { useEffect as useEffect16, useState as useState11 } from "react";
@@ -4421,7 +4519,7 @@ import {
   useCallback as useCallback16,
   useEffect as useEffect17,
   useMemo as useMemo15,
-  useRef as useRef13,
+  useRef as useRef12,
   useState as useState12
 } from "react";
 import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
@@ -4755,7 +4853,7 @@ import { jsx as jsx29 } from "react/jsx-runtime";
 var DEBUG2 = false;
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout2) => {
-  const lastFallbackDisable = useRef13(null);
+  const lastFallbackDisable = useRef12(null);
   return useCallback16((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
@@ -4775,7 +4873,7 @@ var DragDropContextClient = ({
   const dispatch = useAppStore((s) => s.dispatch);
   const instanceId = useAppStore((s) => s.instanceId);
   const appStore = useAppStoreApi();
-  const debouncedParamsRef = useRef13(null);
+  const debouncedParamsRef = useRef12(null);
   const tempDisableFallback = useTempDisableFallback(100);
   const [zoneStore] = useState12(() => {
     const rootVirtualizers = /* @__PURE__ */ new Map();
@@ -4921,8 +5019,8 @@ var DragDropContextClient = ({
   ]);
   const sensors = useSensors();
   const [dragListeners, setDragListeners] = useState12({});
-  const dragMode = useRef13(null);
-  const initialSelector = useRef13(void 0);
+  const dragMode = useRef12(null);
+  const initialSelector = useRef12(void 0);
   const nextContextValue = useMemo15(
     () => ({
       mode: "edit",
@@ -5178,14 +5276,14 @@ var DragDropContext = ({
 };
 
 // components/CredBuild/components/Header/index.tsx
-import { memo as memo6, useCallback as useCallback17, useMemo as useMemo18, useState as useState14 } from "react";
+import { memo as memo9, useCallback as useCallback17, useMemo as useMemo18, useState as useState14 } from "react";
 
-// css-module:/home/crediblemark/Project/Credibuild/components/MenuBar/styles.module.css#css-module
-var styles_module_default14 = { "MenuBar": "_MenuBar_1m2ld_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_1m2ld_14", "MenuBar-inner": "_MenuBar-inner_1m2ld_29", "MenuBar-history": "_MenuBar-history_1m2ld_45" };
+// css-module:/home/runner/work/credbuild/credbuild/components/MenuBar/styles.module.css#css-module
+var styles_module_default15 = { "MenuBar": "_MenuBar_1m2ld_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_1m2ld_14", "MenuBar-inner": "_MenuBar-inner_1m2ld_29", "MenuBar-history": "_MenuBar-history_1m2ld_45" };
 
 // components/MenuBar/index.tsx
-import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
-var getClassName13 = get_class_name_factory_default("MenuBar", styles_module_default14);
+import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs13 } from "react/jsx-runtime";
+var getClassName14 = get_class_name_factory_default("MenuBar", styles_module_default15);
 function MenuBar({
   menuOpen = false,
   renderHeaderActions,
@@ -5198,7 +5296,7 @@ function MenuBar({
   return /* @__PURE__ */ jsx30(
     "div",
     {
-      className: getClassName13({ menuOpen }),
+      className: getClassName14({ menuOpen }),
       onClick: (event) => {
         const element = event.target;
         if (window.matchMedia("(min-width: 638px)").matches) {
@@ -5208,8 +5306,8 @@ function MenuBar({
           setMenuOpen(false);
         }
       },
-      children: /* @__PURE__ */ jsxs12("div", { className: getClassName13("inner"), children: [
-        /* @__PURE__ */ jsxs12("div", { className: getClassName13("history"), children: [
+      children: /* @__PURE__ */ jsxs13("div", { className: getClassName14("inner"), children: [
+        /* @__PURE__ */ jsxs13("div", { className: getClassName14("history"), children: [
           /* @__PURE__ */ jsx30(
             IconButton,
             {
@@ -5240,19 +5338,19 @@ function MenuBar({
 // components/ViewportControls/index.tsx
 import { useEffect as useEffect18, useMemo as useMemo16, useState as useState13 } from "react";
 
-// css-module:/home/crediblemark/Project/Credibuild/components/ViewportControls/styles.module.css#css-module
-var styles_module_default15 = { "ViewportControls": "_ViewportControls_1e0ai_1", "ViewportControls--fullScreen": "_ViewportControls--fullScreen_1e0ai_5", "ViewportControls-toggleButton": "_ViewportControls-toggleButton_1e0ai_14", "ViewportControls--isExpanded": "_ViewportControls--isExpanded_1e0ai_38", "ViewportControls-actions": "_ViewportControls-actions_1e0ai_42", "ViewportControls-actionsInner": "_ViewportControls-actionsInner_1e0ai_46", "ViewportControls-divider": "_ViewportControls-divider_1e0ai_75", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_1e0ai_81", "ViewportControls-zoom": "_ViewportControls-zoom_1e0ai_81", "ViewportButton-inner": "_ViewportButton-inner_1e0ai_111", "ViewportButton--isActive": "_ViewportButton--isActive_1e0ai_119" };
+// css-module:/home/runner/work/credbuild/credbuild/components/ViewportControls/styles.module.css#css-module
+var styles_module_default16 = { "ViewportControls": "_ViewportControls_gefvg_1", "ViewportControls--fullScreen": "_ViewportControls--fullScreen_gefvg_5", "ViewportControls-toggleButton": "_ViewportControls-toggleButton_gefvg_14", "ViewportControls--isExpanded": "_ViewportControls--isExpanded_gefvg_38", "ViewportControls-actions": "_ViewportControls-actions_gefvg_42", "ViewportControls-actionsInner": "_ViewportControls-actionsInner_gefvg_46", "ViewportControls-divider": "_ViewportControls-divider_gefvg_76", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_gefvg_83", "ViewportControls-zoom": "_ViewportControls-zoom_gefvg_83", "ViewportButton-inner": "_ViewportButton-inner_gefvg_114", "ViewportButton--isActive": "_ViewportButton--isActive_gefvg_122" };
 
 // components/ViewportControls/index.tsx
-import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
 var icons = {
   Smartphone: /* @__PURE__ */ jsx31(Smartphone, { size: 16 }),
   Tablet: /* @__PURE__ */ jsx31(Tablet, { size: 16 }),
   Monitor: /* @__PURE__ */ jsx31(Monitor, { size: 16 }),
   FullWidth: /* @__PURE__ */ jsx31(Expand, { size: 16 })
 };
-var getClassName14 = get_class_name_factory_default("ViewportControls", styles_module_default15);
-var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default15);
+var getClassName15 = get_class_name_factory_default("ViewportControls", styles_module_default16);
+var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default16);
 var ActionButton = ({
   children,
   title,
@@ -5312,13 +5410,13 @@ var ViewportControls = ({
     setActiveViewport(uiViewports.current.width);
   }, [uiViewports.current.width, uiViewports]);
   const [isExpanded, setIsExpanded] = useState13(false);
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
-      className: getClassName14({ isExpanded, fullScreen }),
+      className: getClassName15({ isExpanded, fullScreen }),
       suppressHydrationWarning: true,
       children: [
-        /* @__PURE__ */ jsx31("div", { className: getClassName14("actions"), children: /* @__PURE__ */ jsxs13("div", { className: getClassName14("actionsInner"), children: [
+        /* @__PURE__ */ jsx31("div", { className: getClassName15("actions"), children: /* @__PURE__ */ jsxs14("div", { className: getClassName15("actionsInner"), children: [
           viewports.map((viewport, i) => /* @__PURE__ */ jsx31(
             ActionButton,
             {
@@ -5332,7 +5430,7 @@ var ViewportControls = ({
             },
             i
           )),
-          /* @__PURE__ */ jsx31("div", { className: getClassName14("divider") }),
+          /* @__PURE__ */ jsx31("div", { className: getClassName15("divider") }),
           /* @__PURE__ */ jsx31(
             ActionButton,
             {
@@ -5367,12 +5465,12 @@ var ViewportControls = ({
               children: /* @__PURE__ */ jsx31(ZoomIn, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsxs13("div", { className: getClassName14("zoom"), children: [
-            /* @__PURE__ */ jsx31("div", { className: getClassName14("divider") }),
+          /* @__PURE__ */ jsxs14("div", { className: getClassName15("zoom"), children: [
+            /* @__PURE__ */ jsx31("div", { className: getClassName15("divider") }),
             /* @__PURE__ */ jsx31(
               "select",
               {
-                className: getClassName14("zoomSelect"),
+                className: getClassName15("zoomSelect"),
                 value: zoom.toString(),
                 onClick: (e) => {
                   e.stopPropagation();
@@ -5395,8 +5493,9 @@ var ViewportControls = ({
         /* @__PURE__ */ jsx31(
           "button",
           {
-            className: getClassName14("toggleButton"),
+            className: getClassName15("toggleButton"),
             title: "Toggle viewport menu",
+            "aria-expanded": isExpanded,
             onClick: () => setIsExpanded((s) => !s),
             children: isExpanded ? /* @__PURE__ */ jsx31(X, { size: 16 }) : /* @__PURE__ */ jsx31(Monitor, { size: 16 })
           }
@@ -5413,7 +5512,7 @@ import { useShallow as useShallow6 } from "zustand/react/shallow";
 import {
   createContext as createContext7,
   useContext as useContext12,
-  useRef as useRef14,
+  useRef as useRef13,
   useMemo as useMemo17
 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
@@ -5421,7 +5520,7 @@ var FrameContext = createContext7(null);
 var FrameProvider = ({
   children
 }) => {
-  const frameRef = useRef14(null);
+  const frameRef = useRef13(null);
   const value = useMemo17(
     () => ({
       frameRef
@@ -5438,12 +5537,12 @@ var useCanvasFrame = () => {
   return context;
 };
 
-// css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Header/styles.module.css#css-module
-var styles_module_default16 = { "CredBuildHeader": "_CredBuildHeader_qzv5u_1", "CredBuildHeader-inner": "_CredBuildHeader-inner_qzv5u_20", "CredBuildHeader-viewportTools": "_CredBuildHeader-viewportTools_qzv5u_28", "CredBuildHeader-leftActions": "_CredBuildHeader-leftActions_qzv5u_35", "CredBuildHeader-toggle": "_CredBuildHeader-toggle_qzv5u_41", "CredBuildHeader-leftSideBarToggle": "_CredBuildHeader-leftSideBarToggle_qzv5u_47", "CredBuildHeader-rightSideBarToggle": "_CredBuildHeader-rightSideBarToggle_qzv5u_48", "CredBuildHeader-title": "_CredBuildHeader-title_qzv5u_52", "CredBuildHeader-path": "_CredBuildHeader-path_qzv5u_57", "CredBuildHeader-tools": "_CredBuildHeader-tools_qzv5u_68", "CredBuildHeader-menuButton": "_CredBuildHeader-menuButton_qzv5u_75" };
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Header/styles.module.css#css-module
+var styles_module_default17 = { "CredBuildHeader": "_CredBuildHeader_qzv5u_1", "CredBuildHeader-inner": "_CredBuildHeader-inner_qzv5u_20", "CredBuildHeader-viewportTools": "_CredBuildHeader-viewportTools_qzv5u_28", "CredBuildHeader-leftActions": "_CredBuildHeader-leftActions_qzv5u_35", "CredBuildHeader-toggle": "_CredBuildHeader-toggle_qzv5u_41", "CredBuildHeader-leftSideBarToggle": "_CredBuildHeader-leftSideBarToggle_qzv5u_47", "CredBuildHeader-rightSideBarToggle": "_CredBuildHeader-rightSideBarToggle_qzv5u_48", "CredBuildHeader-title": "_CredBuildHeader-title_qzv5u_52", "CredBuildHeader-path": "_CredBuildHeader-path_qzv5u_57", "CredBuildHeader-tools": "_CredBuildHeader-tools_qzv5u_68", "CredBuildHeader-menuButton": "_CredBuildHeader-menuButton_qzv5u_75" };
 
 // components/CredBuild/components/Header/index.tsx
-import { Fragment as Fragment11, jsx as jsx33, jsxs as jsxs14 } from "react/jsx-runtime";
-var getClassName15 = get_class_name_factory_default("CredBuildHeader", styles_module_default16);
+import { Fragment as Fragment11, jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
+var getClassName16 = get_class_name_factory_default("CredBuildHeader", styles_module_default17);
 var HeaderInner = ({
   hidePlugins,
   theme
@@ -5539,7 +5638,7 @@ var HeaderInner = ({
   return /* @__PURE__ */ jsx33(
     CustomHeader,
     {
-      actions: /* @__PURE__ */ jsx33(Fragment11, { children: /* @__PURE__ */ jsxs14(CustomHeaderActions, { children: [
+      actions: /* @__PURE__ */ jsx33(Fragment11, { children: /* @__PURE__ */ jsxs15(CustomHeaderActions, { children: [
         /* @__PURE__ */ jsx33(
           Button,
           {
@@ -5565,14 +5664,14 @@ var HeaderInner = ({
       children: /* @__PURE__ */ jsx33(
         "header",
         {
-          className: getClassName15({
+          className: getClassName16({
             leftSideBarVisible,
             rightSideBarVisible,
             hidePlugins
           }),
-          children: /* @__PURE__ */ jsxs14("div", { className: getClassName15("inner"), children: [
-            /* @__PURE__ */ jsxs14("div", { className: getClassName15("leftActions"), children: [
-              /* @__PURE__ */ jsxs14("div", { style: { marginRight: "8px", display: "flex", gap: "8px", alignItems: "center" }, children: [
+          children: /* @__PURE__ */ jsxs15("div", { className: getClassName16("inner"), children: [
+            /* @__PURE__ */ jsxs15("div", { className: getClassName16("leftActions"), children: [
+              /* @__PURE__ */ jsxs15("div", { style: { marginRight: "8px", display: "flex", gap: "8px", alignItems: "center" }, children: [
                 /* @__PURE__ */ jsx33(
                   Button,
                   {
@@ -5605,8 +5704,8 @@ var HeaderInner = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs14("div", { className: getClassName15("toggle"), children: [
-                /* @__PURE__ */ jsx33("div", { className: getClassName15("leftSideBarToggle"), children: /* @__PURE__ */ jsx33(
+              /* @__PURE__ */ jsxs15("div", { className: getClassName16("toggle"), children: [
+                /* @__PURE__ */ jsx33("div", { className: getClassName16("leftSideBarToggle"), children: /* @__PURE__ */ jsx33(
                   IconButton,
                   {
                     type: "button",
@@ -5617,7 +5716,7 @@ var HeaderInner = ({
                     children: /* @__PURE__ */ jsx33(PanelLeft, { size: 16, focusable: "false" })
                   }
                 ) }),
-                /* @__PURE__ */ jsx33("div", { className: getClassName15("rightSideBarToggle"), children: /* @__PURE__ */ jsx33(
+                /* @__PURE__ */ jsx33("div", { className: getClassName16("rightSideBarToggle"), children: /* @__PURE__ */ jsx33(
                   IconButton,
                   {
                     type: "button",
@@ -5629,12 +5728,12 @@ var HeaderInner = ({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx33("div", { className: getClassName15("title"), children: /* @__PURE__ */ jsxs14(Heading, { rank: "2", size: "xs", children: [
+              /* @__PURE__ */ jsx33("div", { className: getClassName16("title"), children: /* @__PURE__ */ jsxs15(Heading, { rank: "2", size: "xs", children: [
                 /* @__PURE__ */ jsx33("span", { style: { fontSize: "11px", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }, children: headerTitle || rootTitle || "Page" }),
-                headerPath && /* @__PURE__ */ jsx33(Fragment11, { children: /* @__PURE__ */ jsx33("code", { className: getClassName15("path"), style: { fontSize: "10px", opacity: 0.6, marginLeft: "8px" }, children: headerPath }) })
+                headerPath && /* @__PURE__ */ jsx33(Fragment11, { children: /* @__PURE__ */ jsx33("code", { className: getClassName16("path"), style: { fontSize: "10px", opacity: 0.6, marginLeft: "8px" }, children: headerPath }) })
               ] }) })
             ] }),
-            /* @__PURE__ */ jsx33("div", { className: getClassName15("viewportTools"), children: /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx33("div", { className: getClassName16("viewportTools"), children: /* @__PURE__ */ jsx33(
               ViewportControls,
               {
                 fullScreen: _experimentalFullScreenCanvas,
@@ -5660,8 +5759,8 @@ var HeaderInner = ({
                 }
               }
             ) }),
-            /* @__PURE__ */ jsxs14("div", { className: getClassName15("tools"), children: [
-              /* @__PURE__ */ jsx33("div", { className: getClassName15("menuButton"), children: /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsxs15("div", { className: getClassName16("tools"), children: [
+              /* @__PURE__ */ jsx33("div", { className: getClassName16("menuButton"), children: /* @__PURE__ */ jsx33(
                 IconButton,
                 {
                   type: "button",
@@ -5678,7 +5777,7 @@ var HeaderInner = ({
                   dispatch,
                   onPublish,
                   menuOpen,
-                  renderHeaderActions: () => /* @__PURE__ */ jsxs14(CustomHeaderActions, { children: [
+                  renderHeaderActions: () => /* @__PURE__ */ jsxs15(CustomHeaderActions, { children: [
                     /* @__PURE__ */ jsx33(
                       Button,
                       {
@@ -5711,14 +5810,14 @@ var HeaderInner = ({
     }
   );
 };
-var Header = memo6(HeaderInner);
+var Header = memo9(HeaderInner);
 
-// css-module:/home/crediblemark/Project/Credibuild/components/SidebarSection/styles.module.css#css-module
-var styles_module_default17 = { "SidebarSection": "_SidebarSection_17qyf_1", "SidebarSection-title": "_SidebarSection-title_17qyf_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_17qyf_38", "SidebarSection-content": "_SidebarSection-content_17qyf_42", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_17qyf_51", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_17qyf_80", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_17qyf_51", "SidebarSection-heading": "_SidebarSection-heading_17qyf_92", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_17qyf_96" };
+// css-module:/home/runner/work/credbuild/credbuild/components/SidebarSection/styles.module.css#css-module
+var styles_module_default18 = { "SidebarSection": "_SidebarSection_1w6vl_1", "SidebarSection-title": "_SidebarSection-title_1w6vl_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_1w6vl_38", "SidebarSection-content": "_SidebarSection-content_1w6vl_42", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_1w6vl_51", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_1w6vl_80", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_1w6vl_51", "SidebarSection-heading": "_SidebarSection-heading_1w6vl_92", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_1w6vl_96" };
 
 // components/SidebarSection/index.tsx
-import { jsx as jsx34, jsxs as jsxs15 } from "react/jsx-runtime";
-var getClassName16 = get_class_name_factory_default("SidebarSection", styles_module_default17);
+import { jsx as jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
+var getClassName17 = get_class_name_factory_default("SidebarSection", styles_module_default18);
 var SidebarSection = ({
   children,
   title,
@@ -5727,13 +5826,13 @@ var SidebarSection = ({
   noBorderTop,
   isLoading
 }) => {
-  return /* @__PURE__ */ jsxs15("div", { className: getClassName16({ noBorderTop }), style: { background }, children: [
-    /* @__PURE__ */ jsx34("div", { className: getClassName16("title"), children: /* @__PURE__ */ jsxs15("div", { className: getClassName16("breadcrumbs"), children: [
+  return /* @__PURE__ */ jsxs16("div", { className: getClassName17({ noBorderTop }), style: { background }, children: [
+    /* @__PURE__ */ jsx34("div", { className: getClassName17("title"), children: /* @__PURE__ */ jsxs16("div", { className: getClassName17("breadcrumbs"), children: [
       showBreadcrumbs && /* @__PURE__ */ jsx34(Breadcrumbs, {}),
-      /* @__PURE__ */ jsx34("div", { className: getClassName16("heading"), children: /* @__PURE__ */ jsx34(Heading, { rank: "2", size: "xs", children: title }) })
+      /* @__PURE__ */ jsx34("div", { className: getClassName17("heading"), children: /* @__PURE__ */ jsx34(Heading, { rank: "2", size: "xs", children: title }) })
     ] }) }),
-    /* @__PURE__ */ jsx34("div", { className: getClassName16("content"), children }),
-    isLoading && /* @__PURE__ */ jsx34("div", { className: getClassName16("loadingOverlay"), children: /* @__PURE__ */ jsx34(Loader, { size: 32 }) })
+    /* @__PURE__ */ jsx34("div", { className: getClassName17("content"), children }),
+    isLoading && /* @__PURE__ */ jsx34("div", { className: getClassName17("loadingOverlay"), children: /* @__PURE__ */ jsx34(Loader, { size: 32 }) })
   ] });
 };
 
@@ -5742,17 +5841,17 @@ import {
   useCallback as useCallback18,
   useEffect as useEffect19,
   useMemo as useMemo19,
-  useRef as useRef15,
+  useRef as useRef14,
   useState as useState15
 } from "react";
 
-// css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Canvas/styles.module.css#css-module
-var styles_module_default18 = { "CredBuildCanvas": "_CredBuildCanvas_1ivia_1", "CredBuildCanvas--fullScreen": "_CredBuildCanvas--fullScreen_1ivia_22", "CredBuildCanvas-inner": "_CredBuildCanvas-inner_1ivia_33", "CredBuildCanvas-root": "_CredBuildCanvas-root_1ivia_42", "CredBuildCanvas--ready": "_CredBuildCanvas--ready_1ivia_67", "CredBuildCanvas-loader": "_CredBuildCanvas-loader_1ivia_72", "CredBuildCanvas--showLoader": "_CredBuildCanvas--showLoader_1ivia_82" };
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Canvas/styles.module.css#css-module
+var styles_module_default19 = { "CredBuildCanvas": "_CredBuildCanvas_1ivia_1", "CredBuildCanvas--fullScreen": "_CredBuildCanvas--fullScreen_1ivia_22", "CredBuildCanvas-inner": "_CredBuildCanvas-inner_1ivia_33", "CredBuildCanvas-root": "_CredBuildCanvas-root_1ivia_42", "CredBuildCanvas--ready": "_CredBuildCanvas--ready_1ivia_67", "CredBuildCanvas-loader": "_CredBuildCanvas-loader_1ivia_72", "CredBuildCanvas--showLoader": "_CredBuildCanvas--showLoader_1ivia_82" };
 
 // components/CredBuild/components/Canvas/index.tsx
 import { useShallow as useShallow7 } from "zustand/react/shallow";
-import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
-var getClassName17 = get_class_name_factory_default("CredBuildCanvas", styles_module_default18);
+import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
+var getClassName18 = get_class_name_factory_default("CredBuildCanvas", styles_module_default19);
 var ZOOM_ON_CHANGE = true;
 var TRANSITION_DURATION = 150;
 var Canvas = () => {
@@ -5796,7 +5895,7 @@ var Canvas = () => {
     }))
   );
   const [showTransition, setShowTransition] = useState15(false);
-  const isResizingRef = useRef15(false);
+  const isResizingRef = useRef14(false);
   const defaultRender = useMemo19(() => {
     const CredBuildDefault = ({ children }) => /* @__PURE__ */ jsx35(Fragment12, { children });
     return CredBuildDefault;
@@ -5922,7 +6021,7 @@ var Canvas = () => {
   return /* @__PURE__ */ jsx35(
     "div",
     {
-      className: getClassName17({
+      className: getClassName18({
         ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
         showLoader,
         fullScreen: _experimentalFullScreenCanvas
@@ -5937,11 +6036,11 @@ var Canvas = () => {
           });
         }
       },
-      children: /* @__PURE__ */ jsxs16("div", { className: getClassName17("inner"), ref: frameRef, children: [
+      children: /* @__PURE__ */ jsxs17("div", { className: getClassName18("inner"), ref: frameRef, children: [
         /* @__PURE__ */ jsx35(
           "div",
           {
-            className: getClassName17("root"),
+            className: getClassName18("root"),
             style: {
               width: iframe.enabled ? viewports.current.width : "100%",
               height: !zoomConfig.rootHeight || isNaN(zoomConfig.rootHeight) ? "100%" : zoomConfig.rootHeight,
@@ -5959,17 +6058,17 @@ var Canvas = () => {
             children: /* @__PURE__ */ jsx35(CustomPreview, { children: /* @__PURE__ */ jsx35(Preview, {}) })
           }
         ),
-        /* @__PURE__ */ jsx35("div", { className: getClassName17("loader"), children: /* @__PURE__ */ jsx35(Loader, { size: 24 }) })
+        /* @__PURE__ */ jsx35("div", { className: getClassName18("loader"), children: /* @__PURE__ */ jsx35(Loader, { size: 24 }) })
       ] })
     }
   );
 };
 
 // lib/use-sidebar-resize.ts
-import { useCallback as useCallback19, useEffect as useEffect20, useRef as useRef16, useState as useState16 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect20, useRef as useRef15, useState as useState16 } from "react";
 function useSidebarResize(position, dispatch) {
   const [width, setWidth] = useState16(null);
-  const sidebarRef = useRef16(null);
+  const sidebarRef = useRef15(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
   );
@@ -6047,14 +6146,14 @@ function useSidebarResize(position, dispatch) {
 }
 
 // components/CredBuild/components/ResizeHandle/index.tsx
-import { useCallback as useCallback20, useRef as useRef17 } from "react";
+import { useCallback as useCallback20, useRef as useRef16 } 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" };
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/ResizeHandle/styles.module.css#css-module
+var styles_module_default20 = { "ResizeHandle": "_ResizeHandle_144bf_2", "ResizeHandle--left": "_ResizeHandle--left_144bf_16", "ResizeHandle--right": "_ResizeHandle--right_144bf_20" };
 
 // components/CredBuild/components/ResizeHandle/index.tsx
 import { jsx as jsx36 } from "react/jsx-runtime";
-var getClassName18 = get_class_name_factory_default("ResizeHandle", styles_module_default19);
+var getClassName19 = get_class_name_factory_default("ResizeHandle", styles_module_default20);
 var ResizeHandle = ({
   position,
   sidebarRef,
@@ -6063,10 +6162,10 @@ var ResizeHandle = ({
 }) => {
   const { frameRef } = useCanvasFrame();
   const resetAutoZoom = useResetAutoZoom(frameRef);
-  const handleRef = useRef17(null);
-  const isDragging = useRef17(false);
-  const startX = useRef17(0);
-  const startWidth = useRef17(0);
+  const handleRef = useRef16(null);
+  const isDragging = useRef16(false);
+  const startX = useRef16(0);
+  const startWidth = useRef16(0);
   const handleMouseMove = useCallback20(
     (e) => {
       if (!isDragging.current) return;
@@ -6114,18 +6213,18 @@ var ResizeHandle = ({
     "div",
     {
       ref: handleRef,
-      className: getClassName18({ [position]: true }),
+      className: getClassName19({ [position]: true }),
       onMouseDown: handleMouseDown
     }
   );
 };
 
-// css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Sidebar/styles.module.css#css-module
-var styles_module_default20 = { "Sidebar": "_Sidebar_1kcif_1", "Sidebar--isVisible": "_Sidebar--isVisible_1kcif_13", "Sidebar--left": "_Sidebar--left_1kcif_17", "Sidebar--right": "_Sidebar--right_1kcif_29", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_1kcif_42" };
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Sidebar/styles.module.css#css-module
+var styles_module_default21 = { "Sidebar": "_Sidebar_1kcif_1", "Sidebar--isVisible": "_Sidebar--isVisible_1kcif_13", "Sidebar--left": "_Sidebar--left_1kcif_17", "Sidebar--right": "_Sidebar--right_1kcif_29", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_1kcif_42" };
 
 // components/CredBuild/components/Sidebar/index.tsx
-import { Fragment as Fragment13, jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
-var getClassName19 = get_class_name_factory_default("Sidebar", styles_module_default20);
+import { Fragment as Fragment13, jsx as jsx37, jsxs as jsxs18 } from "react/jsx-runtime";
+var getClassName20 = get_class_name_factory_default("Sidebar", styles_module_default21);
 var Sidebar = ({
   position,
   sidebarRef,
@@ -6134,16 +6233,16 @@ var Sidebar = ({
   onResizeEnd,
   children
 }) => {
-  return /* @__PURE__ */ jsxs17(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs18(Fragment13, { children: [
     /* @__PURE__ */ jsx37(
       "div",
       {
         ref: sidebarRef,
-        className: getClassName19({ [position]: true, isVisible }),
+        className: getClassName20({ [position]: true, isVisible }),
         children
       }
     ),
-    /* @__PURE__ */ jsx37("div", { className: `${getClassName19("resizeHandle")}`, children: /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx37("div", { className: `${getClassName20("resizeHandle")}`, children: /* @__PURE__ */ jsx37(
       ResizeHandle,
       {
         position,
@@ -6213,13 +6312,13 @@ var useDeleteHotkeys = () => {
   useHotkey({ backspace: true }, deleteSelectedComponent);
 };
 
-// css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Nav/styles.module.css#css-module
-var styles_module_default21 = { "Nav": "_Nav_wbh7e_1", "Nav-list": "_Nav-list_wbh7e_9", "CredBuildHeader-path": "_CredBuildHeader-path_wbh7e_20", "NavItem": "_NavItem_wbh7e_38", "NavItem-link": "_NavItem-link_wbh7e_43", "NavItem-linkIcon": "_NavItem-linkIcon_wbh7e_64", "NavItem--active": "_NavItem--active_wbh7e_77", "NavItem--mobileOnly": "_NavItem--mobileOnly_wbh7e_90", "NavItem--desktopOnly": "_NavItem--desktopOnly_wbh7e_95" };
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Nav/styles.module.css#css-module
+var styles_module_default22 = { "Nav": "_Nav_wbh7e_1", "Nav-list": "_Nav-list_wbh7e_9", "CredBuildHeader-path": "_CredBuildHeader-path_wbh7e_20", "NavItem": "_NavItem_wbh7e_38", "NavItem-link": "_NavItem-link_wbh7e_43", "NavItem-linkIcon": "_NavItem-linkIcon_wbh7e_64", "NavItem--active": "_NavItem--active_wbh7e_77", "NavItem--mobileOnly": "_NavItem--mobileOnly_wbh7e_90", "NavItem--desktopOnly": "_NavItem--desktopOnly_wbh7e_95" };
 
 // components/CredBuild/components/Nav/index.tsx
-import { jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
-var getClassName20 = get_class_name_factory_default("Nav", styles_module_default21);
-var getClassNameItem2 = get_class_name_factory_default("NavItem", styles_module_default21);
+import { jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
+var getClassName21 = get_class_name_factory_default("Nav", styles_module_default22);
+var getClassNameItem2 = get_class_name_factory_default("NavItem", styles_module_default22);
 var MenuItem = ({
   label,
   icon,
@@ -6236,7 +6335,7 @@ var MenuItem = ({
         mobileOnly,
         desktopOnly
       }),
-      children: onClick && /* @__PURE__ */ jsxs18("div", { className: getClassNameItem2("link"), onClick, children: [
+      children: onClick && /* @__PURE__ */ jsxs19("div", { className: getClassNameItem2("link"), onClick, children: [
         icon && /* @__PURE__ */ jsx38("span", { className: getClassNameItem2("linkIcon"), children: icon }),
         /* @__PURE__ */ jsx38("span", { className: getClassNameItem2("linkLabel"), children: label })
       ] })
@@ -6247,17 +6346,17 @@ var Nav = ({
   items,
   mobileActions
 }) => {
-  return /* @__PURE__ */ jsxs18("nav", { className: getClassName20(), children: [
-    /* @__PURE__ */ jsx38("ul", { className: getClassName20("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx38(MenuItem, { ...item }, key)) }),
-    mobileActions && /* @__PURE__ */ jsx38("div", { className: getClassName20("mobileActions"), children: mobileActions })
+  return /* @__PURE__ */ jsxs19("nav", { className: getClassName21(), children: [
+    /* @__PURE__ */ jsx38("ul", { className: getClassName21("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx38(MenuItem, { ...item }, key)) }),
+    mobileActions && /* @__PURE__ */ jsx38("div", { className: getClassName21("mobileActions"), children: mobileActions })
   ] });
 };
 
 // components/CredBuild/components/Layout/index.tsx
-import { jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
-var getClassName21 = get_class_name_factory_default("CredBuild", styles_module_default13);
-var getLayoutClassName = get_class_name_factory_default("CredBuildLayout", styles_module_default13);
-var getPluginTabClassName = get_class_name_factory_default("CredBuildPluginTab", styles_module_default13);
+import { jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
+var getClassName22 = get_class_name_factory_default("CredBuild", styles_module_default14);
+var getLayoutClassName = get_class_name_factory_default("CredBuildLayout", styles_module_default14);
+var getPluginTabClassName = get_class_name_factory_default("CredBuildPluginTab", styles_module_default14);
 var FieldSideBar = () => {
   const title = useAppStore(
     (s) => s.selectedItem ? s.config.components[s.selectedItem.type]?.["label"] ?? s.selectedItem.type.toString() : s.config.root?.label || "Page"
@@ -6438,10 +6537,10 @@ var Layout = ({ children }) => {
   const mobilePanelExpanded = useAppStore(
     (s) => s.state.ui.mobilePanelExpanded ?? false
   );
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
-      className: `CredBuild ${theme === "dark" ? "dark" : ""} ${getClassName21({
+      className: `CredBuild ${theme === "dark" ? "dark" : ""} ${getClassName22({
         hidePlugins: hasLegacySideBarPlugin
       })}`,
       "data-theme": theme,
@@ -6460,14 +6559,14 @@ var Layout = ({ children }) => {
               mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content"
             }),
             style: { height: typeof height === "number" && isNaN(height) ? void 0 : height },
-            children: /* @__PURE__ */ jsxs19(
+            children: /* @__PURE__ */ jsxs20(
               "div",
               {
                 className: getLayoutClassName("inner"),
                 style: layoutOptions,
                 children: [
                   /* @__PURE__ */ jsx39("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsx39(Header, { theme, hidePlugins: hasLegacySideBarPlugin }) }),
-                  /* @__PURE__ */ jsxs19(
+                  /* @__PURE__ */ jsxs20(
                     Sidebar,
                     {
                       position: "left",
@@ -6526,7 +6625,7 @@ var Layout = ({ children }) => {
             )
           }
         ) }) }) }),
-        /* @__PURE__ */ jsx39("div", { id: "credbuild-portal-root", className: getClassName21("portal") })
+        /* @__PURE__ */ jsx39("div", { id: "credbuild-portal-root", className: getClassName22("portal") })
       ]
     }
   );
@@ -6695,7 +6794,7 @@ function CredBuildProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = useRef18(null);
+  const previousData = useRef17(null);
   useEffect23(() => {
     return appStore.subscribe(
       (s) => s.state.data,
@@ -6728,10 +6827,10 @@ CredBuild.Outline = Outline;
 CredBuild.Preview = Preview;
 
 // plugins/legacy-side-bar/index.tsx
-import { jsx as jsx41, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
 var legacySideBarPlugin = () => ({
   name: "legacy-side-bar",
-  render: () => /* @__PURE__ */ jsxs20("div", { style: { overflowY: "auto" }, children: [
+  render: () => /* @__PURE__ */ jsxs21("div", { style: { overflowY: "auto" }, children: [
     /* @__PURE__ */ jsx41(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx41(Components, {}) }),
     /* @__PURE__ */ jsx41(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx41(Outline, {}) })
   ] })