@crediblemark/build 0.24.5 → 0.24.6

package/dist/{chunk-5VWWS4RS.mjs → chunk-AMHAYK37.mjs}

@@ -1,13 +1,13 @@
 import {
   LoadedRichTextMenu
-} from "./chunk-6RPYD5IO.mjs";
+} from "./chunk-YE4FXNJW.mjs";
 import {
   DragIcon,
   collisionStore,
   createDynamicCollisionDetector,
   setDeep,
   useSensors
-} from "./chunk-BQW2NTNG.mjs";
+} from "./chunk-QBCQ7LDT.mjs";
 import {
   AutoFieldPrivate,
   Button,
@@ -16,7 +16,7 @@ import {
   fieldContextStore,
   useContextStore,
   useSafeId
-} from "./chunk-H2LU4EW3.mjs";
+} from "./chunk-WDTSUNWU.mjs";
 import {
   RichTextRenderFallback,
   SlotRender,
@@ -30,7 +30,7 @@ import {
   ActionBar,
   IconButton,
   Loader
-} from "./chunk-VBNE6GK2.mjs";
+} from "./chunk-5JSNFZKX.mjs";
 import {
   Box,
   ChartColumn,
@@ -85,7 +85,7 @@ import {
   useRegisterHistorySlice,
   useRegisterPermissionsSlice,
   useResetAutoZoom
-} from "./chunk-GIUKL443.mjs";
+} from "./chunk-XLNVCM4Q.mjs";
 import {
   getItem,
   insert,
@@ -126,11 +126,372 @@ var overrideKeys = [
   "preview"
 ];
 
+// components/AutoField/fields/SliderField/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SliderField = ({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  unit = "px",
+  defaultValue = 0,
+  useUnits = true
+}) => {
+  const parseValue = (val) => {
+    if (typeof val === "number") return val;
+    if (typeof val === "string") return parseFloat(val);
+    return 0;
+  };
+  const inputValue = value !== void 0 && value !== null ? value : defaultValue;
+  const numericValue = parseValue(inputValue);
+  const extractUnit = (val) => {
+    if (!useUnits) return "";
+    if (typeof val === "string") {
+      const match = val.replace(/[0-9.-]/g, "");
+      return match || unit;
+    }
+    return unit;
+  };
+  const currentUnit = extractUnit(inputValue);
+  const handleChange = (e) => {
+    const newVal = parseFloat(e.target.value);
+    if (isNaN(newVal)) return;
+    if (useUnits) {
+      onChange(`${newVal}${currentUnit}`);
+    } else {
+      onChange(newVal);
+    }
+  };
+  const handleUnitChange = (e) => {
+    const newUnit = e.target.value;
+    onChange(`${numericValue}${newUnit}`);
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "8px 0" }, children: [
+    /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `
+                .cb-slider-input {
+                    -webkit-appearance: none;
+                    width: 100%;
+                    height: 3px;
+                    background: var(--cb-border, #e2e8f0);
+                    border-radius: 2px;
+                    outline: none;
+                    margin: 8px 0;
+                }
+                .cb-slider-input::-webkit-slider-thumb {
+                    -webkit-appearance: none;
+                    appearance: none;
+                    width: 12px;
+                    height: 12px;
+                    background: var(--cb-gold, #d97706);
+                    cursor: pointer;
+                    border-radius: 50%;
+                    border: 2px solid var(--cb-bg-surface, #fff);
+                    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+                    transition: all 0.2s ease;
+                }
+                .cb-slider-input::-webkit-slider-thumb:hover {
+                    transform: scale(1.15);
+                }
+                .cb-number-input:focus, .cb-select-input:focus {
+                    border-color: var(--cb-gold) !important;
+                    outline: none !important;
+                }
+            ` } }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min,
+          max,
+          step,
+          value: numericValue,
+          onChange: handleChange,
+          className: "cb-slider-input",
+          style: { flex: 1, cursor: "pointer" }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "2px" }, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            min,
+            max,
+            step,
+            value: numericValue,
+            onChange: handleChange,
+            className: "cb-number-input",
+            style: {
+              width: "48px",
+              padding: "3px 4px",
+              borderRadius: "3px",
+              border: "1px solid var(--cb-border, #e2e8f0)",
+              background: "var(--cb-bg-base, #f8fafc)",
+              color: "var(--cb-silver, #0f172a)",
+              fontSize: "10px",
+              fontWeight: "500",
+              textAlign: "center",
+              transition: "all 0.2s ease"
+            }
+          }
+        ),
+        useUnits && /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: currentUnit,
+            onChange: handleUnitChange,
+            className: "cb-select-input",
+            style: {
+              width: "42px",
+              padding: "2px",
+              borderRadius: "3px",
+              border: "1px solid var(--cb-border, #e2e8f0)",
+              background: "var(--cb-bg-base, #f8fafc)",
+              color: "var(--cb-silver, #0f172a)",
+              fontSize: "9px",
+              fontWeight: "500",
+              cursor: "pointer",
+              transition: "all 0.2s ease"
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "px", children: "px" }),
+              /* @__PURE__ */ jsx("option", { value: "%", children: "%" }),
+              /* @__PURE__ */ jsx("option", { value: "vh", children: "vh" }),
+              /* @__PURE__ */ jsx("option", { value: "vw", children: "vw" }),
+              /* @__PURE__ */ jsx("option", { value: "em", children: "em" }),
+              /* @__PURE__ */ jsx("option", { value: "rem", children: "rem" })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
+// 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" }),
+  /* @__PURE__ */ jsx2("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+  /* @__PURE__ */ jsx2("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+] });
+var TabletIcon = () => /* @__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: "4", y: "2", width: "16", height: "20", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx2("line", { x1: "12", y1: "18", x2: "12.01", y2: "18" })
+] });
+var MobileIcon = () => /* @__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: "5", y: "2", width: "14", height: "20", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx2("line", { x1: "12", y1: "18", x2: "12.01", y2: "18" })
+] });
+var ResponsiveSliderField = ({
+  value = {},
+  onChange,
+  label,
+  unit = "px",
+  max = 100,
+  min = 0,
+  step = 1,
+  defaultValue = 0
+}) => {
+  const [mode, setMode] = useState("desktop");
+  const getCurrentValue = () => {
+    const val = value?.[mode];
+    if (val !== void 0 && val !== null) {
+      return val;
+    }
+    if (mode === "tablet" && value?.desktop !== void 0) return value.desktop;
+    if (mode === "mobile") {
+      if (value?.tablet !== void 0) return value.tablet;
+      if (value?.desktop !== void 0) return value.desktop;
+    }
+    if (typeof defaultValue === "number") return defaultValue;
+    const def = defaultValue;
+    const defVal = def?.[mode];
+    if (defVal !== void 0) return defVal;
+    if (mode === "tablet" && def?.desktop !== void 0) return def.desktop;
+    if (mode === "mobile") {
+      if (def?.tablet !== void 0) return def.tablet;
+      if (def?.desktop !== void 0) return def.desktop;
+    }
+    return 0;
+  };
+  const handleChange = (newVal) => {
+    onChange({
+      ...value,
+      [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,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { style: {
+        display: "flex",
+        backgroundColor: "var(--cb-bg-panel, #f1f5f9)",
+        borderRadius: "4px",
+        padding: "1px",
+        border: "1px solid var(--cb-border, #e2e8f0)"
+      }, children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: () => setMode("desktop"),
+            style: {
+              padding: "2px 5px",
+              border: "none",
+              background: mode === "desktop" ? "var(--cb-bg-surface, #fff)" : "transparent",
+              boxShadow: mode === "desktop" ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
+              borderRadius: "3px",
+              cursor: "pointer",
+              color: mode === "desktop" ? "var(--cb-gold, #d97706)" : "var(--cb-silver-muted, #a1a1aa)",
+              display: "flex",
+              alignItems: "center",
+              transition: "all 0.1s ease"
+            },
+            title: "Desktop",
+            children: /* @__PURE__ */ jsx2(DesktopIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: () => setMode("tablet"),
+            style: {
+              padding: "2px 5px",
+              border: "none",
+              background: mode === "tablet" ? "var(--cb-bg-surface, #fff)" : "transparent",
+              boxShadow: mode === "tablet" ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
+              borderRadius: "3px",
+              cursor: "pointer",
+              color: mode === "tablet" ? "var(--cb-gold, #d97706)" : "var(--cb-silver-muted, #a1a1aa)",
+              display: "flex",
+              alignItems: "center",
+              transition: "all 0.1s ease"
+            },
+            title: "Tablet",
+            children: /* @__PURE__ */ jsx2(TabletIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: () => setMode("mobile"),
+            style: {
+              padding: "2px 5px",
+              border: "none",
+              background: mode === "mobile" ? "var(--cb-bg-surface, #fff)" : "transparent",
+              boxShadow: mode === "mobile" ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
+              borderRadius: "3px",
+              cursor: "pointer",
+              color: mode === "mobile" ? "var(--cb-gold, #d97706)" : "var(--cb-silver-muted, #a1a1aa)",
+              display: "flex",
+              alignItems: "center",
+              transition: "all 0.1s ease"
+            },
+            title: "Mobile",
+            children: /* @__PURE__ */ jsx2(MobileIcon, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2(
+      SliderField,
+      {
+        value: getCurrentValue(),
+        onChange: handleChange,
+        unit,
+        max,
+        min,
+        step,
+        useUnits: false
+      }
+    )
+  ] });
+};
+
+// components/AutoField/fields/ColorPickerField/index.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var ColorPickerField = ({ value, onChange }) => {
+  const safeValue = value || "#ffffff";
+  return /* @__PURE__ */ jsxs3("div", { style: { padding: "4px 0", display: "flex", gap: "6px", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx3("div", { style: {
+      position: "relative",
+      width: "28px",
+      height: "28px",
+      borderRadius: "3px",
+      border: "1px solid var(--cb-border, #e2e8f0)",
+      overflow: "hidden",
+      flexShrink: 0,
+      background: "var(--cb-bg-base, #f8fafc)"
+    }, children: /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type: "color",
+        value: safeValue.startsWith("#") ? safeValue : "#000000",
+        onChange: (e) => {
+          if (e.target.value !== value) {
+            onChange(e.target.value);
+          }
+        },
+        style: {
+          position: "absolute",
+          top: "-50%",
+          left: "-50%",
+          width: "200%",
+          height: "200%",
+          cursor: "pointer",
+          border: "none",
+          padding: 0,
+          margin: 0
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type: "text",
+        value: value || "",
+        placeholder: "#RRGGBB",
+        onChange: (e) => onChange(e.target.value),
+        style: {
+          flex: 1,
+          padding: "4px 8px",
+          borderRadius: "3px",
+          border: "1px solid var(--cb-border, #e2e8f0)",
+          background: "var(--cb-bg-base, #f8fafc)",
+          color: "var(--cb-silver, #0f172a)",
+          fontSize: "11px",
+          fontFamily: "var(--cb-font-mono, 'JetBrains Mono', monospace)",
+          fontWeight: "500",
+          height: "28px",
+          transition: "all 0.1s ease"
+        }
+      }
+    )
+  ] });
+};
+
 // css-module:/home/crediblemark/Project/Credibuild/components/Drawer/styles.module.css#css-module
 var styles_module_default = { "Drawer": "_Drawer_e1509_1", "Drawer-draggable": "_Drawer-draggable_e1509_7", "Drawer-draggableBg": "_Drawer-draggableBg_e1509_11", "DrawerItem-draggable": "_DrawerItem-draggable_e1509_21", "DrawerItem--disabled": "_DrawerItem--disabled_e1509_34", "DrawerItem": "_DrawerItem_e1509_21", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_e1509_43", "DrawerItem-default": "_DrawerItem-default_e1509_44", "DrawerItem-name": "_DrawerItem-name_e1509_61" };
 
 // components/Drawer/index.tsx
-import { useMemo, useState } from "react";
+import { useMemo, useState as useState2 } from "react";
 
 // components/DragDropContext/context.tsx
 import {
@@ -171,7 +532,7 @@ function useDragListener(type, fn, deps = []) {
 
 // components/Drawer/index.tsx
 import { useDraggable, useDroppable } from "@dnd-kit/react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var getClassName = get_class_name_factory_default("Drawer", styles_module_default);
 var getClassNameItem = get_class_name_factory_default("DrawerItem", styles_module_default);
 var DrawerItemInner = ({
@@ -182,10 +543,10 @@ var DrawerItemInner = ({
   isDragDisabled
 }) => {
   const CustomInner = useMemo(
-    () => children || (({ children: children2 }) => /* @__PURE__ */ jsx("div", { className: getClassNameItem("default"), children: children2 })),
+    () => children || (({ children: children2 }) => /* @__PURE__ */ jsx4("div", { className: getClassNameItem("default"), children: children2 })),
     [children]
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       className: getClassNameItem({ disabled: isDragDisabled }),
@@ -193,9 +554,9 @@ var DrawerItemInner = ({
       onMouseDown: (e) => e.preventDefault(),
       "data-testid": dragRef ? `drawer-item:${name}` : "",
       "data-credbuild-drawer-item": true,
-      children: /* @__PURE__ */ jsx(CustomInner, { name, children: /* @__PURE__ */ jsx("div", { className: getClassNameItem("draggableWrapper"), children: /* @__PURE__ */ jsxs("div", { className: getClassNameItem("draggable"), children: [
-        /* @__PURE__ */ jsx("div", { className: getClassNameItem("name"), children: label ?? name }),
-        /* @__PURE__ */ jsx("div", { className: getClassNameItem("icon"), children: /* @__PURE__ */ jsx(DragIcon, {}) })
+      children: /* @__PURE__ */ jsx4(CustomInner, { name, children: /* @__PURE__ */ jsx4("div", { className: getClassNameItem("draggableWrapper"), children: /* @__PURE__ */ jsxs4("div", { className: getClassNameItem("draggable"), children: [
+        /* @__PURE__ */ jsx4("div", { className: getClassNameItem("name"), children: label ?? name }),
+        /* @__PURE__ */ jsx4("div", { className: getClassNameItem("icon"), children: /* @__PURE__ */ jsx4(DragIcon, {}) })
       ] }) }) })
     }
   );
@@ -213,9 +574,9 @@ var DrawerItemDraggable = ({
     disabled: isDragDisabled,
     type: "drawer"
   });
-  return /* @__PURE__ */ jsxs("div", { className: getClassName("draggable"), children: [
-    /* @__PURE__ */ jsx("div", { className: getClassName("draggableBg"), children: /* @__PURE__ */ jsx(DrawerItemInner, { name, label, children }) }),
-    /* @__PURE__ */ jsx("div", { className: getClassName("draggableFg"), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs4("div", { className: getClassName("draggable"), children: [
+    /* @__PURE__ */ jsx4("div", { className: getClassName("draggableBg"), children: /* @__PURE__ */ jsx4(DrawerItemInner, { name, label, children }) }),
+    /* @__PURE__ */ jsx4("div", { className: getClassName("draggableFg"), children: /* @__PURE__ */ jsx4(
       DrawerItemInner,
       {
         name,
@@ -236,7 +597,7 @@ var DrawerItem = ({
   isDragDisabled
 }) => {
   const resolvedId = id || name;
-  const [dynamicId, setDynamicId] = useState(generateId(resolvedId));
+  const [dynamicId, setDynamicId] = useState2(generateId(resolvedId));
   if (typeof index !== "undefined") {
     console.error(
       "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
@@ -249,7 +610,7 @@ var DrawerItem = ({
     },
     [resolvedId]
   );
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
     DrawerItemDraggable,
     {
       name,
@@ -282,7 +643,7 @@ var Drawer = ({
     collisionPriority: 0
     // Never collide with this, but we use it so NestedDroppablePlugin respects the Drawer
   });
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       className: getClassName(),
@@ -362,7 +723,7 @@ import {
   useLayoutEffect,
   useMemo as useMemo3,
   useRef as useRef2,
-  useState as useState2,
+  useState as useState3,
   useTransition
 } from "react";
 
@@ -379,7 +740,7 @@ import {
   useMemo as useMemo2
 } from "react";
 import { createStore } from "zustand";
-import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
 var dropZoneContext = createContext2(null);
 var ZoneStoreContext = createContext2(
   createStore(() => ({
@@ -402,7 +763,7 @@ var ZoneStoreProvider = ({
   children,
   store
 }) => {
-  return /* @__PURE__ */ jsx2(ZoneStoreContext.Provider, { value: store, children });
+  return /* @__PURE__ */ jsx5(ZoneStoreContext.Provider, { value: store, children });
 };
 var DropZoneProvider = ({
   children,
@@ -425,7 +786,7 @@ var DropZoneProvider = ({
     }),
     [value, registerZone]
   );
-  return /* @__PURE__ */ jsx2(Fragment, { children: memoValue && /* @__PURE__ */ jsx2(dropZoneContext.Provider, { value: memoValue, children }) });
+  return /* @__PURE__ */ jsx5(Fragment, { children: memoValue && /* @__PURE__ */ jsx5(dropZoneContext.Provider, { value: memoValue, children }) });
 };
 
 // lib/get-deep-scroll-position.ts
@@ -496,7 +857,7 @@ function assignRefs(refs, node) {
 }
 
 // components/DraggableComponent/index.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var getClassName2 = get_class_name_factory_default("DraggableComponent", styles_module_default2);
 var DEBUG = false;
 var MEASURE_EVERY_MS = 100;
@@ -508,16 +869,16 @@ var DefaultActionBar = ({
   label,
   children,
   parentAction
-}) => /* @__PURE__ */ jsxs2(ActionBar, { children: [
-  /* @__PURE__ */ jsxs2(ActionBar.Group, { children: [
+}) => /* @__PURE__ */ jsxs5(ActionBar, { children: [
+  /* @__PURE__ */ jsxs5(ActionBar.Group, { children: [
     parentAction,
-    label && /* @__PURE__ */ jsx3(ActionBar.Label, { label })
+    label && /* @__PURE__ */ jsx6(ActionBar.Label, { label })
   ] }),
-  /* @__PURE__ */ jsx3(ActionBar.Group, { children })
+  /* @__PURE__ */ jsx6(ActionBar.Group, { children })
 ] });
 var DefaultOverlay = ({
   children
-}) => /* @__PURE__ */ jsx3(Fragment2, { children });
+}) => /* @__PURE__ */ jsx6(Fragment2, { children });
 var DraggableComponent = ({
   children,
   depth,
@@ -545,7 +906,7 @@ var DraggableComponent = ({
   const iframe = useAppStore((s) => s.iframe);
   const lastMeasureRef = useRef2(0);
   const ctx = useContext2(dropZoneContext);
-  const [localZones, setLocalZones] = useState2({});
+  const [localZones, setLocalZones] = useState3({});
   const registerLocalZone = useCallback3(
     (zoneCompound2, active) => {
       ctx?.registerLocalZone?.(zoneCompound2, active);
@@ -578,7 +939,7 @@ var DraggableComponent = ({
     })
   );
   const zoneStore = useContext2(ZoneStoreContext);
-  const [dragAxis, setDragAxis] = useState2(userDragAxis || autoDragAxis);
+  const [dragAxis, setDragAxis] = useState3(userDragAxis || autoDragAxis);
   const dynamicCollisionDetector = useMemo3(
     () => createDynamicCollisionDetector(dragAxis),
     [dragAxis]
@@ -627,7 +988,7 @@ var DraggableComponent = ({
     }
     return cleanup;
   }, [permissions.drag, zoneCompound, sortable.draggable, sortable.droppable, zoneStore]);
-  const [, setRerender] = useState2(0);
+  const [, setRerender] = useState3(0);
   const ref = useRef2(null);
   const refSetter = useCallback3(
     (el) => {
@@ -642,7 +1003,7 @@ var DraggableComponent = ({
     },
     [itemRef, sortableRef]
   );
-  const [portalEl, setPortalEl] = useState2();
+  const [portalEl, setPortalEl] = useState3();
   useEffect2(() => {
     setPortalEl(
       iframe.enabled ? ref.current?.ownerDocument.body : ref.current?.closest("[data-credbuild-preview]") ?? document.body
@@ -679,7 +1040,7 @@ var DraggableComponent = ({
     };
     return style2;
   }, [iframe.enabled]);
-  const [style, setStyle] = useState2();
+  const [style, setStyle] = useState3();
   const lastRectRef = useRef2(null);
   const syncRafRef = useRef2(null);
   const sync = useCallback3(() => {
@@ -810,7 +1171,7 @@ var DraggableComponent = ({
       zone: zoneCompound
     });
   }, [index, zoneCompound, dispatch]);
-  const [hover, setHover] = useState2(false);
+  const [hover, setHover] = useState3(false);
   const indicativeHover = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === id
@@ -862,8 +1223,8 @@ var DraggableComponent = ({
     zoneStore,
     id
   ]);
-  const [isVisible, setIsVisible] = useState2(false);
-  const [dragFinished, setDragFinished] = useState2(true);
+  const [isVisible, setIsVisible] = useState3(false);
+  const [dragFinished, setDragFinished] = useState3(true);
   const [_, startTransition] = useTransition();
   useEffect2(() => {
     startTransition(() => {
@@ -876,7 +1237,7 @@ var DraggableComponent = ({
       }
     });
   }, [hover, indicativeHover, isSelected, iframe, scheduleSync]);
-  const [thisWasDragging, setThisWasDragging] = useState2(false);
+  const [thisWasDragging, setThisWasDragging] = useState3(false);
   const onDragFinished = useOnDragFinished(
     useCallback3(
       (finished) => {
@@ -977,7 +1338,7 @@ var DraggableComponent = ({
     setDragAxis(autoDragAxis);
   }, [ref, userDragAxis, autoDragAxis]);
   const parentAction = useMemo3(
-    () => ctx?.areaId && ctx?.areaId !== "root" && /* @__PURE__ */ jsx3(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ jsx3(CornerLeftUp, { size: 16 }) }),
+    () => ctx?.areaId && ctx?.areaId !== "root" && /* @__PURE__ */ jsx6(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ jsx6(CornerLeftUp, { size: 16 }) }),
     [ctx?.areaId, onSelectParent]
   );
   const nextContextValue = useMemo3(
@@ -1004,9 +1365,9 @@ var DraggableComponent = ({
     (s) => s.currentRichText?.inlineComponentId === id ? s.currentRichText : null
   );
   const hasNormalActions = permissions.duplicate || permissions.delete;
-  return /* @__PURE__ */ jsxs2(DropZoneProvider, { value: nextContextValue, children: [
+  return /* @__PURE__ */ jsxs5(DropZoneProvider, { value: nextContextValue, children: [
     dragFinished && isVisible && createPortal(
-      /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsxs5(
         "div",
         {
           className: getClassName2({
@@ -1018,15 +1379,15 @@ var DraggableComponent = ({
           "data-credbuild-overlay": true,
           children: [
             debug,
-            isLoading && /* @__PURE__ */ jsx3("div", { className: getClassName2("loadingOverlay"), children: /* @__PURE__ */ jsx3(Loader, {}) }),
-            /* @__PURE__ */ jsx3(
+            isLoading && /* @__PURE__ */ jsx6("div", { className: getClassName2("loadingOverlay"), children: /* @__PURE__ */ jsx6(Loader, {}) }),
+            /* @__PURE__ */ jsx6(
               "div",
               {
                 className: getClassName2("actionsOverlay"),
                 style: {
                   top: actionsOverlayTop / zoom
                 },
-                children: /* @__PURE__ */ jsx3(
+                children: /* @__PURE__ */ jsx6(
                   "div",
                   {
                     className: getClassName2("actions"),
@@ -1038,14 +1399,14 @@ var DraggableComponent = ({
                       paddingRight: actionsSide
                     },
                     ref: syncActionsPosition,
-                    children: /* @__PURE__ */ jsxs2(
+                    children: /* @__PURE__ */ jsxs5(
                       CustomActionBar,
                       {
                         parentAction,
                         label: DEBUG ? id : label,
                         children: [
-                          richText && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-                            /* @__PURE__ */ jsx3(
+                          richText && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                            /* @__PURE__ */ jsx6(
                               LoadedRichTextMenu,
                               {
                                 editor: richText.editor,
@@ -1054,10 +1415,10 @@ var DraggableComponent = ({
                                 readOnly: false
                               }
                             ),
-                            hasNormalActions && /* @__PURE__ */ jsx3(ActionBar.Separator, {})
+                            hasNormalActions && /* @__PURE__ */ jsx6(ActionBar.Separator, {})
                           ] }),
-                          permissions.duplicate && /* @__PURE__ */ jsx3(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx3(Copy, { size: 16 }) }),
-                          permissions.delete && /* @__PURE__ */ jsx3(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx3(Trash, { size: 16 }) })
+                          permissions.duplicate && /* @__PURE__ */ jsx6(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx6(Copy, { size: 16 }) }),
+                          permissions.delete && /* @__PURE__ */ jsx6(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx6(Trash, { size: 16 }) })
                         ]
                       }
                     )
@@ -1065,14 +1426,14 @@ var DraggableComponent = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsx3("div", { className: getClassName2("overlayWrapper"), children: /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx6("div", { className: getClassName2("overlayWrapper"), children: /* @__PURE__ */ jsx6(
               CustomOverlay,
               {
                 componentId: id,
                 componentType,
                 hover,
                 isSelected,
-                children: /* @__PURE__ */ jsx3("div", { className: getClassName2("overlay") })
+                children: /* @__PURE__ */ jsx6("div", { className: getClassName2("overlay") })
               }
             ) })
           ]
@@ -1092,7 +1453,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 useState3 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
 var getNumItems = (appStore, zoneCompound) => appStore.getState().state.indexes.zones[zoneCompound].contentIds.length;
 var useMinEmptyHeight = ({
   zoneCompound,
@@ -1100,8 +1461,8 @@ var useMinEmptyHeight = ({
   ref
 }) => {
   const appStore = useAppStoreApi();
-  const [prevHeight, setPrevHeight] = useState3(0);
-  const [isAnimating, setIsAnimating] = useState3(false);
+  const [prevHeight, setPrevHeight] = useState4(0);
+  const [isAnimating, setIsAnimating] = useState4(false);
   const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
     return {
       draggedItem: s.draggedItem?.data.zone === zoneCompound ? s.draggedItem : null,
@@ -1155,7 +1516,7 @@ var useMinEmptyHeight = ({
 };
 
 // components/DropZone/lib/use-content-with-preview.ts
-import { useCallback as useCallback6, useContext as useContext3, useEffect as useEffect4, useState as useState4 } from "react";
+import { useCallback as useCallback6, useContext as useContext3, useEffect as useEffect4, useState as useState5 } from "react";
 
 // lib/dnd/use-rendered-callback.ts
 import { useDragDropManager } from "@dnd-kit/react";
@@ -1179,8 +1540,8 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
     (s) => s.previewIndex[zoneCompound]
   );
   const isDragging = useAppStore((s) => s.state.ui.isDragging);
-  const [contentIdsWithPreview, setContentIdsWithPreview] = useState4(contentIds);
-  const [localPreview, setLocalPreview] = useState4(
+  const [contentIdsWithPreview, setContentIdsWithPreview] = useState5(contentIds);
+  const [localPreview, setLocalPreview] = useState5(
     preview
   );
   const updateContent = useRenderedCallback(
@@ -1233,13 +1594,13 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
 };
 
 // components/DropZone/lib/use-drag-axis.ts
-import { useCallback as useCallback7, useEffect as useEffect5, useState as useState5 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect5, useState as useState6 } 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] = useState5(
+  const [dragAxis, setDragAxis] = useState6(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
   const calculateDragAxis = useCallback7(() => {
@@ -1271,8 +1632,8 @@ var useDragAxis = (ref, collisionAxis) => {
 import { useShallow as useShallow3 } from "zustand/react/shallow";
 
 // components/Render/context.tsx
-import React2 from "react";
-var renderContext = React2.createContext({
+import React3 from "react";
+var renderContext = React3.createContext({
   config: { components: {} },
   data: { root: {}, content: [] },
   metadata: {}
@@ -1280,7 +1641,7 @@ var renderContext = React2.createContext({
 
 // components/SlotRender/index.tsx
 import { useShallow as useShallow2 } from "zustand/react/shallow";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var ContextSlotRender = ({
   componentId,
   zone
@@ -1294,7 +1655,7 @@ var ContextSlotRender = ({
       return contentIds.map((contentId) => indexes.nodes[contentId].flatData);
     })
   );
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx7(
     SlotRenderPure,
     {
       content: slotContent,
@@ -1347,7 +1708,7 @@ function useFieldTransformsTracked(config, item, transforms, readOnly, forceRead
 }
 
 // components/InlineTextField/index.tsx
-import { memo, useEffect as useEffect6, useRef as useRef5, useState as useState6 } from "react";
+import { memo, useEffect as useEffect6, useRef as useRef5, useState as useState7 } from "react";
 
 // css-module:/home/crediblemark/Project/Credibuild/components/InlineTextField/styles.module.css#css-module
 var styles_module_default4 = { "InlineTextField": "_InlineTextField_104qp_1" };
@@ -1362,7 +1723,7 @@ var getSelectorForId = (state, id) => {
 };
 
 // components/InlineTextField/index.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var getClassName3 = get_class_name_factory_default("InlineTextField", styles_module_default4);
 var InlineTextFieldInternal = ({
   propPath,
@@ -1419,9 +1780,9 @@ var InlineTextFieldInternal = ({
       };
     }
   }, [appStoreApi, ref, value, disableLineBreaks, componentId, propPath]);
-  const [isHovering, setIsHovering] = useState6(false);
-  const [isFocused, setIsFocused] = useState6(false);
-  return /* @__PURE__ */ jsx5(
+  const [isHovering, setIsHovering] = useState7(false);
+  const [isFocused, setIsFocused] = useState7(false);
+  return /* @__PURE__ */ jsx8(
     "span",
     {
       className: getClassName3(),
@@ -1460,11 +1821,11 @@ var InlineTextFieldInternal = ({
 var InlineTextField = memo(InlineTextFieldInternal);
 
 // lib/field-transforms/default-transforms/inline-text-transform.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var getInlineTextTransform = () => ({
   text: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable) {
-      return /* @__PURE__ */ jsx6(
+      return /* @__PURE__ */ jsx9(
         InlineTextField,
         {
           propPath,
@@ -1479,7 +1840,7 @@ var getInlineTextTransform = () => ({
   },
   textarea: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable) {
-      return /* @__PURE__ */ jsx6(
+      return /* @__PURE__ */ jsx9(
         InlineTextField,
         {
           propPath,
@@ -1493,7 +1854,7 @@ var getInlineTextTransform = () => ({
   },
   custom: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable && typeof value === "string") {
-      return /* @__PURE__ */ jsx6(
+      return /* @__PURE__ */ jsx9(
         InlineTextField,
         {
           propPath,
@@ -1516,9 +1877,9 @@ import {
   lazy,
   Suspense
 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var Editor = lazy(
-  () => import("./Editor-HOZVZZIZ.mjs").then((m) => ({
+  () => import("./Editor-3EPLDK4J.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -1595,7 +1956,7 @@ var InlineEditorWrapper = memo2(
       [field, componentId, appStoreApi, id]
     );
     if (!field.contentEditable)
-      return /* @__PURE__ */ jsx7(Suspense, { fallback: /* @__PURE__ */ jsx7(RichTextRenderFallback, { content: value }), children: /* @__PURE__ */ jsx7(RichTextRender, { content: value, field }) });
+      return /* @__PURE__ */ jsx10(Suspense, { fallback: /* @__PURE__ */ jsx10(RichTextRenderFallback, { content: value }), children: /* @__PURE__ */ jsx10(RichTextRender, { content: value, field }) });
     const editorProps = {
       content: value,
       onChange: handleChange,
@@ -1605,13 +1966,13 @@ var InlineEditorWrapper = memo2(
       id,
       name: propPath
     };
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx10(
       "div",
       {
         ref: portalRef,
         onClick: onClickHandler,
         onClickCapture: onClickCaptureHandler,
-        children: /* @__PURE__ */ jsx7(Suspense, { fallback: /* @__PURE__ */ jsx7(EditorFallback, { ...editorProps }), children: /* @__PURE__ */ jsx7(Editor, { ...editorProps }) })
+        children: /* @__PURE__ */ jsx10(Suspense, { fallback: /* @__PURE__ */ jsx10(EditorFallback, { ...editorProps }), children: /* @__PURE__ */ jsx10(Editor, { ...editorProps }) })
       }
     );
   }
@@ -1621,10 +1982,10 @@ var getRichTextTransform = () => ({
   richtext: ({ value, componentId, field, propPath, isReadOnly }) => {
     const { contentEditable = true, tiptap } = field;
     if (contentEditable === false || isReadOnly) {
-      return /* @__PURE__ */ jsx7(RichTextRender, { content: value, field });
+      return /* @__PURE__ */ jsx10(RichTextRender, { content: value, field });
     }
     const id = `${componentId}_${field.type}_${propPath}`;
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx10(
       InlineEditorWrapper,
       {
         value,
@@ -1666,12 +2027,12 @@ function shallowEqual(obj1, obj2, keysToIgnore = []) {
 }
 
 // components/MemoizeComponent/index.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var RenderComponent = ({
   Component,
   componentProps: renderProps
 }) => {
-  return /* @__PURE__ */ jsx8(Component, { ...renderProps });
+  return /* @__PURE__ */ jsx11(Component, { ...renderProps });
 };
 var MemoizeComponent = memo3(RenderComponent, (prev, next) => {
   let credbuildEquals = true;
@@ -1711,7 +2072,7 @@ var getFrame = () => {
 };
 
 // components/DropZone/VirtualizedDropZone.tsx
-import { Fragment as Fragment3, jsx as jsx9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12 } from "react/jsx-runtime";
 var ROOT_ZONE_VIRTUALIZATION_OVERSCAN = 5;
 var DEFAULT_VIRTUALIZED_ITEM_HEIGHT = 320;
 var measuredItemHeights = /* @__PURE__ */ new Map();
@@ -1849,7 +2210,7 @@ var VirtualizedDropZone = ({
       const gapSize = Math.max(virtualItem.start - previousEnd, 0);
       if (gapSize > 0) {
         items.push(
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx12(
             "div",
             {
               style: { height: `${gapSize}px` }
@@ -1871,7 +2232,7 @@ var VirtualizedDropZone = ({
     const trailingGap = Math.max(totalSize - previousEnd, 0);
     if (trailingGap > 0) {
       items.push(
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx12(
           "div",
           {
             style: { height: `${trailingGap}px` }
@@ -1882,11 +2243,11 @@ var VirtualizedDropZone = ({
     }
     return items;
   }, [totalSize, virtualItems, getMeasureRef, contentIds, renderItem]);
-  return /* @__PURE__ */ jsx9(Fragment3, { children: renderedItems });
+  return /* @__PURE__ */ jsx12(Fragment3, { children: renderedItems });
 };
 
 // components/DropZone/index.tsx
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 var getClassName4 = get_class_name_factory_default("DropZone", styles_module_default3);
 var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 var RENDER_DEBUG = false;
@@ -1898,12 +2259,12 @@ var InsertPreview = ({
   if (element) {
     return (
       // Safe to use this since the HTML is set by the user
-      /* @__PURE__ */ jsx10("div", { dangerouslySetInnerHTML: { __html: element.outerHTML } })
+      /* @__PURE__ */ jsx13("div", { dangerouslySetInnerHTML: { __html: element.outerHTML } })
     );
   }
-  return /* @__PURE__ */ jsx10(DrawerItemInner, { name: label, children: override });
+  return /* @__PURE__ */ jsx13(DrawerItemInner, { name: label, children: override });
 };
-var DropZoneEditPure = (props) => /* @__PURE__ */ jsx10(DropZoneEdit, { ...props });
+var DropZoneEditPure = (props) => /* @__PURE__ */ jsx13(DropZoneEdit, { ...props });
 var DropZoneChild = ({
   zoneCompound,
   componentId,
@@ -1987,7 +2348,7 @@ var DropZoneChild = ({
   const userFieldTransforms = useAppStore((s) => s.fieldTransforms);
   const combinedFieldTransforms = useMemo6(
     () => ({
-      ...getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ jsx10(ContextSlotRender, { componentId, zone: slotProps.zone })),
+      ...getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ jsx13(ContextSlotRender, { componentId, zone: slotProps.zone })),
       ...getInlineTextTransform(),
       ...getRichTextTransform(),
       ...plugins.reduce(
@@ -2006,13 +2367,13 @@ var DropZoneChild = ({
     isLoading
   );
   if (!item) return;
-  const Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ jsxs3("div", { style: { padding: 48, textAlign: "center" }, children: [
+  const Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ jsxs6("div", { style: { padding: 48, textAlign: "center" }, children: [
     "No configuration for ",
     item.type
   ] });
   let componentType = item.type;
   const isInserting = "previewType" in item ? item.previewType === "insert" : false;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx13(
     DraggableComponent,
     {
       id: componentId,
@@ -2029,7 +2390,7 @@ var DropZoneChild = ({
       itemRef,
       children: (dragRef) => {
         if (componentConfig?.inline && !isInserting) {
-          return /* @__PURE__ */ jsx10(
+          return /* @__PURE__ */ jsx13(
             MemoizeComponent,
             {
               Component: Render2,
@@ -2040,14 +2401,14 @@ var DropZoneChild = ({
             }
           );
         }
-        return /* @__PURE__ */ jsx10("div", { ref: dragRef, children: isInserting ? /* @__PURE__ */ jsx10(
+        return /* @__PURE__ */ jsx13("div", { ref: dragRef, children: isInserting ? /* @__PURE__ */ jsx13(
           InsertPreview,
           {
             label,
             override: overrides.componentItem ?? overrides.drawerItem,
             element: "element" in item && item.element ? item.element : void 0
           }
-        ) : /* @__PURE__ */ jsx10(
+        ) : /* @__PURE__ */ jsx13(
           MemoizeComponent,
           {
             Component: Render2,
@@ -2216,7 +2577,7 @@ var DropZoneEdit = forwardRef(
     const El = as ?? "div";
     const isRootAreaZone = (areaId ?? rootAreaId) === rootAreaId && depth === 0;
     const shouldVirtualizeItems = _experimentalVirtualization && isRootAreaZone;
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx13(
       El,
       {
         className: `${getClassName4({
@@ -2235,12 +2596,12 @@ var DropZoneEdit = forwardRef(
           "--min-empty-height": minEmptyHeight,
           backgroundColor: RENDER_DEBUG ? getRandomColor() : style?.backgroundColor
         },
-        children: shouldVirtualizeItems ? /* @__PURE__ */ jsx10(
+        children: shouldVirtualizeItems ? /* @__PURE__ */ jsx13(
           VirtualizedDropZone,
           {
             contentIds: contentIdsWithPreview,
             zoneCompound,
-            renderItem: (props) => /* @__PURE__ */ jsx10(
+            renderItem: (props) => /* @__PURE__ */ jsx13(
               DropZoneChildMemo,
               {
                 zoneCompound,
@@ -2254,7 +2615,7 @@ var DropZoneEdit = forwardRef(
               props.componentId
             )
           }
-        ) : contentIdsWithPreview.map((componentId, i) => /* @__PURE__ */ jsx10(
+        ) : contentIdsWithPreview.map((componentId, i) => /* @__PURE__ */ jsx13(
           DropZoneChildMemo,
           {
             zoneCompound,
@@ -2276,7 +2637,7 @@ var DropZoneRenderItem = ({
   metadata
 }) => {
   const Component = config.components[item.type];
-  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx10(SlotRenderPure, { ...slotProps, config, metadata }));
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx13(SlotRenderPure, { ...slotProps, config, metadata }));
   const nextContextValue = useMemo6(
     () => ({
       areaId: props.id,
@@ -2285,7 +2646,7 @@ var DropZoneRenderItem = ({
     [props]
   );
   const richtextProps = useRichtextProps(Component.fields, props);
-  return /* @__PURE__ */ jsx10(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx13(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx13(
     Component.render,
     {
       ...props,
@@ -2298,7 +2659,7 @@ var DropZoneRenderItem = ({
     }
   ) }, props.id);
 };
-var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx10(DropZoneRender, { ...props });
+var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx13(DropZoneRender, { ...props });
 var DropZoneRender = forwardRef(
   function DropZoneRenderInternal({ className, style, zone, as }, ref) {
     const ctx = useContext5(dropZoneContext);
@@ -2322,10 +2683,10 @@ var DropZoneRender = forwardRef(
     if (!data || !config) {
       return null;
     }
-    return /* @__PURE__ */ jsx10(El, { className, style, ref, children: content.map((item) => {
+    return /* @__PURE__ */ jsx13(El, { className, style, ref, children: content.map((item) => {
       const Component = config.components[item.type];
       if (Component) {
-        return /* @__PURE__ */ jsx10(
+        return /* @__PURE__ */ jsx13(
           DropZoneRenderItem,
           {
             config,
@@ -2339,20 +2700,20 @@ var DropZoneRender = forwardRef(
     }) });
   }
 );
-var DropZonePure = (props) => /* @__PURE__ */ jsx10(DropZone, { ...props });
+var DropZonePure = (props) => /* @__PURE__ */ jsx13(DropZone, { ...props });
 var DropZone = forwardRef(
   function DropZone2(props, ref) {
     const ctx = useContext5(dropZoneContext);
     if (ctx?.mode === "edit") {
-      return /* @__PURE__ */ jsx10(Fragment4, { children: /* @__PURE__ */ jsx10(DropZoneEdit, { ...props, ref }) });
+      return /* @__PURE__ */ jsx13(Fragment4, { children: /* @__PURE__ */ jsx13(DropZoneEdit, { ...props, ref }) });
     }
-    return /* @__PURE__ */ jsx10(Fragment4, { children: /* @__PURE__ */ jsx10(DropZoneRender, { ...props, ref }) });
+    return /* @__PURE__ */ jsx13(Fragment4, { children: /* @__PURE__ */ jsx13(DropZoneRender, { ...props, ref }) });
   }
 );
 
 // components/Render/index.tsx
 import { useMemo as useMemo7 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function Render({
   config,
   data,
@@ -2380,7 +2741,7 @@ function Render({
   const propsWithSlots = useSlots(
     config,
     { type: "root", props: pageProps },
-    (props) => /* @__PURE__ */ jsx11(SlotRender, { ...props, config, metadata })
+    (props) => /* @__PURE__ */ jsx14(SlotRender, { ...props, config, metadata })
   );
   const richtextProps = useRichtextProps(config.root?.fields, pageProps);
   const nextContextValue = useMemo7(
@@ -2391,13 +2752,13 @@ function Render({
     []
   );
   if (config.root?.render) {
-    return /* @__PURE__ */ jsx11(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx11(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx11(config.root.render, { ...propsWithSlots, ...richtextProps, children: /* @__PURE__ */ jsx11(DropZoneRenderPure, { zone: rootZone }) }) }) });
+    return /* @__PURE__ */ jsx14(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx14(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx14(config.root.render, { ...propsWithSlots, ...richtextProps, children: /* @__PURE__ */ jsx14(DropZoneRenderPure, { zone: rootZone }) }) }) });
   }
-  return /* @__PURE__ */ jsx11(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx11(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx11(DropZoneRenderPure, { zone: rootZone }) }) });
+  return /* @__PURE__ */ jsx14(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx14(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx14(DropZoneRenderPure, { zone: rootZone }) }) });
 }
 
 // lib/use-credbuild.ts
-import { createContext as createContext3, useContext as useContext6, useEffect as useEffect10, useState as useState7 } from "react";
+import { createContext as createContext3, useContext as useContext6, useEffect as useEffect10, useState as useState8 } from "react";
 import { createStore as createStore2, useStore } from "zustand";
 
 // lib/data/resolve-and-replace-data.ts
@@ -2505,7 +2866,7 @@ var convertToPickedStore = (store) => {
   };
 };
 var useRegisterUseCredBuildStore = (appStore) => {
-  const [useCredBuildStore] = useState7(
+  const [useCredBuildStore] = useState8(
     () => createStore2(
       () => generateUseCredBuild(
         convertToPickedStore(appStore.getState()),
@@ -2555,7 +2916,7 @@ function useGetCredBuild() {
 }
 
 // lib/use-component-list.tsx
-import { useEffect as useEffect12, useState as useState8 } from "react";
+import { useEffect as useEffect12, useState as useState9 } from "react";
 
 // css-module:/home/crediblemark/Project/Credibuild/components/ComponentList/styles.module.css#css-module
 var styles_module_default5 = { "ComponentList": "_ComponentList_1jl8i_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1jl8i_5", "ComponentList-content": "_ComponentList-content_1jl8i_9", "ComponentList-title": "_ComponentList-title_1jl8i_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_1jl8i_53" };
@@ -2563,7 +2924,7 @@ var styles_module_default5 = { "ComponentList": "_ComponentList_1jl8i_1", "Compo
 // components/ComponentList/index.tsx
 import { useEffect as useEffect11, useRef as useRef9 } from "react";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var getClassName5 = get_class_name_factory_default("ComponentList", styles_module_default5);
 var ComponentListItem = ({
   name,
@@ -2582,7 +2943,7 @@ var ComponentListItem = ({
       );
     }
   }, [overrides]);
-  return /* @__PURE__ */ jsx12(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: overrides.componentItem ?? overrides.drawerItem });
+  return /* @__PURE__ */ jsx15(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: overrides.componentItem ?? overrides.drawerItem });
 };
 var ComponentList = ({
   children,
@@ -2602,8 +2963,8 @@ var ComponentList = ({
     // Estimated height of each item
     overscan: 5
   });
-  return /* @__PURE__ */ jsxs4("div", { className: getClassName5({ isExpanded: expanded }), children: [
-    title && /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs7("div", { className: getClassName5({ isExpanded: expanded }), children: [
+    title && /* @__PURE__ */ jsxs7(
       "button",
       {
         type: "button",
@@ -2618,20 +2979,20 @@ var ComponentList = ({
           }
         }),
         children: [
-          /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-            id.toLowerCase().includes("hero") && /* @__PURE__ */ jsx12(LayoutTemplate, { size: 12, strokeWidth: 2.5 }),
-            id.toLowerCase().includes("content") && /* @__PURE__ */ jsx12(FileText, { size: 12, strokeWidth: 2.5 }),
-            id.toLowerCase().includes("marketing") && /* @__PURE__ */ jsx12(Megaphone, { size: 12, strokeWidth: 2.5 }),
-            id.toLowerCase().includes("layout") && /* @__PURE__ */ jsx12(Box, { size: 12, strokeWidth: 2.5 }),
-            id.toLowerCase().includes("basic") && /* @__PURE__ */ jsx12(Settings, { size: 12, strokeWidth: 2.5 }),
-            id === "other" && /* @__PURE__ */ jsx12(Layers, { size: 12, strokeWidth: 2.5 }),
-            /* @__PURE__ */ jsx12("div", { children: title?.replace(/[\u2600-\u27BF]|[\uD83C][\uDF00-\uDFFF]|[\uD83D][\uDC00-\uDE4F]|[\uD83D][\uDE80-\uDEFF]/g, "").trim() })
+          /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            id.toLowerCase().includes("hero") && /* @__PURE__ */ jsx15(LayoutTemplate, { size: 12, strokeWidth: 2.5 }),
+            id.toLowerCase().includes("content") && /* @__PURE__ */ jsx15(FileText, { size: 12, strokeWidth: 2.5 }),
+            id.toLowerCase().includes("marketing") && /* @__PURE__ */ jsx15(Megaphone, { size: 12, strokeWidth: 2.5 }),
+            id.toLowerCase().includes("layout") && /* @__PURE__ */ jsx15(Box, { size: 12, strokeWidth: 2.5 }),
+            id.toLowerCase().includes("basic") && /* @__PURE__ */ jsx15(Settings, { size: 12, strokeWidth: 2.5 }),
+            id === "other" && /* @__PURE__ */ jsx15(Layers, { size: 12, strokeWidth: 2.5 }),
+            /* @__PURE__ */ jsx15("div", { children: title?.replace(/[\u2600-\u27BF]|[\uD83C][\uDF00-\uDFFF]|[\uD83D][\uDC00-\uDE4F]|[\uD83D][\uDE80-\uDEFF]/g, "").trim() })
           ] }),
-          /* @__PURE__ */ jsx12("div", { className: getClassName5("titleIcon"), children: expanded ? /* @__PURE__ */ jsx12(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx12(ChevronDown, { size: 12 }) })
+          /* @__PURE__ */ jsx15("div", { className: getClassName5("titleIcon"), children: expanded ? /* @__PURE__ */ jsx15(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx15(ChevronDown, { size: 12 }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx15(
       "div",
       {
         ref: parentRef,
@@ -2641,7 +3002,7 @@ var ComponentList = ({
           overflowY: "auto",
           transition: "max-height 0.3s ease-in-out"
         },
-        children: /* @__PURE__ */ jsx12(
+        children: /* @__PURE__ */ jsx15(
           "div",
           {
             style: {
@@ -2649,9 +3010,9 @@ var ComponentList = ({
               width: "100%",
               position: "relative"
             },
-            children: /* @__PURE__ */ jsx12(Drawer, { children: children || virtualizer.getVirtualItems().map((virtualItem) => {
+            children: /* @__PURE__ */ jsx15(Drawer, { children: children || virtualizer.getVirtualItems().map((virtualItem) => {
               const componentKey = components[virtualItem.index];
-              return /* @__PURE__ */ jsx12(
+              return /* @__PURE__ */ jsx15(
                 "div",
                 {
                   style: {
@@ -2662,7 +3023,7 @@ var ComponentList = ({
                     height: `${virtualItem.size}px`,
                     transform: `translateY(${virtualItem.start}px)`
                   },
-                  children: /* @__PURE__ */ jsx12(
+                  children: /* @__PURE__ */ jsx15(
                     ComponentListItem,
                     {
                       label: config.components[componentKey]["label"] ?? componentKey,
@@ -2682,9 +3043,9 @@ var ComponentList = ({
 ComponentList.Item = ComponentListItem;
 
 // lib/use-component-list.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var useComponentList = () => {
-  const [componentList, setComponentList] = useState8();
+  const [componentList, setComponentList] = useState9();
   const config = useAppStore((s) => s.config);
   const uiComponentList = useAppStore((s) => s.state.ui.componentList);
   useEffect12(() => {
@@ -2702,14 +3063,14 @@ var useComponentList = () => {
           if (category.visible === false) {
             return null;
           }
-          return /* @__PURE__ */ jsx13(
+          return /* @__PURE__ */ jsx16(
             ComponentList,
             {
               id: categoryKey,
               title: category.title || categoryKey,
               children: category.components.map((componentName, i) => {
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx13(
+                return /* @__PURE__ */ jsx16(
                   ComponentList.Item,
                   {
                     label: componentConf["label"] ?? componentName,
@@ -2729,14 +3090,14 @@ var useComponentList = () => {
       );
       if (remainingComponents.length > 0 && !uiComponentList.other?.components && uiComponentList.other?.visible !== false) {
         _componentList.push(
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx16(
             ComponentList,
             {
               id: "other",
               title: uiComponentList.other?.title || "Other",
               children: remainingComponents.map((componentName, i) => {
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx13(
+                return /* @__PURE__ */ jsx16(
                   ComponentList.Item,
                   {
                     name: componentName,
@@ -2759,7 +3120,7 @@ var useComponentList = () => {
 
 // components/CredBuild/components/Components/index.tsx
 import { useMemo as useMemo8 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var Components = () => {
   const overrides = useAppStore((s) => s.overrides);
   const componentList = useComponentList();
@@ -2771,20 +3132,20 @@ var Components = () => {
     }
     return overrides.components || overrides.drawer || "div";
   }, [overrides]);
-  return /* @__PURE__ */ jsx14(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx14(ComponentList, { id: "all" }) });
+  return /* @__PURE__ */ jsx17(Wrapper, { children: 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" };
 
 // plugins/blocks/index.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var getClassName6 = get_class_name_factory_default("BlocksPlugin", styles_module_default6);
 var blocksPlugin = () => ({
   name: "blocks",
   label: "Blocks",
-  render: () => /* @__PURE__ */ jsx15("div", { className: getClassName6(), children: /* @__PURE__ */ jsx15(Components, {}) }),
-  icon: /* @__PURE__ */ jsx15(Shapes, {})
+  render: () => /* @__PURE__ */ jsx18("div", { className: getClassName6(), children: /* @__PURE__ */ jsx18(Components, {}) }),
+  icon: /* @__PURE__ */ jsx18(Shapes, {})
 });
 
 // css-module:/home/crediblemark/Project/Credibuild/components/LayerTree/styles.module.css#css-module
@@ -2798,7 +3159,7 @@ import {
   useRef as useRef10
 } from "react";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
+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);
 var DEFAULT_LAYER_ROW_HEIGHT = 32;
@@ -2922,19 +3283,19 @@ var Layer = forwardRef2(function Layer2({
   const shouldRenderChildren = isSelected || childIsSelected;
   const getLayerIcon = (type) => {
     const t = type.toLowerCase();
-    if (t === "text" || t === "heading" || t.includes("heading")) return /* @__PURE__ */ jsx16(Type, { size: "14", strokeWidth: 2.5 });
-    if (t.includes("hero")) return /* @__PURE__ */ jsx16(LayoutTemplate, { size: "14", strokeWidth: 2.5 });
-    if (t.includes("pricing")) return /* @__PURE__ */ jsx16(CreditCard, { size: "14", strokeWidth: 2.5 });
-    if (t.includes("stats")) return /* @__PURE__ */ jsx16(ChartColumn, { size: "14", strokeWidth: 2.5 });
-    if (t.includes("testimonials")) return /* @__PURE__ */ jsx16(Quote, { size: "14", strokeWidth: 2.5 });
-    if (t.includes("about") || t.includes("info")) return /* @__PURE__ */ jsx16(Info, { size: "14", strokeWidth: 2.5 });
-    if (t.includes("gallery") || t.includes("image")) return /* @__PURE__ */ jsx16(Image, { size: "14", strokeWidth: 2.5 });
-    if (t.includes("marketing") || t.includes("cta")) return /* @__PURE__ */ jsx16(Megaphone, { size: "14", strokeWidth: 2.5 });
-    if (t.includes("content") || t.includes("blog")) return /* @__PURE__ */ jsx16(FileText, { size: "14", strokeWidth: 2.5 });
-    if (t.includes("container") || t.includes("layout") || t.includes("flex")) return /* @__PURE__ */ jsx16(Box, { size: "14", strokeWidth: 2.5 });
-    return /* @__PURE__ */ jsx16(LayoutGrid, { size: "14", strokeWidth: 2.5 });
+    if (t === "text" || t === "heading" || t.includes("heading")) return /* @__PURE__ */ jsx19(Type, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("hero")) return /* @__PURE__ */ jsx19(LayoutTemplate, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("pricing")) return /* @__PURE__ */ jsx19(CreditCard, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("stats")) return /* @__PURE__ */ jsx19(ChartColumn, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("testimonials")) return /* @__PURE__ */ jsx19(Quote, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("about") || t.includes("info")) return /* @__PURE__ */ jsx19(Info, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("gallery") || t.includes("image")) return /* @__PURE__ */ jsx19(Image, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("marketing") || t.includes("cta")) return /* @__PURE__ */ jsx19(Megaphone, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("content") || t.includes("blog")) return /* @__PURE__ */ jsx19(FileText, { size: "14", strokeWidth: 2.5 });
+    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__ */ jsxs5(
+  return /* @__PURE__ */ jsxs8(
     "li",
     {
       ref,
@@ -2947,7 +3308,7 @@ var Layer = forwardRef2(function Layer2({
       "data-index": dataIndex,
       "data-credbuild-layer-tree-id": node.itemId,
       children: [
-        /* @__PURE__ */ jsx16("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsx19("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs8(
           "button",
           {
             type: "button",
@@ -2972,26 +3333,26 @@ var Layer = forwardRef2(function Layer2({
               zoneStore.setState({ hoveringComponent: null });
             },
             children: [
-              containsZone && /* @__PURE__ */ jsx16(
+              containsZone && /* @__PURE__ */ jsx19(
                 "div",
                 {
                   className: getClassNameLayer("chevron"),
                   title: isSelected ? "Collapse" : "Expand",
-                  children: /* @__PURE__ */ jsx16(ChevronDown, { size: "12" })
+                  children: /* @__PURE__ */ jsx19(ChevronDown, { size: "12" })
                 }
               ),
-              /* @__PURE__ */ jsxs5("div", { className: getClassNameLayer("title"), children: [
-                /* @__PURE__ */ jsx16("div", { className: getClassNameLayer("icon"), children: getLayerIcon(node.componentType) }),
-                /* @__PURE__ */ jsx16("div", { className: getClassNameLayer("name"), children: node.label })
+              /* @__PURE__ */ jsxs8("div", { className: getClassNameLayer("title"), children: [
+                /* @__PURE__ */ jsx19("div", { className: getClassNameLayer("icon"), children: getLayerIcon(node.componentType) }),
+                /* @__PURE__ */ jsx19("div", { className: getClassNameLayer("name"), children: node.label })
               ] })
             ]
           }
         ) }),
-        containsZone && shouldRenderChildren && node.childZones.map((childZone) => /* @__PURE__ */ jsx16(
+        containsZone && shouldRenderChildren && node.childZones.map((childZone) => /* @__PURE__ */ jsx19(
           "div",
           {
             className: getClassNameLayer("zones"),
-            children: /* @__PURE__ */ jsx16(
+            children: /* @__PURE__ */ jsx19(
               LayerTreeZone,
               {
                 depth: depth + 1,
@@ -3014,12 +3375,12 @@ var LayerTreeZone = ({
   tree
 }) => {
   const shouldVirtualize = depth === 0 && tree.items.length >= MIN_VIRTUALIZED_LAYER_COUNT;
-  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
-    tree.label && /* @__PURE__ */ jsxs5("div", { className: getClassName7("zoneTitle"), children: [
-      /* @__PURE__ */ jsx16("div", { className: getClassName7("zoneIcon"), children: /* @__PURE__ */ jsx16(Layers, { size: "16" }) }),
+  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" }) }),
       tree.label
     ] }),
-    shouldVirtualize ? /* @__PURE__ */ jsx16(
+    shouldVirtualize ? /* @__PURE__ */ jsx19(
       VirtualizedLayerTreeItems,
       {
         depth,
@@ -3027,7 +3388,7 @@ var LayerTreeZone = ({
         selectedPathIds,
         tree
       }
-    ) : /* @__PURE__ */ jsx16(
+    ) : /* @__PURE__ */ jsx19(
       StaticLayerTreeItems,
       {
         depth,
@@ -3044,9 +3405,9 @@ var StaticLayerTreeItems = ({
   selectedPathIds,
   tree
 }) => {
-  return /* @__PURE__ */ jsxs5("ul", { className: getClassName7(), children: [
-    tree.items.length === 0 && /* @__PURE__ */ jsx16("div", { className: getClassName7("helper"), children: "No items" }),
-    tree.items.map((node) => /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs8("ul", { className: getClassName7(), children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx19("div", { className: getClassName7("helper"), children: "No items" }),
+    tree.items.map((node) => /* @__PURE__ */ jsx19(
       Layer,
       {
         childIsSelected: selectedPathIds.has(node.itemId),
@@ -3092,7 +3453,7 @@ var VirtualizedLayerTreeItems = ({
     const gapSize = Math.max(virtualItem.start - previousEnd, 0);
     if (gapSize > 0) {
       renderedItems.push(
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx19(
           "li",
           {
             "aria-hidden": "true",
@@ -3103,7 +3464,7 @@ var VirtualizedLayerTreeItems = ({
       );
     }
     renderedItems.push(
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx19(
         Layer,
         {
           childIsSelected: selectedPathIds.has(node.itemId),
@@ -3124,7 +3485,7 @@ var VirtualizedLayerTreeItems = ({
   const trailingGap = Math.max(totalSize - previousEnd, 0);
   if (trailingGap > 0) {
     renderedItems.push(
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx19(
         "li",
         {
           "aria-hidden": "true",
@@ -3134,8 +3495,8 @@ var VirtualizedLayerTreeItems = ({
       )
     );
   }
-  return /* @__PURE__ */ jsxs5("ul", { className: getClassName7(), ref: listRef, children: [
-    tree.items.length === 0 && /* @__PURE__ */ jsx16("div", { className: getClassName7("helper"), children: "No items" }),
+  return /* @__PURE__ */ jsxs8("ul", { className: getClassName7(), ref: listRef, children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx19("div", { className: getClassName7("helper"), children: "No items" }),
     renderedItems
   ] });
 };
@@ -3144,7 +3505,7 @@ var LayerTree = ({
   selectedPathIds,
   trees
 }) => {
-  return /* @__PURE__ */ jsx16(Fragment5, { children: trees.map((tree) => /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx19(Fragment5, { children: trees.map((tree) => /* @__PURE__ */ jsx19(
     LayerTreeZone,
     {
       depth: 0,
@@ -3168,7 +3529,7 @@ var findZonesForArea = (state, area) => {
 
 // components/CredBuild/components/Outline/index.tsx
 import { useShallow as useShallow4 } from "zustand/react/shallow";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var Outline = () => {
   const outlineOverride = useAppStore((s) => s.overrides.outline);
   const config = useAppStore((s) => s.config);
@@ -3197,7 +3558,7 @@ var Outline = () => {
     [config, nodes, rootZones, zones]
   );
   const Wrapper = useMemo9(() => outlineOverride || "div", [outlineOverride]);
-  return /* @__PURE__ */ jsx17(Wrapper, { children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx20(Wrapper, { children: /* @__PURE__ */ jsx20(
     LayerTree,
     {
       selectedId,
@@ -3211,13 +3572,13 @@ var Outline = () => {
 var styles_module_default8 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
 
 // plugins/outline/index.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var getClassName8 = get_class_name_factory_default("OutlinePlugin", styles_module_default8);
 var outlinePlugin = () => ({
   name: "outline",
   label: "Outline",
-  render: () => /* @__PURE__ */ jsx18("div", { className: getClassName8(), children: /* @__PURE__ */ jsx18(Outline, {}) }),
-  icon: /* @__PURE__ */ jsx18(List, {})
+  render: () => /* @__PURE__ */ jsx21("div", { className: getClassName8(), children: /* @__PURE__ */ jsx21(Outline, {}) }),
+  icon: /* @__PURE__ */ jsx21(List, {})
 });
 
 // css-module:/home/crediblemark/Project/Credibuild/components/Breadcrumbs/styles.module.css#css-module
@@ -3260,7 +3621,7 @@ var useBreadcrumbs = (renderCount) => {
 };
 
 // components/Breadcrumbs/index.tsx
-import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
 var getClassName9 = get_class_name_factory_default("Breadcrumbs", styles_module_default9);
 var Breadcrumbs = ({
   children,
@@ -3268,9 +3629,9 @@ var Breadcrumbs = ({
 }) => {
   const setUi = useAppStore((s) => s.setUi);
   const breadcrumbs = useBreadcrumbs(numParents);
-  return /* @__PURE__ */ jsxs6("div", { className: getClassName9(), children: [
-    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs6("div", { className: getClassName9("breadcrumb"), children: [
-      /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs9("div", { className: getClassName9(), children: [
+    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs9("div", { className: getClassName9("breadcrumb"), children: [
+      /* @__PURE__ */ jsx22(
         "button",
         {
           type: "button",
@@ -3279,7 +3640,7 @@ var Breadcrumbs = ({
           children: breadcrumb.label
         }
       ),
-      /* @__PURE__ */ jsx19(ChevronRight, { size: 16 })
+      /* @__PURE__ */ jsx22(ChevronRight, { size: 16 })
     ] }, i)),
     children
   ] });
@@ -3297,12 +3658,12 @@ import {
   useMemo as useMemo11
 } from "react";
 import { useShallow as useShallow5 } from "zustand/react/shallow";
-import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
+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);
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx20(Fragment6, { children });
+  return /* @__PURE__ */ jsx23(Fragment6, { children });
 };
 var createOnChange = (fieldName, appStore) => async (value, updatedUi) => {
   const { dispatch, state, selectedItem, resolveComponentData } = appStore.getState();
@@ -3384,7 +3745,7 @@ var FieldsChildInner = ({ fieldName }) => {
   }, [appStore, fieldStore, fieldName]);
   if (!field || !id || !visible) return null;
   if (field.type === "slot") return null;
-  return /* @__PURE__ */ jsx20("div", { className: getClassName10("field"), children: /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx23("div", { className: getClassName10("field"), children: /* @__PURE__ */ jsx23(
     AutoFieldPrivate,
     {
       field,
@@ -3401,7 +3762,7 @@ var FieldsChild = ({ fieldName }) => {
     const value = appStore.getState().getCurrentData().props?.[fieldName];
     return { [fieldName]: value };
   }, [appStore, fieldName]);
-  return /* @__PURE__ */ jsx20(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ jsx20(FieldsChildInner, { fieldName }) });
+  return /* @__PURE__ */ jsx23(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ jsx23(FieldsChildInner, { fieldName }) });
 };
 var FieldsChildMemo = memo5(FieldsChild);
 var FieldsInternal = ({ wrapFields = true }) => {
@@ -3425,7 +3786,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
   );
   const isLoading = fieldsLoading || componentResolving;
   const Wrapper = useMemo11(() => overrides.fields || DefaultFields, [overrides]);
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs10(
     "form",
     {
       className: getClassName10({ wrapFields }),
@@ -3433,8 +3794,8 @@ var FieldsInternal = ({ wrapFields = true }) => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ jsx20(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx20(FieldsChildMemo, { fieldName }, fieldName)) }),
-        isLoading && /* @__PURE__ */ jsx20("div", { className: getClassName10("loadingOverlay"), children: /* @__PURE__ */ jsx20("div", { className: getClassName10("loadingOverlayInner"), children: /* @__PURE__ */ jsx20(Loader, { size: 16 }) }) })
+        /* @__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 }) }) })
       ]
     }
   );
@@ -3445,7 +3806,7 @@ var Fields = memo5(FieldsInternal);
 var styles_module_default11 = { "FieldsPlugin": "_FieldsPlugin_6as57_1", "FieldsPlugin-header": "_FieldsPlugin-header_6as57_7" };
 
 // plugins/fields/index.tsx
-import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
 var getClassName11 = get_class_name_factory_default("FieldsPlugin", styles_module_default11);
 var CurrentTitle = () => {
   const label = useAppStore((s) => {
@@ -3457,11 +3818,11 @@ var CurrentTitle = () => {
 var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
   name: "fields",
   label: "Fields",
-  render: () => /* @__PURE__ */ jsxs8("div", { className: getClassName11(), children: [
-    /* @__PURE__ */ jsx21("div", { className: getClassName11("header"), children: /* @__PURE__ */ jsx21(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ jsx21(CurrentTitle, {}) }) }),
-    /* @__PURE__ */ jsx21(Fields, {})
+  render: () => /* @__PURE__ */ jsxs11("div", { className: getClassName11(), children: [
+    /* @__PURE__ */ jsx24("div", { className: getClassName11("header"), children: /* @__PURE__ */ jsx24(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ jsx24(CurrentTitle, {}) }) }),
+    /* @__PURE__ */ jsx24(Fields, {})
   ] }),
-  icon: /* @__PURE__ */ jsx21(RectangleEllipsis, {}),
+  icon: /* @__PURE__ */ jsx24(RectangleEllipsis, {}),
   mobileOnly: desktopSideBar === "right"
 });
 
@@ -3471,7 +3832,7 @@ import {
   useEffect as useEffect23,
   useMemo as useMemo21,
   useRef as useRef18,
-  useState as useState17
+  useState as useState18
 } from "react";
 
 // components/CredBuild/components/Preview/index.tsx
@@ -3484,11 +3845,11 @@ import {
   useContext as useContext9,
   useEffect as useEffect14,
   useRef as useRef11,
-  useState as useState9
+  useState as useState10
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment7, jsx as jsx22 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx25 } from "react/jsx-runtime";
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -3702,7 +4063,7 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, [debug, doc, onStylesLoaded, win]);
-  return /* @__PURE__ */ jsx22(Fragment7, { children });
+  return /* @__PURE__ */ jsx25(Fragment7, { children });
 };
 var autoFrameContext = createContext4({});
 var useFrame = () => useContext9(autoFrameContext);
@@ -3718,10 +4079,10 @@ function AutoFrame({
   frameRef,
   ...props
 }) {
-  const [loaded, setLoaded] = useState9(false);
-  const [ctx, setCtx] = useState9({});
-  const [mountTarget, setMountTarget] = useState9();
-  const [stylesLoaded, setStylesLoaded] = useState9(false);
+  const [loaded, setLoaded] = useState10(false);
+  const [ctx, setCtx] = useState10({});
+  const [mountTarget, setMountTarget] = useState10();
+  const [stylesLoaded, setStylesLoaded] = useState10(false);
   const handleStylesLoaded = useCallback13(() => {
     setStylesLoaded(true);
   }, []);
@@ -3752,7 +4113,7 @@ function AutoFrame({
       }
     }
   }, [frameRef, loaded, stylesLoaded]);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx25(
     "iframe",
     {
       ...props,
@@ -3763,7 +4124,7 @@ function AutoFrame({
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ jsx22(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx25(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx25(
         CopyHostStyles,
         {
           debug,
@@ -3799,7 +4160,7 @@ var BubbledPointerEvent = class extends BaseEvent {
 };
 
 // components/CredBuild/components/Preview/index.tsx
-import { Fragment as Fragment8, jsx as jsx23 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx26 } from "react/jsx-runtime";
 var getClassName12 = get_class_name_factory_default("CredBuildPreview", styles_module_default12);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
@@ -3866,7 +4227,7 @@ var Preview = ({ id = "credbuild-preview" }) => {
         id: "credbuild-root",
         ...propsWithSlots,
         ...richtextProps
-      }) : /* @__PURE__ */ jsx23(Fragment8, { children: propsWithSlots.children });
+      }) : /* @__PURE__ */ jsx26(Fragment8, { children: propsWithSlots.children });
     },
     [config]
   );
@@ -3874,7 +4235,7 @@ var Preview = ({ id = "credbuild-preview" }) => {
   const rootProps = root.props || root;
   const ref = useRef12(null);
   useBubbleIframeEvents(ref);
-  const inner = !renderData ? /* @__PURE__ */ jsx23(
+  const inner = !renderData ? /* @__PURE__ */ jsx26(
     Page,
     {
       ...rootProps,
@@ -3885,15 +4246,15 @@ var Preview = ({ id = "credbuild-preview" }) => {
         metadata
       },
       editMode: true,
-      children: /* @__PURE__ */ jsx23(DropZonePure, { zone: rootDroppableId })
+      children: /* @__PURE__ */ jsx26(DropZonePure, { zone: rootDroppableId })
     }
-  ) : /* @__PURE__ */ jsx23(Render, { data: renderData, config, metadata });
+  ) : /* @__PURE__ */ jsx26(Render, { data: renderData, config, metadata });
   useEffect15(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
   }, [iframe.enabled, setStatus]);
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: getClassName12(),
@@ -3905,7 +4266,7 @@ var Preview = ({ id = "credbuild-preview" }) => {
           dispatch({ type: "setUi", ui: { itemSelector: null } });
         }
       },
-      children: iframe.enabled ? /* @__PURE__ */ jsx23(
+      children: iframe.enabled ? /* @__PURE__ */ jsx26(
         AutoFrame_default,
         {
           id: "preview-frame",
@@ -3918,14 +4279,14 @@ var Preview = ({ id = "credbuild-preview" }) => {
             setStatus("MOUNTED");
           },
           frameRef: ref,
-          children: /* @__PURE__ */ jsx23(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+          children: /* @__PURE__ */ jsx26(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
             if (Frame) {
-              return /* @__PURE__ */ jsx23(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ jsx26(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ jsx23(
+      ) : /* @__PURE__ */ jsx26(
         "div",
         {
           id: "preview-frame",
@@ -3991,17 +4352,17 @@ var useLoadedOverrides = ({
 import { deepEqual as deepEqual2 } from "fast-equals";
 
 // components/CredBuild/components/Layout/index.tsx
-import { useEffect as useEffect22, useMemo as useMemo20, useState as useState16 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo20, useState as useState17 } from "react";
 
 // components/CredBuild/context.tsx
 import {
   createContext as createContext5,
   useContext as useContext10
 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var propsContext = createContext5({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ jsx24(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ jsx27(propsContext.Provider, { value: props, children: props.children });
 }
 var usePropsContext = () => useContext10(propsContext);
 
@@ -4009,10 +4370,10 @@ var usePropsContext = () => useContext10(propsContext);
 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" };
 
 // lib/use-inject-css.ts
-import { useEffect as useEffect16, useState as useState10 } from "react";
+import { useEffect as useEffect16, useState as useState11 } from "react";
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = useState10();
+  const [el, setEl] = useState11();
   useEffect16(() => {
     setEl(document.createElement("style"));
   }, []);
@@ -4034,8 +4395,8 @@ var useInjectGlobalCss = (iframeEnabled) => {
 };
 
 // components/DefaultOverride/index.tsx
-import { Fragment as Fragment9, jsx as jsx25 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx25(Fragment9, { children });
+import { Fragment as Fragment9, jsx as jsx28 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx28(Fragment9, { children });
 
 // lib/use-preview-mode-hotkeys.ts
 import { useCallback as useCallback15 } from "react";
@@ -4061,7 +4422,7 @@ import {
   useEffect as useEffect17,
   useMemo as useMemo15,
   useRef as useRef13,
-  useState as useState11
+  useState as useState12
 } from "react";
 import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
 
@@ -4390,7 +4751,7 @@ function getDeepDir(el) {
 
 // components/DragDropContext/index.tsx
 import { effect } from "@dnd-kit/state";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var DEBUG2 = false;
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout2) => {
@@ -4416,7 +4777,7 @@ var DragDropContextClient = ({
   const appStore = useAppStoreApi();
   const debouncedParamsRef = useRef13(null);
   const tempDisableFallback = useTempDisableFallback(100);
-  const [zoneStore] = useState11(() => {
+  const [zoneStore] = useState12(() => {
     const rootVirtualizers = /* @__PURE__ */ new Map();
     return createStore3(() => ({
       zoneDepthIndex: {},
@@ -4511,7 +4872,7 @@ var DragDropContextClient = ({
       );
     }
   }, [zoneStore]);
-  const [plugins] = useState11(() => [
+  const [plugins] = useState12(() => [
     ...disableAutoScroll ? defaultPreset.plugins.filter((plugin) => plugin !== AutoScroller) : defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
@@ -4559,7 +4920,7 @@ var DragDropContextClient = ({
     )
   ]);
   const sensors = useSensors();
-  const [dragListeners, setDragListeners] = useState11({});
+  const [dragListeners, setDragListeners] = useState12({});
   const dragMode = useRef13(null);
   const initialSelector = useRef13(void 0);
   const nextContextValue = useMemo15(
@@ -4570,14 +4931,14 @@ var DragDropContextClient = ({
     }),
     []
   );
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx29(
     dragListenerContext.Provider,
     {
       value: {
         dragListeners,
         setDragListeners
       },
-      children: /* @__PURE__ */ jsx26(
+      children: /* @__PURE__ */ jsx29(
         DragDropProvider,
         {
           plugins,
@@ -4799,7 +5160,7 @@ var DragDropContextClient = ({
             const entryEl = getFrame()?.querySelector("[data-credbuild-entry]");
             entryEl?.setAttribute("data-credbuild-dragging", "true");
           },
-          children: /* @__PURE__ */ jsx26(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ jsx26(DropZoneProvider, { value: nextContextValue, children }) })
+          children: /* @__PURE__ */ jsx29(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ jsx29(DropZoneProvider, { value: nextContextValue, children }) })
         }
       )
     }
@@ -4813,17 +5174,17 @@ var DragDropContext = ({
   if (status === "LOADING") {
     return children;
   }
-  return /* @__PURE__ */ jsx26(DragDropContextClient, { disableAutoScroll, children });
+  return /* @__PURE__ */ jsx29(DragDropContextClient, { disableAutoScroll, children });
 };
 
 // components/CredBuild/components/Header/index.tsx
-import { memo as memo6, useCallback as useCallback17, useMemo as useMemo18, useState as useState13 } from "react";
+import { memo as memo6, 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" };
 
 // components/MenuBar/index.tsx
-import { Fragment as Fragment10, jsx as jsx27, jsxs as jsxs9 } from "react/jsx-runtime";
+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);
 function MenuBar({
   menuOpen = false,
@@ -4834,7 +5195,7 @@ function MenuBar({
   const forward = useAppStore((s) => s.history.forward);
   const hasFuture = useAppStore((s) => s.history.hasFuture());
   const hasPast = useAppStore((s) => s.history.hasPast());
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
       className: getClassName13({ menuOpen }),
@@ -4847,48 +5208,48 @@ function MenuBar({
           setMenuOpen(false);
         }
       },
-      children: /* @__PURE__ */ jsxs9("div", { className: getClassName13("inner"), children: [
-        /* @__PURE__ */ jsxs9("div", { className: getClassName13("history"), children: [
-          /* @__PURE__ */ jsx27(
+      children: /* @__PURE__ */ jsxs12("div", { className: getClassName13("inner"), children: [
+        /* @__PURE__ */ jsxs12("div", { className: getClassName13("history"), children: [
+          /* @__PURE__ */ jsx30(
             IconButton,
             {
               type: "button",
               title: "undo",
               disabled: !hasPast,
               onClick: back,
-              children: /* @__PURE__ */ jsx27(Undo2, { size: 21 })
+              children: /* @__PURE__ */ jsx30(Undo2, { size: 21 })
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx30(
             IconButton,
             {
               type: "button",
               title: "redo",
               disabled: !hasFuture,
               onClick: forward,
-              children: /* @__PURE__ */ jsx27(Redo2, { size: 21 })
+              children: /* @__PURE__ */ jsx30(Redo2, { size: 21 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx27(Fragment10, { children: renderHeaderActions && renderHeaderActions() })
+        /* @__PURE__ */ jsx30(Fragment10, { children: renderHeaderActions && renderHeaderActions() })
       ] })
     }
   );
 }
 
 // components/ViewportControls/index.tsx
-import { useEffect as useEffect18, useMemo as useMemo16, useState as useState12 } from "react";
+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" };
 
 // components/ViewportControls/index.tsx
-import { jsx as jsx28, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
 var icons = {
-  Smartphone: /* @__PURE__ */ jsx28(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ jsx28(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ jsx28(Monitor, { size: 16 }),
-  FullWidth: /* @__PURE__ */ jsx28(Expand, { size: 16 })
+  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);
@@ -4899,7 +5260,7 @@ var ActionButton = ({
   isActive,
   disabled
 }) => {
-  return /* @__PURE__ */ jsx28("span", { className: getClassNameButton({ isActive }), suppressHydrationWarning: true, children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx31("span", { className: getClassNameButton({ isActive }), suppressHydrationWarning: true, children: /* @__PURE__ */ jsx31(
     IconButton,
     {
       type: "button",
@@ -4907,7 +5268,7 @@ var ActionButton = ({
       disabled: disabled || isActive,
       onClick,
       suppressHydrationWarning: true,
-      children: /* @__PURE__ */ jsx28("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ jsx31("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -4944,21 +5305,21 @@ var ViewportControls = ({
     ].filter((a) => a.value <= (autoZoom || 1)).sort((a, b) => a.value > b.value ? 1 : -1);
     return options.length > 0 ? options : defaultZoomOptions;
   }, [autoZoom, defaultsContainAutoZoom]);
-  const [activeViewport, setActiveViewport] = useState12(
+  const [activeViewport, setActiveViewport] = useState13(
     uiViewports.current.width
   );
   useEffect18(() => {
     setActiveViewport(uiViewports.current.width);
   }, [uiViewports.current.width, uiViewports]);
-  const [isExpanded, setIsExpanded] = useState12(false);
-  return /* @__PURE__ */ jsxs10(
+  const [isExpanded, setIsExpanded] = useState13(false);
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       className: getClassName14({ isExpanded, fullScreen }),
       suppressHydrationWarning: true,
       children: [
-        /* @__PURE__ */ jsx28("div", { className: getClassName14("actions"), children: /* @__PURE__ */ jsxs10("div", { className: getClassName14("actionsInner"), children: [
-          viewports.map((viewport, i) => /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx31("div", { className: getClassName14("actions"), children: /* @__PURE__ */ jsxs13("div", { className: getClassName14("actionsInner"), children: [
+          viewports.map((viewport, i) => /* @__PURE__ */ jsx31(
             ActionButton,
             {
               title: viewport.label ? `Switch to ${viewport.label} viewport` : "Switch viewport",
@@ -4971,8 +5332,8 @@ var ViewportControls = ({
             },
             i
           )),
-          /* @__PURE__ */ jsx28("div", { className: getClassName14("divider") }),
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx31("div", { className: getClassName14("divider") }),
+          /* @__PURE__ */ jsx31(
             ActionButton,
             {
               title: "Zoom viewport out",
@@ -4986,10 +5347,10 @@ var ViewportControls = ({
                 );
                 onZoom(zoomOptions[nextIndex]?.value || 1);
               },
-              children: /* @__PURE__ */ jsx28(ZoomOut, { size: 16 })
+              children: /* @__PURE__ */ jsx31(ZoomOut, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx31(
             ActionButton,
             {
               title: "Zoom viewport in",
@@ -5003,12 +5364,12 @@ var ViewportControls = ({
                 );
                 onZoom(zoomOptions[nextIndex]?.value || 1);
               },
-              children: /* @__PURE__ */ jsx28(ZoomIn, { size: 16 })
+              children: /* @__PURE__ */ jsx31(ZoomIn, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsxs10("div", { className: getClassName14("zoom"), children: [
-            /* @__PURE__ */ jsx28("div", { className: getClassName14("divider") }),
-            /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsxs13("div", { className: getClassName14("zoom"), children: [
+            /* @__PURE__ */ jsx31("div", { className: getClassName14("divider") }),
+            /* @__PURE__ */ jsx31(
               "select",
               {
                 className: getClassName14("zoomSelect"),
@@ -5019,7 +5380,7 @@ var ViewportControls = ({
                 onChange: (e) => {
                   onZoom(parseFloat(e.currentTarget.value));
                 },
-                children: zoomOptions.map((option) => /* @__PURE__ */ jsx28(
+                children: zoomOptions.map((option) => /* @__PURE__ */ jsx31(
                   "option",
                   {
                     value: option.value,
@@ -5031,13 +5392,13 @@ var ViewportControls = ({
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx31(
           "button",
           {
             className: getClassName14("toggleButton"),
             title: "Toggle viewport menu",
             onClick: () => setIsExpanded((s) => !s),
-            children: isExpanded ? /* @__PURE__ */ jsx28(X, { size: 16 }) : /* @__PURE__ */ jsx28(Monitor, { size: 16 })
+            children: isExpanded ? /* @__PURE__ */ jsx31(X, { size: 16 }) : /* @__PURE__ */ jsx31(Monitor, { size: 16 })
           }
         )
       ]
@@ -5055,7 +5416,7 @@ import {
   useRef as useRef14,
   useMemo as useMemo17
 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var FrameContext = createContext7(null);
 var FrameProvider = ({
   children
@@ -5067,7 +5428,7 @@ var FrameProvider = ({
     }),
     []
   );
-  return /* @__PURE__ */ jsx29(FrameContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx32(FrameContext.Provider, { value, children });
 };
 var useCanvasFrame = () => {
   const context = useContext12(FrameContext);
@@ -5081,7 +5442,7 @@ var useCanvasFrame = () => {
 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" };
 
 // components/CredBuild/components/Header/index.tsx
-import { Fragment as Fragment11, jsx as jsx30, jsxs as jsxs11 } from "react/jsx-runtime";
+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);
 var HeaderInner = ({
   hidePlugins,
@@ -5105,7 +5466,7 @@ var HeaderInner = ({
       const RenderHeader = ({ actions, ...props }) => {
         const Comp = renderHeader;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ jsx30(Comp, { ...props, dispatch, state: appState, children: actions });
+        return /* @__PURE__ */ jsx33(Comp, { ...props, dispatch, state: appState, children: actions });
       };
       return RenderHeader;
     }
@@ -5119,7 +5480,7 @@ var HeaderInner = ({
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ jsx30(Comp, { ...props, dispatch, state: appState });
+        return /* @__PURE__ */ jsx33(Comp, { ...props, dispatch, state: appState });
       };
       return RenderHeader;
     }
@@ -5131,7 +5492,7 @@ var HeaderInner = ({
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || defaultHeaderActionsRender
   );
-  const [menuOpen, setMenuOpen] = useState13(false);
+  const [menuOpen, setMenuOpen] = useState14(false);
   const rootTitle = useAppStore((s) => {
     const rootData = s.state.indexes.nodes["root"]?.data;
     return rootData.props.title ?? "";
@@ -5175,33 +5536,33 @@ var HeaderInner = ({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx33(
     CustomHeader,
     {
-      actions: /* @__PURE__ */ jsx30(Fragment11, { children: /* @__PURE__ */ jsxs11(CustomHeaderActions, { children: [
-        /* @__PURE__ */ jsx30(
+      actions: /* @__PURE__ */ jsx33(Fragment11, { children: /* @__PURE__ */ jsxs14(CustomHeaderActions, { children: [
+        /* @__PURE__ */ jsx33(
           Button,
           {
             href: headerPath || "/",
             newTab: true,
             variant: "secondary",
-            icon: /* @__PURE__ */ jsx30(ExternalLink, { size: 14 }),
+            icon: /* @__PURE__ */ jsx33(ExternalLink, { size: 14 }),
             children: "View Web"
           }
         ),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx33(
           Button,
           {
             onClick: () => {
               const data = appStore.getState().state.data;
               onPublish && onPublish(data);
             },
-            icon: /* @__PURE__ */ jsx30(Globe, { size: 14 }),
+            icon: /* @__PURE__ */ jsx33(Globe, { size: 14 }),
             children: "Publish"
           }
         )
       ] }) }),
-      children: /* @__PURE__ */ jsx30(
+      children: /* @__PURE__ */ jsx33(
         "header",
         {
           className: getClassName15({
@@ -5209,20 +5570,20 @@ var HeaderInner = ({
             rightSideBarVisible,
             hidePlugins
           }),
-          children: /* @__PURE__ */ jsxs11("div", { className: getClassName15("inner"), children: [
-            /* @__PURE__ */ jsxs11("div", { className: getClassName15("leftActions"), children: [
-              /* @__PURE__ */ jsxs11("div", { style: { marginRight: "8px", display: "flex", gap: "8px", alignItems: "center" }, children: [
-                /* @__PURE__ */ jsx30(
+          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: [
+                /* @__PURE__ */ jsx33(
                   Button,
                   {
                     href: "/dashboard",
                     variant: "secondary",
                     size: "medium",
-                    icon: /* @__PURE__ */ jsx30(LayoutDashboard, { size: 14 }),
+                    icon: /* @__PURE__ */ jsx33(LayoutDashboard, { size: 14 }),
                     children: "Dashboard"
                   }
                 ),
-                /* @__PURE__ */ jsx30(
+                /* @__PURE__ */ jsx33(
                   IconButton,
                   {
                     type: "button",
@@ -5240,12 +5601,12 @@ var HeaderInner = ({
                       window.dispatchEvent(new CustomEvent("credbuild-theme-change", { detail: newTheme }));
                     },
                     title: "Toggle Theme",
-                    children: theme === "dark" ? /* @__PURE__ */ jsx30(Sun, { size: 16 }) : /* @__PURE__ */ jsx30(Moon, { size: 16 })
+                    children: theme === "dark" ? /* @__PURE__ */ jsx33(Sun, { size: 16 }) : /* @__PURE__ */ jsx33(Moon, { size: 16 })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs11("div", { className: getClassName15("toggle"), children: [
-                /* @__PURE__ */ jsx30("div", { className: getClassName15("leftSideBarToggle"), children: /* @__PURE__ */ jsx30(
+              /* @__PURE__ */ jsxs14("div", { className: getClassName15("toggle"), children: [
+                /* @__PURE__ */ jsx33("div", { className: getClassName15("leftSideBarToggle"), children: /* @__PURE__ */ jsx33(
                   IconButton,
                   {
                     type: "button",
@@ -5253,10 +5614,10 @@ var HeaderInner = ({
                       toggleSidebars("left");
                     },
                     title: "Toggle left sidebar",
-                    children: /* @__PURE__ */ jsx30(PanelLeft, { size: 16, focusable: "false" })
+                    children: /* @__PURE__ */ jsx33(PanelLeft, { size: 16, focusable: "false" })
                   }
                 ) }),
-                /* @__PURE__ */ jsx30("div", { className: getClassName15("rightSideBarToggle"), children: /* @__PURE__ */ jsx30(
+                /* @__PURE__ */ jsx33("div", { className: getClassName15("rightSideBarToggle"), children: /* @__PURE__ */ jsx33(
                   IconButton,
                   {
                     type: "button",
@@ -5264,16 +5625,16 @@ var HeaderInner = ({
                       toggleSidebars("right");
                     },
                     title: "Toggle right sidebar",
-                    children: /* @__PURE__ */ jsx30(PanelRight, { size: 16, focusable: "false" })
+                    children: /* @__PURE__ */ jsx33(PanelRight, { size: 16, focusable: "false" })
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx30("div", { className: getClassName15("title"), children: /* @__PURE__ */ jsxs11(Heading, { rank: "2", size: "xs", children: [
-                /* @__PURE__ */ jsx30("span", { style: { fontSize: "11px", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }, children: headerTitle || rootTitle || "Page" }),
-                headerPath && /* @__PURE__ */ jsx30(Fragment11, { children: /* @__PURE__ */ jsx30("code", { className: getClassName15("path"), style: { fontSize: "10px", opacity: 0.6, marginLeft: "8px" }, children: headerPath }) })
+              /* @__PURE__ */ jsx33("div", { className: getClassName15("title"), children: /* @__PURE__ */ jsxs14(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 }) })
               ] }) })
             ] }),
-            /* @__PURE__ */ jsx30("div", { className: getClassName15("viewportTools"), children: /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsx33("div", { className: getClassName15("viewportTools"), children: /* @__PURE__ */ jsx33(
               ViewportControls,
               {
                 fullScreen: _experimentalFullScreenCanvas,
@@ -5299,8 +5660,8 @@ var HeaderInner = ({
                 }
               }
             ) }),
-            /* @__PURE__ */ jsxs11("div", { className: getClassName15("tools"), children: [
-              /* @__PURE__ */ jsx30("div", { className: getClassName15("menuButton"), children: /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsxs14("div", { className: getClassName15("tools"), children: [
+              /* @__PURE__ */ jsx33("div", { className: getClassName15("menuButton"), children: /* @__PURE__ */ jsx33(
                 IconButton,
                 {
                   type: "button",
@@ -5308,34 +5669,34 @@ var HeaderInner = ({
                     return setMenuOpen(!menuOpen);
                   },
                   title: "Toggle menu bar",
-                  children: menuOpen ? /* @__PURE__ */ jsx30(ChevronUp, { size: 16, focusable: "false" }) : /* @__PURE__ */ jsx30(ChevronDown, { size: 16, focusable: "false" })
+                  children: menuOpen ? /* @__PURE__ */ jsx33(ChevronUp, { size: 16, focusable: "false" }) : /* @__PURE__ */ jsx33(ChevronDown, { size: 16, focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ jsx30(
+              /* @__PURE__ */ jsx33(
                 MenuBar,
                 {
                   dispatch,
                   onPublish,
                   menuOpen,
-                  renderHeaderActions: () => /* @__PURE__ */ jsxs11(CustomHeaderActions, { children: [
-                    /* @__PURE__ */ jsx30(
+                  renderHeaderActions: () => /* @__PURE__ */ jsxs14(CustomHeaderActions, { children: [
+                    /* @__PURE__ */ jsx33(
                       Button,
                       {
                         href: headerPath || "/",
                         newTab: true,
                         variant: "secondary",
-                        icon: /* @__PURE__ */ jsx30(ExternalLink, { size: 14 }),
+                        icon: /* @__PURE__ */ jsx33(ExternalLink, { size: 14 }),
                         children: "View Web"
                       }
                     ),
-                    /* @__PURE__ */ jsx30(
+                    /* @__PURE__ */ jsx33(
                       Button,
                       {
                         onClick: () => {
                           const data = appStore.getState().state.data;
                           onPublish && onPublish(data);
                         },
-                        icon: /* @__PURE__ */ jsx30(Globe, { size: 14 }),
+                        icon: /* @__PURE__ */ jsx33(Globe, { size: 14 }),
                         children: "Publish"
                       }
                     )
@@ -5356,7 +5717,7 @@ var Header = memo6(HeaderInner);
 var styles_module_default17 = { "SidebarSection": "_SidebarSection_1oj6d_1", "SidebarSection-title": "_SidebarSection-title_1oj6d_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_1oj6d_38", "SidebarSection-content": "_SidebarSection-content_1oj6d_42", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_1oj6d_51", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_1oj6d_80", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_1oj6d_51", "SidebarSection-heading": "_SidebarSection-heading_1oj6d_92", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_1oj6d_96" };
 
 // components/SidebarSection/index.tsx
-import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs15 } from "react/jsx-runtime";
 var getClassName16 = get_class_name_factory_default("SidebarSection", styles_module_default17);
 var SidebarSection = ({
   children,
@@ -5366,13 +5727,13 @@ var SidebarSection = ({
   noBorderTop,
   isLoading
 }) => {
-  return /* @__PURE__ */ jsxs12("div", { className: getClassName16({ noBorderTop }), style: { background }, children: [
-    /* @__PURE__ */ jsx31("div", { className: getClassName16("title"), children: /* @__PURE__ */ jsxs12("div", { className: getClassName16("breadcrumbs"), children: [
-      showBreadcrumbs && /* @__PURE__ */ jsx31(Breadcrumbs, {}),
-      /* @__PURE__ */ jsx31("div", { className: getClassName16("heading"), children: /* @__PURE__ */ jsx31(Heading, { rank: "2", size: "xs", children: title }) })
+  return /* @__PURE__ */ jsxs15("div", { className: getClassName16({ noBorderTop }), style: { background }, children: [
+    /* @__PURE__ */ jsx34("div", { className: getClassName16("title"), children: /* @__PURE__ */ jsxs15("div", { className: getClassName16("breadcrumbs"), children: [
+      showBreadcrumbs && /* @__PURE__ */ jsx34(Breadcrumbs, {}),
+      /* @__PURE__ */ jsx34("div", { className: getClassName16("heading"), children: /* @__PURE__ */ jsx34(Heading, { rank: "2", size: "xs", children: title }) })
     ] }) }),
-    /* @__PURE__ */ jsx31("div", { className: getClassName16("content"), children }),
-    isLoading && /* @__PURE__ */ jsx31("div", { className: getClassName16("loadingOverlay"), children: /* @__PURE__ */ jsx31(Loader, { size: 32 }) })
+    /* @__PURE__ */ jsx34("div", { className: getClassName16("content"), children }),
+    isLoading && /* @__PURE__ */ jsx34("div", { className: getClassName16("loadingOverlay"), children: /* @__PURE__ */ jsx34(Loader, { size: 32 }) })
   ] });
 };
 
@@ -5382,7 +5743,7 @@ import {
   useEffect as useEffect19,
   useMemo as useMemo19,
   useRef as useRef15,
-  useState as useState14
+  useState as useState15
 } from "react";
 
 // css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Canvas/styles.module.css#css-module
@@ -5390,7 +5751,7 @@ var styles_module_default18 = { "CredBuildCanvas": "_CredBuildCanvas_1ivia_1", "
 
 // components/CredBuild/components/Canvas/index.tsx
 import { useShallow as useShallow7 } from "zustand/react/shallow";
-import { Fragment as Fragment12, jsx as jsx32, jsxs as jsxs13 } from "react/jsx-runtime";
+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);
 var ZOOM_ON_CHANGE = true;
 var TRANSITION_DURATION = 150;
@@ -5434,10 +5795,10 @@ var Canvas = () => {
       viewports: s.state.ui.viewports
     }))
   );
-  const [showTransition, setShowTransition] = useState14(false);
+  const [showTransition, setShowTransition] = useState15(false);
   const isResizingRef = useRef15(false);
   const defaultRender = useMemo19(() => {
-    const CredBuildDefault = ({ children }) => /* @__PURE__ */ jsx32(Fragment12, { children });
+    const CredBuildDefault = ({ children }) => /* @__PURE__ */ jsx35(Fragment12, { children });
     return CredBuildDefault;
   }, []);
   const CustomPreview = useMemo19(
@@ -5497,7 +5858,7 @@ var Canvas = () => {
       resizeObserver.disconnect();
     };
   }, [frameRef, resetAutoZoom]);
-  const [showLoader, setShowLoader] = useState14(false);
+  const [showLoader, setShowLoader] = useState15(false);
   useEffect19(() => {
     setTimeout(() => {
       setShowLoader(true);
@@ -5558,7 +5919,7 @@ var Canvas = () => {
     uiProp?.viewports,
     frameRef
   ]);
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       className: getClassName17({
@@ -5576,8 +5937,8 @@ var Canvas = () => {
           });
         }
       },
-      children: /* @__PURE__ */ jsxs13("div", { className: getClassName17("inner"), ref: frameRef, children: [
-        /* @__PURE__ */ jsx32(
+      children: /* @__PURE__ */ jsxs16("div", { className: getClassName17("inner"), ref: frameRef, children: [
+        /* @__PURE__ */ jsx35(
           "div",
           {
             className: getClassName17("root"),
@@ -5595,19 +5956,19 @@ var Canvas = () => {
               setShowTransition(false);
               isResizingRef.current = false;
             },
-            children: /* @__PURE__ */ jsx32(CustomPreview, { children: /* @__PURE__ */ jsx32(Preview, {}) })
+            children: /* @__PURE__ */ jsx35(CustomPreview, { children: /* @__PURE__ */ jsx35(Preview, {}) })
           }
         ),
-        /* @__PURE__ */ jsx32("div", { className: getClassName17("loader"), children: /* @__PURE__ */ jsx32(Loader, { size: 24 }) })
+        /* @__PURE__ */ jsx35("div", { className: getClassName17("loader"), children: /* @__PURE__ */ jsx35(Loader, { size: 24 }) })
       ] })
     }
   );
 };
 
 // lib/use-sidebar-resize.ts
-import { useCallback as useCallback19, useEffect as useEffect20, useRef as useRef16, useState as useState15 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect20, useRef as useRef16, useState as useState16 } from "react";
 function useSidebarResize(position, dispatch) {
-  const [width, setWidth] = useState15(null);
+  const [width, setWidth] = useState16(null);
   const sidebarRef = useRef16(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
@@ -5692,7 +6053,7 @@ import { useCallback as useCallback20, useRef as useRef17 } from "react";
 var styles_module_default19 = { "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 jsx33 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var getClassName18 = get_class_name_factory_default("ResizeHandle", styles_module_default19);
 var ResizeHandle = ({
   position,
@@ -5749,7 +6110,7 @@ var ResizeHandle = ({
     },
     [handleMouseMove, handleMouseUp, sidebarRef]
   );
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       ref: handleRef,
@@ -5763,7 +6124,7 @@ var ResizeHandle = ({
 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" };
 
 // components/CredBuild/components/Sidebar/index.tsx
-import { Fragment as Fragment13, jsx as jsx34, jsxs as jsxs14 } from "react/jsx-runtime";
+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);
 var Sidebar = ({
   position,
@@ -5773,8 +6134,8 @@ var Sidebar = ({
   onResizeEnd,
   children
 }) => {
-  return /* @__PURE__ */ jsxs14(Fragment13, { children: [
-    /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs17(Fragment13, { children: [
+    /* @__PURE__ */ jsx37(
       "div",
       {
         ref: sidebarRef,
@@ -5782,7 +6143,7 @@ var Sidebar = ({
         children
       }
     ),
-    /* @__PURE__ */ jsx34("div", { className: `${getClassName19("resizeHandle")}`, children: /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx37("div", { className: `${getClassName19("resizeHandle")}`, children: /* @__PURE__ */ jsx37(
       ResizeHandle,
       {
         position,
@@ -5856,7 +6217,7 @@ var useDeleteHotkeys = () => {
 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" };
 
 // components/CredBuild/components/Nav/index.tsx
-import { jsx as jsx35, jsxs as jsxs15 } from "react/jsx-runtime";
+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);
 var MenuItem = ({
@@ -5867,7 +6228,7 @@ var MenuItem = ({
   mobileOnly,
   desktopOnly
 }) => {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx38(
     "li",
     {
       className: getClassNameItem2({
@@ -5875,9 +6236,9 @@ var MenuItem = ({
         mobileOnly,
         desktopOnly
       }),
-      children: onClick && /* @__PURE__ */ jsxs15("div", { className: getClassNameItem2("link"), onClick, children: [
-        icon && /* @__PURE__ */ jsx35("span", { className: getClassNameItem2("linkIcon"), children: icon }),
-        /* @__PURE__ */ jsx35("span", { className: getClassNameItem2("linkLabel"), children: label })
+      children: onClick && /* @__PURE__ */ jsxs18("div", { className: getClassNameItem2("link"), onClick, children: [
+        icon && /* @__PURE__ */ jsx38("span", { className: getClassNameItem2("linkIcon"), children: icon }),
+        /* @__PURE__ */ jsx38("span", { className: getClassNameItem2("linkLabel"), children: label })
       ] })
     }
   );
@@ -5886,14 +6247,14 @@ var Nav = ({
   items,
   mobileActions
 }) => {
-  return /* @__PURE__ */ jsxs15("nav", { className: getClassName20(), children: [
-    /* @__PURE__ */ jsx35("ul", { className: getClassName20("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx35(MenuItem, { ...item }, key)) }),
-    mobileActions && /* @__PURE__ */ jsx35("div", { className: getClassName20("mobileActions"), children: 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 })
   ] });
 };
 
 // components/CredBuild/components/Layout/index.tsx
-import { jsx as jsx36, jsxs as jsxs16 } from "react/jsx-runtime";
+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);
@@ -5901,14 +6262,14 @@ var FieldSideBar = () => {
   const title = useAppStore(
     (s) => s.selectedItem ? s.config.components[s.selectedItem.type]?.["label"] ?? s.selectedItem.type.toString() : s.config.root?.label || "Page"
   );
-  return /* @__PURE__ */ jsx36(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx36(Fields, {}) });
+  return /* @__PURE__ */ jsx39(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx39(Fields, {}) });
 };
 var PluginTab = ({
   children,
   visible,
   mobileOnly
 }) => {
-  return /* @__PURE__ */ jsx36("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx36("div", { className: getPluginTabClassName("body"), children }) });
+  return /* @__PURE__ */ jsx39("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx39("div", { className: getPluginTabClassName("body"), children }) });
 };
 var Layout = ({ children }) => {
   const {
@@ -5976,8 +6337,8 @@ var Layout = ({ children }) => {
     () => overrides.credbuild || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = useState16(false);
-  const [theme, setTheme] = useState16("dark");
+  const [mounted, setMounted] = useState17(false);
+  const [theme, setTheme] = useState17("dark");
   useEffect22(() => {
     setMounted(true);
     const savedTheme = localStorage.getItem("credbuild-theme");
@@ -6017,7 +6378,7 @@ var Layout = ({ children }) => {
   const setUi = useAppStore((s) => s.setUi);
   const currentPlugin = useAppStore((s) => s.state.ui.plugin?.current);
   const appStoreApi = useAppStoreApi();
-  const [mobilePanelHeightMode, setMobilePanelHeightMode] = useState16("toggle");
+  const [mobilePanelHeightMode, setMobilePanelHeightMode] = useState17("toggle");
   const hasLegacySideBarPlugin = useMemo20(
     () => !!plugins?.find((p) => p.name === "legacy-side-bar"),
     [plugins]
@@ -6040,7 +6401,7 @@ var Layout = ({ children }) => {
         }
         details[plugin.name] = {
           label: plugin.label ?? plugin.name,
-          icon: plugin.icon ?? /* @__PURE__ */ jsx36(ToyBrick, {}),
+          icon: plugin.icon ?? /* @__PURE__ */ jsx39(ToyBrick, {}),
           onClick: () => {
             setMobilePanelHeightMode(plugin.mobilePanelHeight ?? "toggle");
             if (plugin.name === currentPlugin) {
@@ -6077,7 +6438,7 @@ var Layout = ({ children }) => {
   const mobilePanelExpanded = useAppStore(
     (s) => s.state.ui.mobilePanelExpanded ?? false
   );
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       className: `CredBuild ${theme === "dark" ? "dark" : ""} ${getClassName21({
@@ -6087,7 +6448,7 @@ var Layout = ({ children }) => {
       id: instanceId,
       style: { height: typeof height === "number" && isNaN(height) ? void 0 : height },
       children: [
-        /* @__PURE__ */ jsx36(DragDropContext, { disableAutoScroll: dnd?.disableAutoScroll, children: /* @__PURE__ */ jsx36(CustomCredBuild, { children: children || /* @__PURE__ */ jsx36(FrameProvider, { children: /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx39(DragDropContext, { disableAutoScroll: dnd?.disableAutoScroll, children: /* @__PURE__ */ jsx39(CustomCredBuild, { children: children || /* @__PURE__ */ jsx39(FrameProvider, { children: /* @__PURE__ */ jsx39(
           "div",
           {
             className: getLayoutClassName({
@@ -6099,14 +6460,14 @@ var Layout = ({ children }) => {
               mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content"
             }),
             style: { height: typeof height === "number" && isNaN(height) ? void 0 : height },
-            children: /* @__PURE__ */ jsxs16(
+            children: /* @__PURE__ */ jsxs19(
               "div",
               {
                 className: getLayoutClassName("inner"),
                 style: layoutOptions,
                 children: [
-                  /* @__PURE__ */ jsx36("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsx36(Header, { theme, hidePlugins: hasLegacySideBarPlugin }) }),
-                  /* @__PURE__ */ jsxs16(
+                  /* @__PURE__ */ jsx39("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsx39(Header, { theme, hidePlugins: hasLegacySideBarPlugin }) }),
+                  /* @__PURE__ */ jsxs19(
                     Sidebar,
                     {
                       position: "left",
@@ -6115,11 +6476,11 @@ var Layout = ({ children }) => {
                       onResize: setLeftWidth,
                       onResizeEnd: handleLeftSidebarResizeEnd,
                       children: [
-                        /* @__PURE__ */ jsx36("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx36(
+                        /* @__PURE__ */ jsx39("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx39(
                           Nav,
                           {
                             items: pluginItems,
-                            mobileActions: typeof window !== "undefined" && !window.matchMedia("(min-width: 638px)").matches && leftSideBarVisible && mobilePanelHeightMode === "toggle" && /* @__PURE__ */ jsx36(
+                            mobileActions: typeof window !== "undefined" && !window.matchMedia("(min-width: 638px)").matches && leftSideBarVisible && mobilePanelHeightMode === "toggle" && /* @__PURE__ */ jsx39(
                               IconButton,
                               {
                                 type: "button",
@@ -6129,18 +6490,18 @@ var Layout = ({ children }) => {
                                     mobilePanelExpanded: !mobilePanelExpanded
                                   });
                                 },
-                                children: mobilePanelExpanded ? /* @__PURE__ */ jsx36(Minimize2, { size: 21 }) : /* @__PURE__ */ jsx36(Maximize2, { size: 21 })
+                                children: mobilePanelExpanded ? /* @__PURE__ */ jsx39(Minimize2, { size: 21 }) : /* @__PURE__ */ jsx39(Maximize2, { size: 21 })
                               }
                             )
                           }
                         ) }),
                         Object.entries(pluginItems).map(
-                          ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx36(
+                          ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx39(
                             PluginTab,
                             {
                               visible: currentPlugin === id,
                               mobileOnly,
-                              children: /* @__PURE__ */ jsx36(Render2, {})
+                              children: /* @__PURE__ */ jsx39(Render2, {})
                             },
                             id
                           )
@@ -6148,8 +6509,8 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx36(Canvas, {}),
-                  !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx36(
+                  /* @__PURE__ */ jsx39(Canvas, {}),
+                  !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx39(
                     Sidebar,
                     {
                       position: "right",
@@ -6157,7 +6518,7 @@ var Layout = ({ children }) => {
                       isVisible: rightSideBarVisible,
                       onResize: setRightWidth,
                       onResizeEnd: handleRightSidebarResizeEnd,
-                      children: /* @__PURE__ */ jsx36(FieldSideBar, {})
+                      children: /* @__PURE__ */ jsx39(FieldSideBar, {})
                     }
                   )
                 ]
@@ -6165,14 +6526,14 @@ var Layout = ({ children }) => {
             )
           }
         ) }) }) }),
-        /* @__PURE__ */ jsx36("div", { id: "credbuild-portal-root", className: getClassName21("portal") })
+        /* @__PURE__ */ jsx39("div", { id: "credbuild-portal-root", className: getClassName21("portal") })
       ]
     }
   );
 };
 
 // components/CredBuild/index.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function CredBuildProvider({ children }) {
   const {
     config,
@@ -6199,7 +6560,7 @@ function CredBuildProvider({ children }) {
     }),
     [_iframe]
   );
-  const [generatedAppState] = useState17(() => {
+  const [generatedAppState] = useState18(() => {
     const initial = { ...defaultAppState.ui, ...initialUi };
     let clientUiState = {};
     if (Object.keys(initialData?.root || {}).length > 0 && !initialData?.root?.props) {
@@ -6246,7 +6607,7 @@ function CredBuildProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = useState17(
+  const [blendedHistories] = useState18(
     [
       ..._initialHistory?.histories || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -6315,7 +6676,7 @@ function CredBuildProvider({ children }) {
       loadedFieldTransforms
     ]
   );
-  const [appStore] = useState17(
+  const [appStore] = useState18(
     () => createAppStore(generateAppStore(initialAppState))
   );
   useEffect23(() => {
@@ -6355,10 +6716,10 @@ function CredBuildProvider({ children }) {
       resolveAndCommitData();
     }, 0);
   }, [appStore]);
-  return /* @__PURE__ */ jsx37(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx37(UseCredBuildStoreContext.Provider, { value: uCredBuildStore, children }) });
+  return /* @__PURE__ */ jsx40(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx40(UseCredBuildStoreContext.Provider, { value: uCredBuildStore, children }) });
 }
 function CredBuild(props) {
-  return /* @__PURE__ */ jsx37(PropsProvider, { ...props, children: /* @__PURE__ */ jsx37(CredBuildProvider, { ...props, children: /* @__PURE__ */ jsx37(Layout, { children: props.children }) }) });
+  return /* @__PURE__ */ jsx40(PropsProvider, { ...props, children: /* @__PURE__ */ jsx40(CredBuildProvider, { ...props, children: /* @__PURE__ */ jsx40(Layout, { children: props.children }) }) });
 }
 CredBuild.Components = Components;
 CredBuild.Fields = Fields;
@@ -6367,17 +6728,20 @@ CredBuild.Outline = Outline;
 CredBuild.Preview = Preview;
 
 // plugins/legacy-side-bar/index.tsx
-import { jsx as jsx38, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs20 } from "react/jsx-runtime";
 var legacySideBarPlugin = () => ({
   name: "legacy-side-bar",
-  render: () => /* @__PURE__ */ jsxs17("div", { style: { overflowY: "auto" }, children: [
-    /* @__PURE__ */ jsx38(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx38(Components, {}) }),
-    /* @__PURE__ */ jsx38(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx38(Outline, {}) })
+  render: () => /* @__PURE__ */ jsxs20("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, {}) })
   ] })
 });
 
 export {
   overrideKeys,
+  SliderField,
+  ResponsiveSliderField,
+  ColorPickerField,
   Drawer,
   registerOverlayPortal,
   DropZone,