@crediblemark/build 0.25.19 → 0.25.21

package/dist/{chunk-5GWBGJC4.mjs → chunk-5ASR74IZ.mjs}

@@ -13,11 +13,11 @@ import {
   renderContext,
   useRichtextProps,
   useSlots
-} from "./chunk-VEQIM5ZE.mjs";
+} from "./chunk-WADDTBOG.mjs";
 import {
   collisionStore,
   useSensors
-} from "./chunk-U4NHUPA4.mjs";
+} from "./chunk-QJ3POSBT.mjs";
 import {
   AutoFieldPrivate,
   Button,
@@ -25,11 +25,11 @@ import {
   fieldContextStore,
   useContextStore,
   useSafeId
-} from "./chunk-ARM3KXOM.mjs";
+} from "./chunk-N4PD57DO.mjs";
 import {
   IconButton,
   Loader
-} from "./chunk-D7HE7E2A.mjs";
+} from "./chunk-LGPNWN5U.mjs";
 import {
   Box,
   ChartColumn,
@@ -90,7 +90,7 @@ import {
   useRegisterHistorySlice,
   useRegisterPermissionsSlice,
   useResetAutoZoom
-} from "./chunk-D4WFZ3K2.mjs";
+} from "./chunk-NFUQAIKA.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-BFHV72KK.mjs";
@@ -280,8 +280,13 @@ function Render({
   };
   const rootProps = "props" in defaultedData.root ? defaultedData.root.props : defaultedData.root;
   const title = rootProps?.title || "";
+  const renderContextValue = useMemo(() => ({
+    config,
+    data: defaultedData,
+    metadata
+  }), [config, defaultedData, metadata]);
   if (rootProps?.mode === "html") {
-    return /* @__PURE__ */ jsx2(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx2(HtmlModeRender, { htmlCode: rootProps.htmlCode, isEditing: false }) });
+    return /* @__PURE__ */ jsx2(renderContext.Provider, { value: renderContextValue, children: /* @__PURE__ */ jsx2(HtmlModeRender, { htmlCode: rootProps.htmlCode, isEditing: false }) });
   }
   const pageProps = {
     ...rootProps,
@@ -309,9 +314,9 @@ function Render({
     []
   );
   if (config.root?.render) {
-    return /* @__PURE__ */ jsx2(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx2(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx2(config.root.render, { ...propsWithSlots, ...richtextProps, children: /* @__PURE__ */ jsx2(DropZoneRenderPure, { zone: rootZone }) }) }) });
+    return /* @__PURE__ */ jsx2(renderContext.Provider, { value: renderContextValue, children: /* @__PURE__ */ jsx2(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx2(config.root.render, { ...propsWithSlots, ...richtextProps, children: /* @__PURE__ */ jsx2(DropZoneRenderPure, { zone: rootZone }) }) }) });
   }
-  return /* @__PURE__ */ jsx2(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx2(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx2(DropZoneRenderPure, { zone: rootZone }) }) });
+  return /* @__PURE__ */ jsx2(renderContext.Provider, { value: renderContextValue, children: /* @__PURE__ */ jsx2(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx2(DropZoneRenderPure, { zone: rootZone }) }) });
 }
 
 // lib/use-credbuild.ts
@@ -475,7 +480,7 @@ function useGetCredBuild() {
 // lib/use-component-list.tsx
 import { useEffect as useEffect4, useState as useState3 } from "react";
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/ComponentList/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/components/ComponentList/styles.module.css#css-module
 var styles_module_default = { "ComponentList": "_ComponentList_1dcib_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1dcib_5", "ComponentList-content": "_ComponentList-content_1dcib_9", "ComponentList-title": "_ComponentList-title_1dcib_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_1dcib_53" };
 
 // components/ComponentList/index.tsx
@@ -649,7 +654,7 @@ var useComponentList = () => {
 // components/CredBuild/components/Components/index.tsx
 import { useMemo as useMemo2, useState as useState4 } from "react";
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/Components/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/components/CredBuild/components/Components/styles.module.css#css-module
 var styles_module_default2 = { "CredBuildComponents": "_CredBuildComponents_lxrzy_1", "CredBuildComponents-searchContainer": "_CredBuildComponents-searchContainer_lxrzy_7", "CredBuildComponents-searchWrapper": "_CredBuildComponents-searchWrapper_lxrzy_16", "CredBuildComponents-searchInput": "_CredBuildComponents-searchInput_lxrzy_23", "CredBuildComponents-searchIcon": "_CredBuildComponents-searchIcon_lxrzy_42", "CredBuildComponents-clearButton": "_CredBuildComponents-clearButton_lxrzy_54", "CredBuildComponents-listContainer": "_CredBuildComponents-listContainer_lxrzy_74", "CredBuildComponents-noResults": "_CredBuildComponents-noResults_lxrzy_79" };
 
 // components/CredBuild/components/Components/index.tsx
@@ -744,7 +749,7 @@ var Components = () => {
   ] });
 };
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/plugins/blocks/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/plugins/blocks/styles.module.css#css-module
 var styles_module_default3 = { "BlocksPlugin": "_BlocksPlugin_1q0b2_1" };
 
 // plugins/blocks/index.tsx
@@ -757,7 +762,7 @@ var blocksPlugin = () => ({
   icon: /* @__PURE__ */ jsx6(Shapes, {})
 });
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/LayerTree/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/components/LayerTree/styles.module.css#css-module
 var styles_module_default4 = { "LayerTree": "_LayerTree_nus40_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_nus40_11", "LayerTree-helper": "_LayerTree-helper_nus40_17", "Layer": "_Layer_nus40_1", "Layer-inner": "_Layer-inner_nus40_29", "Layer--containsZone": "_Layer--containsZone_nus40_35", "Layer-clickable": "_Layer-clickable_nus40_39", "Layer--isSelected": "_Layer--isSelected_nus40_58", "Layer-chevron": "_Layer-chevron_nus40_79", "Layer--childIsSelected": "_Layer--childIsSelected_nus40_80", "Layer-zones": "_Layer-zones_nus40_84", "Layer-title": "_Layer-title_nus40_98", "Layer-name": "_Layer-name_nus40_107", "Layer-icon": "_Layer-icon_nus40_113", "Layer-zoneIcon": "_Layer-zoneIcon_nus40_118" };
 
 // components/LayerTree/index.tsx
@@ -766,7 +771,10 @@ import {
   useCallback,
   useContext as useContext2,
   useRef,
-  memo as memo2
+  memo as memo2,
+  createContext as createContext2,
+  useState as useState5,
+  useMemo as useMemo3
 } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -776,6 +784,7 @@ var DEFAULT_LAYER_ROW_HEIGHT = 32;
 var LAYER_TREE_VIRTUALIZATION_OVERSCAN = 8;
 var MIN_VIRTUALIZED_LAYER_COUNT = 25;
 var measuredRowHeights = /* @__PURE__ */ new Map();
+var DragContext = createContext2(null);
 var getZonesByParent = (zones) => {
   return Object.keys(zones).reduce((acc, zone) => {
     const [parentId] = zone.split(":");
@@ -878,7 +887,9 @@ var Layer = memo2(forwardRef(function Layer2({
   selectedPathIds
 }, ref) {
   const dispatch = useAppStore((s) => s.dispatch);
+  const appStoreApi = useAppStoreApi();
   const zoneStore = useContext2(ZoneStoreContext);
+  const dragCtx = useContext2(DragContext);
   const isHovering = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === node.itemId
@@ -917,12 +928,98 @@ var Layer = memo2(forwardRef(function Layer2({
       }),
       "data-index": dataIndex,
       "data-credbuild-layer-tree-id": node.itemId,
+      draggable: true,
+      onDragStart: (e) => {
+        dragCtx?.setDraggedItem({
+          itemId: node.itemId,
+          index: node.index,
+          zoneCompound: node.zoneCompound
+        });
+        e.dataTransfer.effectAllowed = "move";
+      },
+      onDragOver: (e) => {
+        e.preventDefault();
+        if (!dragCtx || !dragCtx.draggedItem || dragCtx.draggedItem.itemId === node.itemId) return;
+        const targetNodeIndex = appStoreApi.getState().state.indexes.nodes[node.itemId];
+        if (targetNodeIndex?.path.some((p) => p.split(":")[0] === dragCtx.draggedItem?.itemId)) {
+          return;
+        }
+        const rect = e.currentTarget.getBoundingClientRect();
+        const hoverClientY = e.clientY - rect.top;
+        const threshold = rect.height / 2;
+        const position = hoverClientY < threshold ? "before" : "after";
+        dragCtx.setHoveredItemId(node.itemId);
+        dragCtx.setHoverPosition(position);
+      },
+      onDragLeave: () => {
+        if (dragCtx?.hoveredItemId === node.itemId) {
+          dragCtx.setHoveredItemId(null);
+          dragCtx.setHoverPosition(null);
+        }
+      },
+      onDrop: (e) => {
+        e.preventDefault();
+        if (!dragCtx || !dragCtx.draggedItem || dragCtx.draggedItem.itemId === node.itemId) return;
+        let destIndex = node.index;
+        if (dragCtx.draggedItem.zoneCompound === node.zoneCompound) {
+          if (dragCtx.hoverPosition === "before") {
+            destIndex = dragCtx.draggedItem.index > node.index ? node.index : node.index - 1;
+          } else {
+            destIndex = dragCtx.draggedItem.index > node.index ? node.index + 1 : node.index;
+          }
+        } else {
+          destIndex = dragCtx.hoverPosition === "before" ? node.index : node.index + 1;
+        }
+        dispatch({
+          type: "move",
+          sourceIndex: dragCtx.draggedItem.index,
+          sourceZone: dragCtx.draggedItem.zoneCompound,
+          destinationIndex: destIndex,
+          destinationZone: node.zoneCompound
+        });
+        dispatch({
+          type: "setUi",
+          ui: {
+            itemSelector: {
+              index: destIndex,
+              zone: node.zoneCompound
+            }
+          }
+        });
+        dragCtx.setDraggedItem(null);
+        dragCtx.setHoveredItemId(null);
+        dragCtx.setHoverPosition(null);
+      },
+      onDragEnd: () => {
+        dragCtx?.setDraggedItem(null);
+        dragCtx?.setHoveredItemId(null);
+        dragCtx?.setHoverPosition(null);
+      },
+      style: {
+        opacity: dragCtx?.draggedItem?.itemId === node.itemId ? 0.4 : 1,
+        position: "relative"
+      },
       children: [
+        dragCtx?.hoveredItemId === node.itemId && dragCtx?.hoverPosition && /* @__PURE__ */ jsx7(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              height: "2px",
+              background: "linear-gradient(to right, var(--cb-gold, #d4af37), #f3e5ab)",
+              zIndex: 10,
+              ...dragCtx.hoverPosition === "before" ? { top: 0 } : { bottom: 0 }
+            }
+          }
+        ),
         /* @__PURE__ */ jsx7("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs3(
           "button",
           {
             type: "button",
             className: getClassNameLayer("clickable"),
+            "aria-expanded": containsZone ? shouldRenderChildren : void 0,
             onClick: () => {
               if (isSelected) {
                 setItemSelector(null);
@@ -1115,7 +1212,18 @@ var LayerTree = memo2(({
   selectedPathIds,
   trees
 }) => {
-  return /* @__PURE__ */ jsx7(Fragment, { children: trees.map((tree) => /* @__PURE__ */ jsx7(
+  const [draggedItem, setDraggedItem] = useState5(null);
+  const [hoveredItemId, setHoveredItemId] = useState5(null);
+  const [hoverPosition, setHoverPosition] = useState5(null);
+  const dragContextValue = useMemo3(() => ({
+    draggedItem,
+    setDraggedItem,
+    hoveredItemId,
+    setHoveredItemId,
+    hoverPosition,
+    setHoverPosition
+  }), [draggedItem, hoveredItemId, hoverPosition]);
+  return /* @__PURE__ */ jsx7(DragContext.Provider, { value: dragContextValue, children: trees.map((tree) => /* @__PURE__ */ jsx7(
     LayerTreeZone,
     {
       depth: 0,
@@ -1128,7 +1236,7 @@ var LayerTree = memo2(({
 });
 
 // components/CredBuild/components/Outline/index.tsx
-import { useMemo as useMemo3, memo as memo3 } from "react";
+import { useMemo as useMemo4, memo as memo3 } from "react";
 
 // lib/data/find-zones-for-area.ts
 var findZonesForArea = (state, area) => {
@@ -1149,13 +1257,13 @@ var Outline = memo3(() => {
   const rootZones = useAppStore(
     useShallow((s) => findZonesForArea(s.state, "root"))
   );
-  const selectedPathIds = useMemo3(() => {
-    const selectedPath = selectedId ? nodes[selectedId]?.path : null;
+  const selectedPath = selectedId ? nodes[selectedId]?.path : null;
+  const selectedPathIds = useMemo4(() => {
     return new Set(
       selectedPath?.map((candidate) => candidate.split(":")[0]).filter(Boolean) || []
     );
-  }, [nodes, selectedId]);
-  const trees = useMemo3(
+  }, [selectedPath]);
+  const trees = useMemo4(
     () => rootZones.map(
       (zoneCompound) => buildLayerTree({
         config,
@@ -1167,7 +1275,7 @@ var Outline = memo3(() => {
     ),
     [config, nodes, rootZones, zones]
   );
-  const Wrapper = useMemo3(() => outlineOverride || "div", [outlineOverride]);
+  const Wrapper = useMemo4(() => outlineOverride || "div", [outlineOverride]);
   return /* @__PURE__ */ jsx8(Wrapper, { children: /* @__PURE__ */ jsx8(
     LayerTree,
     {
@@ -1178,7 +1286,7 @@ var Outline = memo3(() => {
   ) });
 });
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/plugins/outline/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/plugins/outline/styles.module.css#css-module
 var styles_module_default5 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
 
 // plugins/outline/index.tsx
@@ -1191,17 +1299,17 @@ var outlinePlugin = () => ({
   icon: /* @__PURE__ */ jsx9(List, {})
 });
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/Breadcrumbs/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/components/Breadcrumbs/styles.module.css#css-module
 var styles_module_default6 = { "Breadcrumbs": "_Breadcrumbs_1e0gb_1", "Breadcrumbs-breadcrumbLabel": "_Breadcrumbs-breadcrumbLabel_1e0gb_7", "Breadcrumbs-breadcrumb": "_Breadcrumbs-breadcrumb_1e0gb_7" };
 
 // lib/use-breadcrumbs.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 var useBreadcrumbs = (renderCount) => {
   const selectedId = useAppStore((s) => s.selectedItem?.props.id);
   const config = useAppStore((s) => s.config);
   const path = useAppStore((s) => s.state.indexes.nodes[selectedId]?.path);
   const appStore = useAppStoreApi();
-  return useMemo4(() => {
+  return useMemo5(() => {
     const breadcrumbs = path?.map((zoneCompound) => {
       const [componentId] = zoneCompound.split(":");
       if (componentId === "root") {
@@ -1256,7 +1364,7 @@ var Breadcrumbs = ({
   ] });
 };
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/Fields/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/components/CredBuild/components/Fields/styles.module.css#css-module
 var styles_module_default7 = { "CredBuildFields": "_CredBuildFields_53gu7_1", "CredBuildFields--isLoading": "_CredBuildFields--isLoading_53gu7_6", "CredBuildFields-loadingOverlay": "_CredBuildFields-loadingOverlay_53gu7_10", "CredBuildFields-loadingOverlayInner": "_CredBuildFields-loadingOverlayInner_53gu7_25", "CredBuildFields-field": "_CredBuildFields-field_53gu7_32", "CredBuildFields--wrapFields": "_CredBuildFields--wrapFields_53gu7_36" };
 
 // components/CredBuild/components/Fields/index.tsx
@@ -1265,7 +1373,7 @@ import {
   useCallback as useCallback2,
   useContext as useContext3,
   useEffect as useEffect5,
-  useMemo as useMemo5
+  useMemo as useMemo6
 } from "react";
 import { useShallow as useShallow2 } from "zustand/react/shallow";
 import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -1368,7 +1476,7 @@ var FieldsChildInner = ({ fieldName }) => {
 };
 var FieldsChild = ({ fieldName }) => {
   const appStore = useAppStoreApi();
-  const initialValue = useMemo5(() => {
+  const initialValue = useMemo6(() => {
     const value = appStore.getState().getCurrentData().props?.[fieldName];
     return { [fieldName]: value };
   }, [appStore, fieldName]);
@@ -1395,7 +1503,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
     })
   );
   const isLoading = fieldsLoading || componentResolving;
-  const Wrapper = useMemo5(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = useMemo6(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ jsxs5(
     "form",
     {
@@ -1412,7 +1520,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
 };
 var Fields = memo4(FieldsInternal);
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/plugins/fields/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/plugins/fields/styles.module.css#css-module
 var styles_module_default8 = { "FieldsPlugin": "_FieldsPlugin_6as57_1", "FieldsPlugin-header": "_FieldsPlugin-header_6as57_7" };
 
 // plugins/fields/index.tsx
@@ -1437,18 +1545,18 @@ var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
 });
 
 // plugins/code/CodePanel.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/plugins/code/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/plugins/code/styles.module.css#css-module
 var styles_module_default9 = { "CodePlugin": "_CodePlugin_77s8n_1", "CodePanel": "_CodePanel_77s8n_9", "CodePanel-title": "_CodePanel-title_77s8n_18", "CodePanel-textarea": "_CodePanel-textarea_77s8n_27", "CodePanel-optionsSection": "_CodePanel-optionsSection_77s8n_49", "CodePanel-optionTitle": "_CodePanel-optionTitle_77s8n_53", "CodePanel-radioGroup": "_CodePanel-radioGroup_77s8n_62", "CodePanel-radioLabel": "_CodePanel-radioLabel_77s8n_68", "CodePanel-radioInput": "_CodePanel-radioInput_77s8n_77", "CodePanel-button": "_CodePanel-button_77s8n_87", "CodePanel-error": "_CodePanel-error_77s8n_120", "CodePanel-success": "_CodePanel-success_77s8n_131", "CodePanel-promptSection": "_CodePanel-promptSection_77s8n_142", "CodePanel-promptHeader": "_CodePanel-promptHeader_77s8n_148", "CodePanel-promptText": "_CodePanel-promptText_77s8n_155", "CodePanel-copyBtn": "_CodePanel-copyBtn_77s8n_169", "CodePanel-copyBtn--copied": "_CodePanel-copyBtn--copied_77s8n_193" };
 
 // plugins/code/CodePanel.tsx
 import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var getClassName9 = get_class_name_factory_default("CodePanel", styles_module_default9);
 var CodePanel = () => {
-  const [copied, setCopied] = useState5(false);
-  const [topic, setTopic] = useState5("");
-  const [promptType, setPromptType] = useState5("header-footer");
+  const [copied, setCopied] = useState6(false);
+  const [topic, setTopic] = useState6("");
+  const [promptType, setPromptType] = useState6("header-footer");
   const dispatch = useAppStore((s) => s.dispatch);
   const root = useAppStore((s) => s.state.data.root);
   const rootProps = root?.props || root;
@@ -1688,22 +1796,22 @@ var codePlugin = () => ({
 import {
   useCallback as useCallback12,
   useEffect as useEffect15,
-  useMemo as useMemo15,
+  useMemo as useMemo16,
   useRef as useRef9,
-  useState as useState15
+  useState as useState16
 } from "react";
 
 // components/CredBuild/components/Preview/index.tsx
-import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef3, useMemo as useMemo7, useState as useState7 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef3, useMemo as useMemo8, useState as useState8 } from "react";
 
 // components/AutoFrame/index.tsx
 import {
-  createContext as createContext2,
+  createContext as createContext3,
   useCallback as useCallback3,
   useContext as useContext4,
   useEffect as useEffect6,
   useRef as useRef2,
-  useState as useState6
+  useState as useState7
 } from "react";
 import hash from "object-hash";
 import { createPortal } from "react-dom";
@@ -1923,7 +2031,7 @@ var CopyHostStyles = ({
   }, [debug, doc, onStylesLoaded, win]);
   return /* @__PURE__ */ jsx15(Fragment4, { children });
 };
-var autoFrameContext = createContext2({});
+var autoFrameContext = createContext3({});
 var useFrame = () => useContext4(autoFrameContext);
 function AutoFrame({
   children,
@@ -1937,10 +2045,10 @@ function AutoFrame({
   frameRef,
   ...props
 }) {
-  const [loaded, setLoaded] = useState6(false);
-  const [ctx, setCtx] = useState6({});
-  const [mountTarget, setMountTarget] = useState6();
-  const [stylesLoaded, setStylesLoaded] = useState6(false);
+  const [loaded, setLoaded] = useState7(false);
+  const [ctx, setCtx] = useState7({});
+  const [mountTarget, setMountTarget] = useState7();
+  const [stylesLoaded, setStylesLoaded] = useState7(false);
   const handleStylesLoaded = useCallback3(() => {
     setStylesLoaded(true);
   }, []);
@@ -1996,7 +2104,7 @@ function AutoFrame({
 AutoFrame.displayName = "AutoFrame";
 var AutoFrame_default = AutoFrame;
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/Preview/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/components/CredBuild/components/Preview/styles.module.css#css-module
 var styles_module_default10 = { "CredBuildPreview": "_CredBuildPreview_17c6o_1", "CredBuildPreview-frame": "_CredBuildPreview-frame_17c6o_6", "CredBuildPreview-htmlEditor": "_CredBuildPreview-htmlEditor_17c6o_12", "CredBuildPreview-htmlTextarea": "_CredBuildPreview-htmlTextarea_17c6o_23" };
 
 // lib/bubble-pointer-event.ts
@@ -2089,14 +2197,14 @@ var Preview = ({ id = "credbuild-preview" }) => {
     },
     [config]
   );
-  const Frame = useMemo7(() => overrides.iframe, [overrides]);
+  const Frame = useMemo8(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
   const isHtmlMode = rootProps?.mode === "html";
   const htmlViewMode = rootProps?.htmlViewMode || (rootProps?.htmlCode ? "preview" : "code");
   const htmlCode = rootProps?.htmlCode || "";
   const ref = useRef3(null);
   useBubbleIframeEvents(ref);
-  const [localCode, setLocalCode] = useState7(htmlCode);
+  const [localCode, setLocalCode] = useState8(htmlCode);
   useEffect7(() => {
     setLocalCode(htmlCode);
   }, [htmlCode]);
@@ -2274,7 +2382,7 @@ var Preview = ({ id = "credbuild-preview" }) => {
 };
 
 // lib/use-loaded-overrides.ts
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo9 } from "react";
 
 // lib/load-overrides.ts
 var loadOverrides = ({
@@ -2316,7 +2424,7 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return useMemo8(() => {
+  return useMemo9(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
@@ -2325,28 +2433,28 @@ var useLoadedOverrides = ({
 import { deepEqual } from "fast-equals";
 
 // components/CredBuild/components/Layout/index.tsx
-import { useEffect as useEffect14, useMemo as useMemo14, useState as useState14 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo15, useState as useState15 } from "react";
 
 // components/CredBuild/context.tsx
 import {
-  createContext as createContext3,
+  createContext as createContext4,
   useContext as useContext5
 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
-var propsContext = createContext3({});
+var propsContext = createContext4({});
 function PropsProvider(props) {
   return /* @__PURE__ */ jsx17(propsContext.Provider, { value: props, children: props.children });
 }
 var usePropsContext = () => useContext5(propsContext);
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/Layout/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/components/CredBuild/components/Layout/styles.module.css#css-module
 var styles_module_default11 = { "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 useEffect8, useState as useState8 } from "react";
+import { useEffect as useEffect8, useState as useState9 } from "react";
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = useState8();
+  const [el, setEl] = useState9();
   useEffect8(() => {
     setEl(document.createElement("style"));
   }, []);
@@ -2393,9 +2501,9 @@ import { DragDropProvider } from "@dnd-kit/react";
 import {
   useCallback as useCallback6,
   useEffect as useEffect9,
-  useMemo as useMemo9,
+  useMemo as useMemo10,
   useRef as useRef4,
-  useState as useState9
+  useState as useState10
 } from "react";
 import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
 
@@ -2750,7 +2858,7 @@ var DragDropContextClient = ({
   const appStore = useAppStoreApi();
   const debouncedParamsRef = useRef4(null);
   const tempDisableFallback = useTempDisableFallback(100);
-  const [zoneStore] = useState9(() => {
+  const [zoneStore] = useState10(() => {
     const rootVirtualizers = /* @__PURE__ */ new Map();
     return createStore2(() => ({
       zoneDepthIndex: {},
@@ -2845,7 +2953,7 @@ var DragDropContextClient = ({
       );
     }
   }, [zoneStore]);
-  const [plugins] = useState9(() => [
+  const [plugins] = useState10(() => [
     ...disableAutoScroll ? defaultPreset.plugins.filter((plugin) => plugin !== AutoScroller) : defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
@@ -2893,10 +3001,10 @@ var DragDropContextClient = ({
     )
   ]);
   const sensors = useSensors();
-  const [dragListeners, setDragListeners] = useState9({});
+  const [dragListeners, setDragListeners] = useState10({});
   const dragMode = useRef4(null);
   const initialSelector = useRef4(void 0);
-  const nextContextValue = useMemo9(
+  const nextContextValue = useMemo10(
     () => ({
       mode: "edit",
       areaId: "root",
@@ -3151,9 +3259,9 @@ var DragDropContext = ({
 };
 
 // components/CredBuild/components/Header/index.tsx
-import { memo as memo5, useCallback as useCallback7, useMemo as useMemo12, useState as useState11 } from "react";
+import { memo as memo5, useCallback as useCallback7, useMemo as useMemo13, useState as useState12 } from "react";
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/MenuBar/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/components/MenuBar/styles.module.css#css-module
 var styles_module_default12 = { "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
@@ -3211,9 +3319,9 @@ function MenuBar({
 }
 
 // components/ViewportControls/index.tsx
-import { useEffect as useEffect10, useMemo as useMemo10, useState as useState10 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo11, useState as useState11 } from "react";
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/ViewportControls/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/components/ViewportControls/styles.module.css#css-module
 var styles_module_default13 = { "ViewportControls": "_ViewportControls_gefvg_1", "ViewportControls--fullScreen": "_ViewportControls--fullScreen_gefvg_5", "ViewportControls-toggleButton": "_ViewportControls-toggleButton_gefvg_14", "ViewportControls--isExpanded": "_ViewportControls--isExpanded_gefvg_38", "ViewportControls-actions": "_ViewportControls-actions_gefvg_42", "ViewportControls-actionsInner": "_ViewportControls-actionsInner_gefvg_46", "ViewportControls-divider": "_ViewportControls-divider_gefvg_76", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_gefvg_83", "ViewportControls-zoom": "_ViewportControls-zoom_gefvg_83", "ViewportButton-inner": "_ViewportButton-inner_gefvg_114", "ViewportButton--isActive": "_ViewportButton--isActive_gefvg_122" };
 
 // components/ViewportControls/index.tsx
@@ -3266,7 +3374,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = useMemo10(() => {
+  const zoomOptions = useMemo11(() => {
     const options = [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom || isNaN(autoZoom) ? [] : [
@@ -3278,13 +3386,13 @@ 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] = useState10(
+  const [activeViewport, setActiveViewport] = useState11(
     uiViewports.current.width
   );
   useEffect10(() => {
     setActiveViewport(uiViewports.current.width);
   }, [uiViewports.current.width, uiViewports]);
-  const [isExpanded, setIsExpanded] = useState10(false);
+  const [isExpanded, setIsExpanded] = useState11(false);
   return /* @__PURE__ */ jsxs9(
     "div",
     {
@@ -3345,6 +3453,8 @@ var ViewportControls = ({
             /* @__PURE__ */ jsx21(
               "select",
               {
+                "aria-label": "Zoom level",
+                title: "Zoom level",
                 className: getClassName13("zoomSelect"),
                 value: zoom.toString(),
                 onClick: (e) => {
@@ -3368,8 +3478,10 @@ var ViewportControls = ({
         /* @__PURE__ */ jsx21(
           "button",
           {
+            type: "button",
             className: getClassName13("toggleButton"),
             title: "Toggle viewport menu",
+            "aria-label": "Toggle viewport menu",
             "aria-expanded": isExpanded,
             onClick: () => setIsExpanded((s) => !s),
             children: isExpanded ? /* @__PURE__ */ jsx21(X, { size: 16 }) : /* @__PURE__ */ jsx21(Monitor, { size: 16 })
@@ -3385,18 +3497,18 @@ import { useShallow as useShallow3 } from "zustand/react/shallow";
 
 // lib/frame-context.tsx
 import {
-  createContext as createContext5,
+  createContext as createContext6,
   useContext as useContext7,
   useRef as useRef5,
-  useMemo as useMemo11
+  useMemo as useMemo12
 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
-var FrameContext = createContext5(null);
+var FrameContext = createContext6(null);
 var FrameProvider = ({
   children
 }) => {
   const frameRef = useRef5(null);
-  const value = useMemo11(
+  const value = useMemo12(
     () => ({
       frameRef
     }),
@@ -3412,7 +3524,7 @@ var useCanvasFrame = () => {
   return context;
 };
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/Header/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/components/CredBuild/components/Header/styles.module.css#css-module
 var styles_module_default14 = { "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
@@ -3432,7 +3544,7 @@ var HeaderInner = ({
   } = usePropsContext();
   const dispatch = useAppStore((s) => s.dispatch);
   const appStore = useAppStoreApi();
-  const defaultHeaderRender = useMemo12(() => {
+  const defaultHeaderRender = useMemo13(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `useCredBuild` hook instead"
@@ -3446,7 +3558,7 @@ var HeaderInner = ({
     }
     return DefaultOverride;
   }, [renderHeader, dispatch]);
-  const defaultHeaderActionsRender = useMemo12(() => {
+  const defaultHeaderActionsRender = useMemo13(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `useCredBuild` hook instead."
@@ -3466,7 +3578,7 @@ var HeaderInner = ({
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || defaultHeaderActionsRender
   );
-  const [menuOpen, setMenuOpen] = useState11(false);
+  const [menuOpen, setMenuOpen] = useState12(false);
   const rootTitle = useAppStore((s) => {
     const rootData = s.state.indexes.nodes["root"]?.data;
     return rootData.props.title ?? "";
@@ -3665,6 +3777,7 @@ var HeaderInner = ({
                     {
                       type: "button",
                       onClick: () => handleSetViewMode("code"),
+                      "aria-pressed": htmlViewMode === "code",
                       style: {
                         display: "flex",
                         alignItems: "center",
@@ -3692,6 +3805,7 @@ var HeaderInner = ({
                     {
                       type: "button",
                       onClick: () => handleSetViewMode("preview"),
+                      "aria-pressed": htmlViewMode === "preview",
                       style: {
                         display: "flex",
                         alignItems: "center",
@@ -3809,7 +3923,7 @@ var HeaderInner = ({
 };
 var Header = memo5(HeaderInner);
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/SidebarSection/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/components/SidebarSection/styles.module.css#css-module
 var styles_module_default15 = { "SidebarSection": "_SidebarSection_bv89x_1", "SidebarSection-title": "_SidebarSection-title_bv89x_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_bv89x_37", "SidebarSection-content": "_SidebarSection-content_bv89x_41", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_bv89x_50", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_bv89x_79", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_bv89x_50", "SidebarSection-heading": "_SidebarSection-heading_bv89x_91", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_bv89x_95" };
 
 // components/SidebarSection/index.tsx
@@ -3837,12 +3951,12 @@ var SidebarSection = ({
 import {
   useCallback as useCallback8,
   useEffect as useEffect11,
-  useMemo as useMemo13,
+  useMemo as useMemo14,
   useRef as useRef6,
-  useState as useState12
+  useState as useState13
 } from "react";
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/Canvas/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/components/CredBuild/components/Canvas/styles.module.css#css-module
 var styles_module_default16 = { "CredBuildCanvas": "_CredBuildCanvas_1ivia_1", "CredBuildCanvas--fullScreen": "_CredBuildCanvas--fullScreen_1ivia_22", "CredBuildCanvas-inner": "_CredBuildCanvas-inner_1ivia_33", "CredBuildCanvas-root": "_CredBuildCanvas-root_1ivia_42", "CredBuildCanvas--ready": "_CredBuildCanvas--ready_1ivia_67", "CredBuildCanvas-loader": "_CredBuildCanvas-loader_1ivia_72", "CredBuildCanvas--showLoader": "_CredBuildCanvas--showLoader_1ivia_82" };
 
 // components/CredBuild/components/Canvas/index.tsx
@@ -3899,13 +4013,13 @@ var Canvas = () => {
   const isHtmlCodeEditActive = isHtmlMode && htmlViewMode === "code";
   const isNonFullWidth = viewports.current.width !== "100%";
   const shouldApplyViewport = true;
-  const [showTransition, setShowTransition] = useState12(false);
+  const [showTransition, setShowTransition] = useState13(false);
   const isResizingRef = useRef6(false);
-  const defaultRender = useMemo13(() => {
+  const defaultRender = useMemo14(() => {
     const CredBuildDefault = ({ children }) => /* @__PURE__ */ jsx25(Fragment9, { children });
     return CredBuildDefault;
   }, []);
-  const CustomPreview = useMemo13(
+  const CustomPreview = useMemo14(
     () => overrides.preview || defaultRender,
     [overrides, defaultRender]
   );
@@ -4013,7 +4127,7 @@ var Canvas = () => {
       resizeObserver.disconnect();
     };
   }, [frameRef, resetAutoZoom]);
-  const [showLoader, setShowLoader] = useState12(false);
+  const [showLoader, setShowLoader] = useState13(false);
   useEffect11(() => {
     setTimeout(() => {
       setShowLoader(true);
@@ -4133,9 +4247,9 @@ var Canvas = () => {
 };
 
 // lib/use-sidebar-resize.ts
-import { useCallback as useCallback9, useEffect as useEffect12, useRef as useRef7, useState as useState13 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect12, useRef as useRef7, useState as useState14 } from "react";
 function useSidebarResize(position, dispatch) {
-  const [width, setWidth] = useState13(null);
+  const [width, setWidth] = useState14(null);
   const sidebarRef = useRef7(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
@@ -4216,7 +4330,7 @@ function useSidebarResize(position, dispatch) {
 // components/CredBuild/components/ResizeHandle/index.tsx
 import { useCallback as useCallback10, useRef as useRef8 } from "react";
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/ResizeHandle/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/components/CredBuild/components/ResizeHandle/styles.module.css#css-module
 var styles_module_default17 = { "ResizeHandle": "_ResizeHandle_144bf_2", "ResizeHandle--left": "_ResizeHandle--left_144bf_16", "ResizeHandle--right": "_ResizeHandle--right_144bf_20" };
 
 // components/CredBuild/components/ResizeHandle/index.tsx
@@ -4287,7 +4401,7 @@ var ResizeHandle = ({
   );
 };
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/Sidebar/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/components/CredBuild/components/Sidebar/styles.module.css#css-module
 var styles_module_default18 = { "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
@@ -4380,7 +4494,7 @@ var useDeleteHotkeys = () => {
   useHotkey({ backspace: true }, deleteSelectedComponent);
 };
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/Nav/styles.module.css#css-module
+// css-module:/home/rasyiqi/PROJECT/Credbuild/credbuild/components/CredBuild/components/Nav/styles.module.css#css-module
 var styles_module_default19 = { "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
@@ -4443,7 +4557,7 @@ var Layout = ({ children }) => {
     plugins,
     height
   } = usePropsContext();
-  const iframe = useMemo14(
+  const iframe = useMemo15(
     () => ({
       enabled: true,
       waitForStyles: true,
@@ -4497,12 +4611,12 @@ var Layout = ({ children }) => {
     };
   }, [dispatch]);
   const overrides = useAppStore((s) => s.overrides);
-  const CustomCredBuild = useMemo14(
+  const CustomCredBuild = useMemo15(
     () => overrides.credbuild || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = useState14(false);
-  const [theme, setTheme] = useState14("dark");
+  const [mounted, setMounted] = useState15(false);
+  const [theme, setTheme] = useState15("dark");
   useEffect14(() => {
     setMounted(true);
     const savedTheme = localStorage.getItem("credbuild-theme");
@@ -4542,12 +4656,12 @@ var Layout = ({ children }) => {
   const setUi = useAppStore((s) => s.setUi);
   const currentPlugin = useAppStore((s) => s.state.ui.plugin?.current);
   const appStoreApi = useAppStoreApi();
-  const [mobilePanelHeightMode, setMobilePanelHeightMode] = useState14("toggle");
-  const hasLegacySideBarPlugin = useMemo14(
+  const [mobilePanelHeightMode, setMobilePanelHeightMode] = useState15("toggle");
+  const hasLegacySideBarPlugin = useMemo15(
     () => !!plugins?.find((p) => p.name === "legacy-side-bar"),
     [plugins]
   );
-  const pluginItems = useMemo14(() => {
+  const pluginItems = useMemo15(() => {
     const details = {};
     const defaultPlugins = [
       blocksPlugin(),
@@ -4720,7 +4834,7 @@ function CredBuildProvider({ children }) {
     _experimentalFullScreenCanvas,
     _experimentalVirtualization
   } = usePropsContext();
-  const iframe = useMemo15(
+  const iframe = useMemo16(
     () => ({
       enabled: true,
       waitForStyles: true,
@@ -4728,7 +4842,7 @@ function CredBuildProvider({ children }) {
     }),
     [_iframe]
   );
-  const [generatedAppState] = useState15(() => {
+  const [generatedAppState] = useState16(() => {
     const initial = { ...defaultAppState.ui, ...initialUi };
     let clientUiState = {};
     if (Object.keys(initialData?.root || {}).length > 0 && !initialData?.root?.props) {
@@ -4775,7 +4889,7 @@ function CredBuildProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = useState15(
+  const [blendedHistories] = useState16(
     [
       ..._initialHistory?.histories || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -4790,7 +4904,7 @@ function CredBuildProvider({ children }) {
       };
     })
   );
-  const initialHistoryIndex = useMemo15(() => {
+  const initialHistoryIndex = useMemo16(() => {
     if (_initialHistory?.index !== void 0 && _initialHistory?.index >= 0 && _initialHistory?.index < blendedHistories.length) {
       return _initialHistory?.index;
     }
@@ -4801,7 +4915,7 @@ function CredBuildProvider({ children }) {
     overrides,
     plugins
   });
-  const loadedFieldTransforms = useMemo15(() => {
+  const loadedFieldTransforms = useMemo16(() => {
     const _plugins = plugins || [];
     const pluginFieldTransforms = _plugins.reduce(
       (acc, plugin) => ({ ...acc, ...plugin.fieldTransforms }),
@@ -4844,7 +4958,7 @@ function CredBuildProvider({ children }) {
       loadedFieldTransforms
     ]
   );
-  const [appStore] = useState15(
+  const [appStore] = useState16(
     () => createAppStore(generateAppStore(initialAppState))
   );
   useEffect15(() => {