@crediblemark/build 0.24.3 → 0.24.5

package/dist/{ArrayField-MR3B7WKR.mjs → ArrayField-F7OLZF6U.mjs}

@@ -1,26 +1,26 @@
 import {
   SubField
-} from "./chunk-P6XSBCUA.mjs";
+} from "./chunk-IRJS3HWQ.mjs";
 import {
   DragIcon,
   createDynamicCollisionDetector,
   setDeep,
   useSensors
-} from "./chunk-62JTNLF7.mjs";
+} from "./chunk-BQW2NTNG.mjs";
 import {
   getDeep,
   useFieldStore,
   useFieldStoreApi,
   useNestedFieldContext
-} from "./chunk-ACKK2BYK.mjs";
-import "./chunk-RUAHVDDE.mjs";
+} from "./chunk-H2LU4EW3.mjs";
+import "./chunk-2VS2BST6.mjs";
 import "./chunk-AL77I3BV.mjs";
 import {
   IconButton
-} from "./chunk-AP7SVXSU.mjs";
-import "./chunk-7HQNPCGI.mjs";
-import "./chunk-QA2U7BOE.mjs";
-import "./chunk-6TAU2PST.mjs";
+} from "./chunk-VBNE6GK2.mjs";
+import "./chunk-LBMMY5IM.mjs";
+import "./chunk-WKMRHPOM.mjs";
+import "./chunk-5OK3IPVN.mjs";
 import {
   Copy,
   List,
@@ -30,7 +30,7 @@ import {
   replace,
   useAppStore,
   useAppStoreApi
-} from "./chunk-E7XYUXJM.mjs";
+} from "./chunk-GIUKL443.mjs";
 import {
   populateIds
 } from "./chunk-64A37UUC.mjs";

package/dist/{Editor-5TR52PVR.mjs → Editor-HOZVZZIZ.mjs}

@@ -3,19 +3,19 @@ import {
 } from "./chunk-DEUK76GN.mjs";
 import {
   LoadedRichTextMenu
-} from "./chunk-FC3ZRBT2.mjs";
+} from "./chunk-6RPYD5IO.mjs";
 import {
   EditorInner
-} from "./chunk-RUAHVDDE.mjs";
+} from "./chunk-2VS2BST6.mjs";
 import "./chunk-AL77I3BV.mjs";
-import "./chunk-AP7SVXSU.mjs";
-import "./chunk-7HQNPCGI.mjs";
-import "./chunk-QA2U7BOE.mjs";
-import "./chunk-6TAU2PST.mjs";
+import "./chunk-VBNE6GK2.mjs";
+import "./chunk-LBMMY5IM.mjs";
+import "./chunk-WKMRHPOM.mjs";
+import "./chunk-5OK3IPVN.mjs";
 import {
   useAppStore,
   useAppStoreApi
-} from "./chunk-E7XYUXJM.mjs";
+} from "./chunk-GIUKL443.mjs";
 import "./chunk-64A37UUC.mjs";
 import "./chunk-SMAWAXVX.mjs";
 import "./chunk-BFHV72KK.mjs";

package/dist/{ObjectField-ZGTFFKHJ.mjs → ObjectField-4SN4ZYFF.mjs}

@@ -1,21 +1,21 @@
 import {
   SubField
-} from "./chunk-P6XSBCUA.mjs";
+} from "./chunk-IRJS3HWQ.mjs";
 import {
   getDeep,
   useFieldStoreApi,
   useNestedFieldContext
-} from "./chunk-ACKK2BYK.mjs";
-import "./chunk-RUAHVDDE.mjs";
+} from "./chunk-H2LU4EW3.mjs";
+import "./chunk-2VS2BST6.mjs";
 import "./chunk-AL77I3BV.mjs";
-import "./chunk-AP7SVXSU.mjs";
-import "./chunk-7HQNPCGI.mjs";
-import "./chunk-QA2U7BOE.mjs";
-import "./chunk-6TAU2PST.mjs";
+import "./chunk-VBNE6GK2.mjs";
+import "./chunk-LBMMY5IM.mjs";
+import "./chunk-WKMRHPOM.mjs";
+import "./chunk-5OK3IPVN.mjs";
 import {
   EllipsisVertical,
   useAppStore
-} from "./chunk-E7XYUXJM.mjs";
+} from "./chunk-GIUKL443.mjs";
 import "./chunk-64A37UUC.mjs";
 import "./chunk-SMAWAXVX.mjs";
 import {

package/dist/{chunk-RUAHVDDE.mjs → chunk-2VS2BST6.mjs}

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

package/dist/{chunk-6TAU2PST.mjs → chunk-5OK3IPVN.mjs}

@@ -1,7 +1,7 @@
 import {
   List,
   ListOrdered
-} from "./chunk-E7XYUXJM.mjs";
+} from "./chunk-GIUKL443.mjs";
 
 // components/RichTextMenu/controls/ListSelect/use-options.ts
 import { useMemo } from "react";

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

@@ -1,13 +1,13 @@
 import {
   LoadedRichTextMenu
-} from "./chunk-FC3ZRBT2.mjs";
+} from "./chunk-6RPYD5IO.mjs";
 import {
   DragIcon,
   collisionStore,
   createDynamicCollisionDetector,
   setDeep,
   useSensors
-} from "./chunk-62JTNLF7.mjs";
+} from "./chunk-BQW2NTNG.mjs";
 import {
   AutoFieldPrivate,
   Button,
@@ -16,7 +16,7 @@ import {
   fieldContextStore,
   useContextStore,
   useSafeId
-} from "./chunk-ACKK2BYK.mjs";
+} from "./chunk-H2LU4EW3.mjs";
 import {
   RichTextRenderFallback,
   SlotRender,
@@ -30,7 +30,7 @@ import {
   ActionBar,
   IconButton,
   Loader
-} from "./chunk-AP7SVXSU.mjs";
+} from "./chunk-VBNE6GK2.mjs";
 import {
   Box,
   ChartColumn,
@@ -85,7 +85,7 @@ import {
   useRegisterHistorySlice,
   useRegisterPermissionsSlice,
   useResetAutoZoom
-} from "./chunk-E7XYUXJM.mjs";
+} from "./chunk-GIUKL443.mjs";
 import {
   getItem,
   insert,
@@ -1518,7 +1518,7 @@ import {
 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var Editor = lazy(
-  () => import("./Editor-5TR52PVR.mjs").then((m) => ({
+  () => import("./Editor-HOZVZZIZ.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -4006,7 +4006,7 @@ function PropsProvider(props) {
 var usePropsContext = () => useContext10(propsContext);
 
 // css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Layout/styles.module.css#css-module
-var styles_module_default13 = { "CredBuildLayout": "_CredBuildLayout_ildl0_1", "CredBuildLayout-inner": "_CredBuildLayout-inner_ildl0_8", "CredBuildLayout--leftSideBarVisible": "_CredBuildLayout--leftSideBarVisible_ildl0_29", "CredBuildLayout--rightSideBarVisible": "_CredBuildLayout--rightSideBarVisible_ildl0_33", "CredBuild--hidePlugins": "_CredBuild--hidePlugins_ildl0_37", "CredBuildLayout-item": "_CredBuildLayout-item_ildl0_43", "CredBuildLayout-header": "_CredBuildLayout-header_ildl0_49", "CredBuildLayout-left": "_CredBuildLayout-left_ildl0_54", "CredBuildLayout-editor": "_CredBuildLayout-editor_ildl0_67", "CredBuildLayout-right": "_CredBuildLayout-right_ildl0_76", "CredBuildLayout-sidebar": "_CredBuildLayout-sidebar_ildl0_93", "CredBuildPluginTab": "_CredBuildPluginTab_ildl0_108", "CredBuildPluginTab--visible": "_CredBuildPluginTab--visible_ildl0_115", "CredBuildPluginTab-body": "_CredBuildPluginTab-body_ildl0_119", "CredBuildLayout--mounted": "_CredBuildLayout--mounted_ildl0_135" };
+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";
@@ -4932,18 +4932,18 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = useMemo16(
-    () => [
+  const zoomOptions = useMemo16(() => {
+    const options = [
       ...defaultZoomOptions,
-      ...defaultsContainAutoZoom ? [] : [
+      ...defaultsContainAutoZoom || isNaN(autoZoom) ? [] : [
         {
           value: autoZoom,
           label: `${(autoZoom * 100).toFixed(0)}% (Auto)`
         }
       ]
-    ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
-    [autoZoom, defaultsContainAutoZoom]
-  );
+    ].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(
     uiViewports.current.width
   );
@@ -4976,15 +4976,15 @@ var ViewportControls = ({
             ActionButton,
             {
               title: "Zoom viewport out",
-              disabled: zoom <= zoomOptions[0]?.value,
+              disabled: zoom <= (zoomOptions[0]?.value || 0),
               onClick: (e) => {
                 e.stopPropagation();
-                onZoom(
-                  zoomOptions[Math.max(
-                    zoomOptions.findIndex((option) => option.value === zoom) - 1,
-                    0
-                  )].value
+                const currentIndex = zoomOptions.findIndex((option) => option.value === zoom);
+                const nextIndex = Math.max(
+                  (currentIndex === -1 ? zoomOptions.length : currentIndex) - 1,
+                  0
                 );
+                onZoom(zoomOptions[nextIndex]?.value || 1);
               },
               children: /* @__PURE__ */ jsx28(ZoomOut, { size: 16 })
             }
@@ -4993,15 +4993,15 @@ var ViewportControls = ({
             ActionButton,
             {
               title: "Zoom viewport in",
-              disabled: zoom >= zoomOptions[zoomOptions.length - 1]?.value,
+              disabled: zoom >= (zoomOptions[zoomOptions.length - 1]?.value || 2),
               onClick: (e) => {
                 e.stopPropagation();
-                onZoom(
-                  zoomOptions[Math.min(
-                    zoomOptions.findIndex((option) => option.value === zoom) + 1,
-                    zoomOptions.length - 1
-                  )].value
+                const currentIndex = zoomOptions.findIndex((option) => option.value === zoom);
+                const nextIndex = Math.min(
+                  (currentIndex === -1 ? -1 : currentIndex) + 1,
+                  zoomOptions.length - 1
                 );
+                onZoom(zoomOptions[nextIndex]?.value || 1);
               },
               children: /* @__PURE__ */ jsx28(ZoomIn, { size: 16 })
             }
@@ -5583,7 +5583,8 @@ var Canvas = () => {
             className: getClassName17("root"),
             style: {
               width: iframe.enabled ? viewports.current.width : "100%",
-              height: zoomConfig.rootHeight,
+              height: !zoomConfig.rootHeight || isNaN(zoomConfig.rootHeight) ? "100%" : zoomConfig.rootHeight,
+              minHeight: "100%",
               transform: iframe.enabled ? `scale(${zoomConfig.zoom})` : void 0,
               transition: showTransition ? `width ${TRANSITION_DURATION}ms ease-out, height ${TRANSITION_DURATION}ms ease-out, transform ${TRANSITION_DURATION}ms ease-out` : "",
               overflow: iframe.enabled ? void 0 : "auto"
@@ -6084,7 +6085,7 @@ var Layout = ({ children }) => {
       })}`,
       "data-theme": theme,
       id: instanceId,
-      style: { height },
+      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(
           "div",
@@ -6097,7 +6098,7 @@ var Layout = ({ children }) => {
               mobilePanelHeightToggle: mobilePanelHeightMode === "toggle",
               mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content"
             }),
-            style: { height },
+            style: { height: typeof height === "number" && isNaN(height) ? void 0 : height },
             children: /* @__PURE__ */ jsxs16(
               "div",
               {
@@ -6147,7 +6148,7 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx36("div", { className: getLayoutClassName("editor"), children: /* @__PURE__ */ jsx36(Canvas, {}) }),
+                  /* @__PURE__ */ jsx36(Canvas, {}),
                   !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx36(
                     Sidebar,
                     {

package/dist/{chunk-FC3ZRBT2.mjs → chunk-6RPYD5IO.mjs}

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

package/dist/{chunk-62JTNLF7.mjs → chunk-BQW2NTNG.mjs}

@@ -1,6 +1,6 @@
 import {
   GripVertical
-} from "./chunk-E7XYUXJM.mjs";
+} from "./chunk-GIUKL443.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-BFHV72KK.mjs";

package/dist/{chunk-E7XYUXJM.mjs → chunk-GIUKL443.mjs}

@@ -1652,22 +1652,22 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
   const viewportHeight = uiViewport.height === "auto" ? frameHeight : uiViewport.height;
   let rootHeight = 0;
   let autoZoom = 1;
-  if (typeof uiViewport.width === "number" && (uiViewport.width > frameWidth || viewportHeight > frameHeight)) {
+  if (typeof uiViewport.width === "number" && uiViewport.width > 0 && (uiViewport.width > frameWidth || typeof viewportHeight === "number" && viewportHeight > frameHeight)) {
     const widthZoom = Math.min(frameWidth / uiViewport.width, 1);
-    const heightZoom = Math.min(frameHeight / viewportHeight, 1);
-    zoom = widthZoom;
+    const heightZoom = typeof viewportHeight === "number" ? Math.min(frameHeight / viewportHeight, 1) : 1;
+    zoom = Math.max(widthZoom, 0.01);
     if (widthZoom < heightZoom) {
-      rootHeight = viewportHeight / zoom;
+      rootHeight = typeof viewportHeight === "number" ? viewportHeight / zoom : frameHeight;
     } else {
-      rootHeight = viewportHeight;
-      zoom = heightZoom;
+      rootHeight = typeof viewportHeight === "number" ? viewportHeight : 0;
+      zoom = Math.max(heightZoom, 0.01);
     }
     autoZoom = zoom;
   } else {
     if (RESET_ZOOM_SMALLER_THAN_FRAME) {
       autoZoom = 1;
       zoom = 1;
-      rootHeight = viewportHeight;
+      rootHeight = typeof viewportHeight === "number" ? viewportHeight : 0;
     }
   }
   return { autoZoom, rootHeight, zoom };

package/dist/{chunk-ACKK2BYK.mjs → chunk-H2LU4EW3.mjs}

@@ -1,11 +1,11 @@
 import {
   EditorInner
-} from "./chunk-RUAHVDDE.mjs";
+} from "./chunk-2VS2BST6.mjs";
 import {
   IconButton,
   LoadedRichTextMenuInner,
   Loader
-} from "./chunk-AP7SVXSU.mjs";
+} from "./chunk-VBNE6GK2.mjs";
 import {
   ChevronDown,
   CircleCheckBig,
@@ -17,7 +17,7 @@ import {
   SlidersHorizontal,
   Type,
   useAppStore
-} from "./chunk-E7XYUXJM.mjs";
+} from "./chunk-GIUKL443.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-BFHV72KK.mjs";
@@ -907,7 +907,7 @@ EditorFallback.displayName = "EditorFallback";
 // components/AutoField/fields/RichtextField/index.tsx
 import { Fragment as Fragment4, jsx as jsx14 } from "react/jsx-runtime";
 var Editor = lazy(
-  () => import("./Editor-5TR52PVR.mjs").then((m) => ({
+  () => import("./Editor-HOZVZZIZ.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -944,8 +944,8 @@ var RichtextField = ({
 
 // components/AutoField/AutoFieldInternal.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
-var ArrayField = lazy2(() => import("./ArrayField-MR3B7WKR.mjs").then((m) => ({ default: m.ArrayField })));
-var ObjectField = lazy2(() => import("./ObjectField-ZGTFFKHJ.mjs").then((m) => ({ default: m.ObjectField })));
+var ArrayField = lazy2(() => import("./ArrayField-F7OLZF6U.mjs").then((m) => ({ default: m.ArrayField })));
+var ObjectField = lazy2(() => import("./ObjectField-4SN4ZYFF.mjs").then((m) => ({ default: m.ObjectField })));
 var getClassNameWrapper = get_class_name_factory_default("InputWrapper", styles_module_default);
 var defaultFields = {
   array: ArrayField,

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

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

package/dist/{chunk-7HQNPCGI.mjs → chunk-LBMMY5IM.mjs}

@@ -3,7 +3,7 @@ import {
   TextAlignEnd,
   TextAlignJustify,
   TextAlignStart
-} from "./chunk-E7XYUXJM.mjs";
+} from "./chunk-GIUKL443.mjs";
 
 // components/RichTextMenu/controls/AlignSelect/use-options.ts
 import { useMemo } from "react";

package/dist/{chunk-AP7SVXSU.mjs → chunk-VBNE6GK2.mjs}

@@ -1,12 +1,12 @@
 import {
   useAlignOptions
-} from "./chunk-7HQNPCGI.mjs";
+} from "./chunk-LBMMY5IM.mjs";
 import {
   useHeadingOptions
-} from "./chunk-QA2U7BOE.mjs";
+} from "./chunk-WKMRHPOM.mjs";
 import {
   useListOptions
-} from "./chunk-6TAU2PST.mjs";
+} from "./chunk-5OK3IPVN.mjs";
 import {
   Bold,
   Code,
@@ -26,7 +26,7 @@ import {
   TextAlignStart,
   Underline,
   useControlContext
-} from "./chunk-E7XYUXJM.mjs";
+} from "./chunk-GIUKL443.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-BFHV72KK.mjs";
@@ -310,7 +310,7 @@ function AlignSelectFallback() {
 // components/RichTextMenu/controls/AlignSelect/index.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
 var AlignSelectLoaded = lazy(
-  () => import("./loaded-PWOXIOQ2.mjs").then((m) => ({
+  () => import("./loaded-GYA4OMNE.mjs").then((m) => ({
     default: m.AlignSelectLoaded
   }))
 );
@@ -529,7 +529,7 @@ function HeadingSelectFallback() {
 // components/RichTextMenu/controls/HeadingSelect/index.tsx
 import { jsx as jsx22 } from "react/jsx-runtime";
 var HeadingSelectLoaded = lazy2(
-  () => import("./loaded-QZ5Z7NDX.mjs").then((m) => ({
+  () => import("./loaded-2CPFB62H.mjs").then((m) => ({
     default: m.HeadingSelectLoaded
   }))
 );
@@ -559,7 +559,7 @@ function ListSelectFallback() {
 // components/RichTextMenu/controls/ListSelect/index.tsx
 import { jsx as jsx24 } from "react/jsx-runtime";
 var ListSelectLoaded = lazy3(
-  () => import("./loaded-IATND5Y2.mjs").then((m) => ({
+  () => import("./loaded-3NNC6Q35.mjs").then((m) => ({
     default: m.ListSelectLoaded
   }))
 );

package/dist/{chunk-QA2U7BOE.mjs → chunk-WKMRHPOM.mjs}

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

package/dist/{full-AGQP4VE6.mjs → full-65U7W6EN.mjs}

@@ -1,10 +1,10 @@
 import {
   LoadedRichTextMenuInner
-} from "./chunk-AP7SVXSU.mjs";
-import "./chunk-7HQNPCGI.mjs";
-import "./chunk-QA2U7BOE.mjs";
-import "./chunk-6TAU2PST.mjs";
-import "./chunk-E7XYUXJM.mjs";
+} from "./chunk-VBNE6GK2.mjs";
+import "./chunk-LBMMY5IM.mjs";
+import "./chunk-WKMRHPOM.mjs";
+import "./chunk-5OK3IPVN.mjs";
+import "./chunk-GIUKL443.mjs";
 import "./chunk-64A37UUC.mjs";
 import "./chunk-SMAWAXVX.mjs";
 import "./chunk-BFHV72KK.mjs";

package/dist/index.css

@@ -2054,13 +2054,13 @@ body:has(._DropZone--isAnimating_1vmgt_68:empty) [data-credbuild-overlay] {
 }
 
 /* css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Layout/styles.module.css/#css-module-data */
-._CredBuildLayout_ildl0_1 {
+._CredBuildLayout_14aaz_1 {
   display: flex;
   flex: 1;
   height: 100vh;
   overflow: hidden;
 }
-._CredBuildLayout-inner_ildl0_8 {
+._CredBuildLayout-inner_14aaz_8 {
   display: grid;
   flex: 1;
   grid-template-areas: "header";
@@ -2070,7 +2070,7 @@ body:has(._DropZone--isAnimating_1vmgt_68:empty) [data-credbuild-overlay] {
   overflow: hidden;
 }
 @media (min-width: 638px) {
-  ._CredBuildLayout-inner_ildl0_8 {
+  ._CredBuildLayout-inner_14aaz_8 {
     --credbuild-side-bar-width: 300px;
     --cb-left-sidebar-width: 0px;
     --cb-right-sidebar-width: 0px;
@@ -2078,27 +2078,27 @@ body:has(._DropZone--isAnimating_1vmgt_68:empty) [data-credbuild-overlay] {
     grid-template-columns: var(--cb-left-sidebar-width) 1fr var(--cb-right-sidebar-width);
     grid-template-rows: 40px 1fr;
   }
-  ._CredBuildLayout--leftSideBarVisible_ildl0_29 ._CredBuildLayout-inner_ildl0_8 {
+  ._CredBuildLayout--leftSideBarVisible_14aaz_29 ._CredBuildLayout-inner_14aaz_8 {
     --cb-left-sidebar-width: var(--credbuild-user-left-side-bar-width, var(--credbuild-side-bar-width));
   }
-  ._CredBuildLayout--rightSideBarVisible_ildl0_33 ._CredBuildLayout-inner_ildl0_8 {
+  ._CredBuildLayout--rightSideBarVisible_14aaz_33 ._CredBuildLayout-inner_14aaz_8 {
     --cb-right-sidebar-width: var(--credbuild-user-right-side-bar-width, var(--credbuild-side-bar-width));
   }
-  ._CredBuild--hidePlugins_ildl0_37 ._CredBuildLayout-inner_ildl0_8 {
+  ._CredBuild--hidePlugins_14aaz_37 ._CredBuildLayout-inner_14aaz_8 {
     grid-template-areas: "header header" "editor right";
     grid-template-columns: 1fr auto;
   }
 }
-._CredBuildLayout-item_ildl0_43 {
+._CredBuildLayout-item_14aaz_43 {
   box-sizing: border-box;
   overflow: hidden;
   position: relative;
 }
-._CredBuildLayout-header_ildl0_49 {
+._CredBuildLayout-header_14aaz_49 {
   grid-area: header;
   z-index: 20;
 }
-._CredBuildLayout-left_ildl0_54 {
+._CredBuildLayout-left_14aaz_54 {
   grid-area: left;
   display: flex;
   flex-direction: column;
@@ -2106,36 +2106,35 @@ body:has(._DropZone--isAnimating_1vmgt_68:empty) [data-credbuild-overlay] {
   overflow: hidden;
   border-right: 1px solid var(--credbuild-color-grey-10);
 }
-._CredBuildLayout_ildl0_1:not(._CredBuildLayout--leftSideBarVisible_ildl0_29) ._CredBuildLayout-left_ildl0_54 {
+._CredBuildLayout_14aaz_1:not(._CredBuildLayout--leftSideBarVisible_14aaz_29) ._CredBuildLayout-left_14aaz_54 {
   border-right: none;
 }
-._CredBuildLayout-editor_ildl0_67 {
+._CredBuildLayout-editor_14aaz_67 {
   grid-area: editor;
   background-color: var(--credbuild-color-grey-09);
   display: flex;
   flex-direction: column;
   position: relative;
-  overflow: auto;
 }
-._CredBuildLayout-right_ildl0_76 {
+._CredBuildLayout-right_14aaz_75 {
   grid-area: right;
   z-index: 10;
   border-left: 1px solid var(--credbuild-color-grey-10);
   overflow: auto;
 }
-._CredBuildLayout_ildl0_1:not(._CredBuildLayout--rightSideBarVisible_ildl0_33) ._CredBuildLayout-right_ildl0_76 {
+._CredBuildLayout_14aaz_1:not(._CredBuildLayout--rightSideBarVisible_14aaz_33) ._CredBuildLayout-right_14aaz_75 {
   border-left: none;
 }
-._CredBuildLayout-left_ildl0_54,
-._CredBuildLayout-right_ildl0_76 {
+._CredBuildLayout-left_14aaz_54,
+._CredBuildLayout-right_14aaz_75 {
   background-color: var(--credbuild-color-white);
   height: 100%;
 }
-._CredBuildLayout-sidebar_ildl0_93 {
+._CredBuildLayout-sidebar_14aaz_92 {
   display: none;
 }
 @media (min-width: 638px) {
-  ._CredBuildLayout-sidebar_ildl0_93 {
+  ._CredBuildLayout-sidebar_14aaz_92 {
     display: block;
     height: 100%;
     overflow: hidden;
@@ -2143,31 +2142,31 @@ body:has(._DropZone--isAnimating_1vmgt_68:empty) [data-credbuild-overlay] {
     flex-direction: column;
   }
 }
-._CredBuildPluginTab_ildl0_108 {
+._CredBuildPluginTab_14aaz_107 {
   display: none;
   flex-direction: column;
   flex: 1;
   overflow: hidden;
 }
-._CredBuildPluginTab--visible_ildl0_115 {
+._CredBuildPluginTab--visible_14aaz_114 {
   display: flex;
 }
-._CredBuildPluginTab-body_ildl0_119 {
+._CredBuildPluginTab-body_14aaz_118 {
   display: flex;
   flex-direction: column;
   flex: 1;
   overflow-y: auto;
   padding-bottom: 32px;
 }
-._CredBuildLayout-left_ildl0_54,
-._CredBuildLayout-right_ildl0_76,
-._CredBuildLayout-header_ildl0_49 {
+._CredBuildLayout-left_14aaz_54,
+._CredBuildLayout-right_14aaz_75,
+._CredBuildLayout-header_14aaz_49 {
   border-radius: 0 !important;
   margin: 0 !important;
   box-shadow: none !important;
   border-top: none;
 }
-._CredBuildLayout--mounted_ildl0_135 ._CredBuildLayout-inner_ildl0_8 {
+._CredBuildLayout--mounted_14aaz_134 ._CredBuildLayout-inner_14aaz_8 {
   opacity: 1;
 }
 

package/dist/index.js

@@ -4405,22 +4405,22 @@ var init_get_zoom_config = __esm({
       const viewportHeight = uiViewport.height === "auto" ? frameHeight : uiViewport.height;
       let rootHeight = 0;
       let autoZoom = 1;
-      if (typeof uiViewport.width === "number" && (uiViewport.width > frameWidth || viewportHeight > frameHeight)) {
+      if (typeof uiViewport.width === "number" && uiViewport.width > 0 && (uiViewport.width > frameWidth || typeof viewportHeight === "number" && viewportHeight > frameHeight)) {
         const widthZoom = Math.min(frameWidth / uiViewport.width, 1);
-        const heightZoom = Math.min(frameHeight / viewportHeight, 1);
-        zoom = widthZoom;
+        const heightZoom = typeof viewportHeight === "number" ? Math.min(frameHeight / viewportHeight, 1) : 1;
+        zoom = Math.max(widthZoom, 0.01);
         if (widthZoom < heightZoom) {
-          rootHeight = viewportHeight / zoom;
+          rootHeight = typeof viewportHeight === "number" ? viewportHeight / zoom : frameHeight;
         } else {
-          rootHeight = viewportHeight;
-          zoom = heightZoom;
+          rootHeight = typeof viewportHeight === "number" ? viewportHeight : 0;
+          zoom = Math.max(heightZoom, 0.01);
         }
         autoZoom = zoom;
       } else {
         if (RESET_ZOOM_SMALLER_THAN_FRAME) {
           autoZoom = 1;
           zoom = 1;
-          rootHeight = viewportHeight;
+          rootHeight = typeof viewportHeight === "number" ? viewportHeight : 0;
         }
       }
       return { autoZoom, rootHeight, zoom };
@@ -12509,7 +12509,7 @@ var usePropsContext = () => (0, import_react86.useContext)(propsContext);
 
 // css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Layout/styles.module.css#css-module
 init_react_import();
-var styles_module_default22 = { "CredBuildLayout": "_CredBuildLayout_ildl0_1", "CredBuildLayout-inner": "_CredBuildLayout-inner_ildl0_8", "CredBuildLayout--leftSideBarVisible": "_CredBuildLayout--leftSideBarVisible_ildl0_29", "CredBuildLayout--rightSideBarVisible": "_CredBuildLayout--rightSideBarVisible_ildl0_33", "CredBuild--hidePlugins": "_CredBuild--hidePlugins_ildl0_37", "CredBuildLayout-item": "_CredBuildLayout-item_ildl0_43", "CredBuildLayout-header": "_CredBuildLayout-header_ildl0_49", "CredBuildLayout-left": "_CredBuildLayout-left_ildl0_54", "CredBuildLayout-editor": "_CredBuildLayout-editor_ildl0_67", "CredBuildLayout-right": "_CredBuildLayout-right_ildl0_76", "CredBuildLayout-sidebar": "_CredBuildLayout-sidebar_ildl0_93", "CredBuildPluginTab": "_CredBuildPluginTab_ildl0_108", "CredBuildPluginTab--visible": "_CredBuildPluginTab--visible_ildl0_115", "CredBuildPluginTab-body": "_CredBuildPluginTab-body_ildl0_119", "CredBuildLayout--mounted": "_CredBuildLayout--mounted_ildl0_135" };
+var styles_module_default22 = { "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
 init_react_import();
@@ -13480,18 +13480,18 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = (0, import_react91.useMemo)(
-    () => [
+  const zoomOptions = (0, import_react91.useMemo)(() => {
+    const options = [
       ...defaultZoomOptions,
-      ...defaultsContainAutoZoom ? [] : [
+      ...defaultsContainAutoZoom || isNaN(autoZoom) ? [] : [
         {
           value: autoZoom,
           label: `${(autoZoom * 100).toFixed(0)}% (Auto)`
         }
       ]
-    ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
-    [autoZoom, defaultsContainAutoZoom]
-  );
+    ].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] = (0, import_react91.useState)(
     uiViewports.current.width
   );
@@ -13524,15 +13524,15 @@ var ViewportControls = ({
             ActionButton,
             {
               title: "Zoom viewport out",
-              disabled: zoom <= zoomOptions[0]?.value,
+              disabled: zoom <= (zoomOptions[0]?.value || 0),
               onClick: (e) => {
                 e.stopPropagation();
-                onZoom(
-                  zoomOptions[Math.max(
-                    zoomOptions.findIndex((option) => option.value === zoom) - 1,
-                    0
-                  )].value
+                const currentIndex = zoomOptions.findIndex((option) => option.value === zoom);
+                const nextIndex = Math.max(
+                  (currentIndex === -1 ? zoomOptions.length : currentIndex) - 1,
+                  0
                 );
+                onZoom(zoomOptions[nextIndex]?.value || 1);
               },
               children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ZoomOut, { size: 16 })
             }
@@ -13541,15 +13541,15 @@ var ViewportControls = ({
             ActionButton,
             {
               title: "Zoom viewport in",
-              disabled: zoom >= zoomOptions[zoomOptions.length - 1]?.value,
+              disabled: zoom >= (zoomOptions[zoomOptions.length - 1]?.value || 2),
               onClick: (e) => {
                 e.stopPropagation();
-                onZoom(
-                  zoomOptions[Math.min(
-                    zoomOptions.findIndex((option) => option.value === zoom) + 1,
-                    zoomOptions.length - 1
-                  )].value
+                const currentIndex = zoomOptions.findIndex((option) => option.value === zoom);
+                const nextIndex = Math.min(
+                  (currentIndex === -1 ? -1 : currentIndex) + 1,
+                  zoomOptions.length - 1
                 );
+                onZoom(zoomOptions[nextIndex]?.value || 1);
               },
               children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ZoomIn, { size: 16 })
             }
@@ -14214,7 +14214,8 @@ var Canvas = () => {
             className: getClassName36("root"),
             style: {
               width: iframe.enabled ? viewports.current.width : "100%",
-              height: zoomConfig.rootHeight,
+              height: !zoomConfig.rootHeight || isNaN(zoomConfig.rootHeight) ? "100%" : zoomConfig.rootHeight,
+              minHeight: "100%",
               transform: iframe.enabled ? `scale(${zoomConfig.zoom})` : void 0,
               transition: showTransition ? `width ${TRANSITION_DURATION}ms ease-out, height ${TRANSITION_DURATION}ms ease-out, transform ${TRANSITION_DURATION}ms ease-out` : "",
               overflow: iframe.enabled ? void 0 : "auto"
@@ -14809,7 +14810,7 @@ var Layout = ({ children }) => {
       })}`,
       "data-theme": theme,
       id: instanceId,
-      style: { height },
+      style: { height: typeof height === "number" && isNaN(height) ? void 0 : height },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(DragDropContext, { disableAutoScroll: dnd?.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(CustomCredBuild, { children: children || /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
           "div",
@@ -14822,7 +14823,7 @@ var Layout = ({ children }) => {
               mobilePanelHeightToggle: mobilePanelHeightMode === "toggle",
               mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content"
             }),
-            style: { height },
+            style: { height: typeof height === "number" && isNaN(height) ? void 0 : height },
             children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
               "div",
               {
@@ -14872,7 +14873,7 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: getLayoutClassName("editor"), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Canvas, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Canvas, {}),
                   !hasDesktopFieldsPlugin && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
                     Sidebar,
                     {

package/dist/index.mjs

@@ -12,17 +12,17 @@ import {
   registerOverlayPortal,
   useCredBuild,
   useGetCredBuild
-} from "./chunk-XUV5DF24.mjs";
-import "./chunk-FC3ZRBT2.mjs";
+} from "./chunk-5VWWS4RS.mjs";
+import "./chunk-6RPYD5IO.mjs";
 import {
   setDeep
-} from "./chunk-62JTNLF7.mjs";
+} from "./chunk-BQW2NTNG.mjs";
 import {
   AutoField,
   Button,
   FieldLabel
-} from "./chunk-ACKK2BYK.mjs";
-import "./chunk-RUAHVDDE.mjs";
+} from "./chunk-H2LU4EW3.mjs";
+import "./chunk-2VS2BST6.mjs";
 import {
   migrate,
   resolveAllData,
@@ -37,11 +37,11 @@ import {
   Label,
   RichTextMenu,
   Separator
-} from "./chunk-AP7SVXSU.mjs";
-import "./chunk-7HQNPCGI.mjs";
-import "./chunk-QA2U7BOE.mjs";
-import "./chunk-6TAU2PST.mjs";
-import "./chunk-E7XYUXJM.mjs";
+} from "./chunk-VBNE6GK2.mjs";
+import "./chunk-LBMMY5IM.mjs";
+import "./chunk-WKMRHPOM.mjs";
+import "./chunk-5OK3IPVN.mjs";
+import "./chunk-GIUKL443.mjs";
 import "./chunk-64A37UUC.mjs";
 import "./chunk-SMAWAXVX.mjs";
 import "./chunk-BFHV72KK.mjs";

package/dist/{loaded-QZ5Z7NDX.mjs → loaded-2CPFB62H.mjs}

@@ -1,11 +1,11 @@
 import {
   useHeadingOptions
-} from "./chunk-QA2U7BOE.mjs";
+} from "./chunk-WKMRHPOM.mjs";
 import {
   Heading,
   SelectControl,
   useControlContext
-} from "./chunk-E7XYUXJM.mjs";
+} from "./chunk-GIUKL443.mjs";
 import "./chunk-64A37UUC.mjs";
 import "./chunk-SMAWAXVX.mjs";
 import "./chunk-BFHV72KK.mjs";

package/dist/{loaded-IATND5Y2.mjs → loaded-3NNC6Q35.mjs}

@@ -1,11 +1,11 @@
 import {
   useListOptions
-} from "./chunk-6TAU2PST.mjs";
+} from "./chunk-5OK3IPVN.mjs";
 import {
   List,
   SelectControl,
   useControlContext
-} from "./chunk-E7XYUXJM.mjs";
+} from "./chunk-GIUKL443.mjs";
 import "./chunk-64A37UUC.mjs";
 import "./chunk-SMAWAXVX.mjs";
 import "./chunk-BFHV72KK.mjs";

package/dist/{loaded-PWOXIOQ2.mjs → loaded-GYA4OMNE.mjs}

@@ -1,11 +1,11 @@
 import {
   useAlignOptions
-} from "./chunk-7HQNPCGI.mjs";
+} from "./chunk-LBMMY5IM.mjs";
 import {
   SelectControl,
   TextAlignStart,
   useControlContext
-} from "./chunk-E7XYUXJM.mjs";
+} from "./chunk-GIUKL443.mjs";
 import "./chunk-64A37UUC.mjs";
 import "./chunk-SMAWAXVX.mjs";
 import "./chunk-BFHV72KK.mjs";

package/dist/no-external.css

@@ -1817,13 +1817,13 @@ body:has(._DropZone--isAnimating_1vmgt_68:empty) [data-credbuild-overlay] {
 }
 
 /* css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Layout/styles.module.css/#css-module-data */
-._CredBuildLayout_ildl0_1 {
+._CredBuildLayout_14aaz_1 {
   display: flex;
   flex: 1;
   height: 100vh;
   overflow: hidden;
 }
-._CredBuildLayout-inner_ildl0_8 {
+._CredBuildLayout-inner_14aaz_8 {
   display: grid;
   flex: 1;
   grid-template-areas: "header";
@@ -1833,7 +1833,7 @@ body:has(._DropZone--isAnimating_1vmgt_68:empty) [data-credbuild-overlay] {
   overflow: hidden;
 }
 @media (min-width: 638px) {
-  ._CredBuildLayout-inner_ildl0_8 {
+  ._CredBuildLayout-inner_14aaz_8 {
     --credbuild-side-bar-width: 300px;
     --cb-left-sidebar-width: 0px;
     --cb-right-sidebar-width: 0px;
@@ -1841,27 +1841,27 @@ body:has(._DropZone--isAnimating_1vmgt_68:empty) [data-credbuild-overlay] {
     grid-template-columns: var(--cb-left-sidebar-width) 1fr var(--cb-right-sidebar-width);
     grid-template-rows: 40px 1fr;
   }
-  ._CredBuildLayout--leftSideBarVisible_ildl0_29 ._CredBuildLayout-inner_ildl0_8 {
+  ._CredBuildLayout--leftSideBarVisible_14aaz_29 ._CredBuildLayout-inner_14aaz_8 {
     --cb-left-sidebar-width: var(--credbuild-user-left-side-bar-width, var(--credbuild-side-bar-width));
   }
-  ._CredBuildLayout--rightSideBarVisible_ildl0_33 ._CredBuildLayout-inner_ildl0_8 {
+  ._CredBuildLayout--rightSideBarVisible_14aaz_33 ._CredBuildLayout-inner_14aaz_8 {
     --cb-right-sidebar-width: var(--credbuild-user-right-side-bar-width, var(--credbuild-side-bar-width));
   }
-  ._CredBuild--hidePlugins_ildl0_37 ._CredBuildLayout-inner_ildl0_8 {
+  ._CredBuild--hidePlugins_14aaz_37 ._CredBuildLayout-inner_14aaz_8 {
     grid-template-areas: "header header" "editor right";
     grid-template-columns: 1fr auto;
   }
 }
-._CredBuildLayout-item_ildl0_43 {
+._CredBuildLayout-item_14aaz_43 {
   box-sizing: border-box;
   overflow: hidden;
   position: relative;
 }
-._CredBuildLayout-header_ildl0_49 {
+._CredBuildLayout-header_14aaz_49 {
   grid-area: header;
   z-index: 20;
 }
-._CredBuildLayout-left_ildl0_54 {
+._CredBuildLayout-left_14aaz_54 {
   grid-area: left;
   display: flex;
   flex-direction: column;
@@ -1869,36 +1869,35 @@ body:has(._DropZone--isAnimating_1vmgt_68:empty) [data-credbuild-overlay] {
   overflow: hidden;
   border-right: 1px solid var(--credbuild-color-grey-10);
 }
-._CredBuildLayout_ildl0_1:not(._CredBuildLayout--leftSideBarVisible_ildl0_29) ._CredBuildLayout-left_ildl0_54 {
+._CredBuildLayout_14aaz_1:not(._CredBuildLayout--leftSideBarVisible_14aaz_29) ._CredBuildLayout-left_14aaz_54 {
   border-right: none;
 }
-._CredBuildLayout-editor_ildl0_67 {
+._CredBuildLayout-editor_14aaz_67 {
   grid-area: editor;
   background-color: var(--credbuild-color-grey-09);
   display: flex;
   flex-direction: column;
   position: relative;
-  overflow: auto;
 }
-._CredBuildLayout-right_ildl0_76 {
+._CredBuildLayout-right_14aaz_75 {
   grid-area: right;
   z-index: 10;
   border-left: 1px solid var(--credbuild-color-grey-10);
   overflow: auto;
 }
-._CredBuildLayout_ildl0_1:not(._CredBuildLayout--rightSideBarVisible_ildl0_33) ._CredBuildLayout-right_ildl0_76 {
+._CredBuildLayout_14aaz_1:not(._CredBuildLayout--rightSideBarVisible_14aaz_33) ._CredBuildLayout-right_14aaz_75 {
   border-left: none;
 }
-._CredBuildLayout-left_ildl0_54,
-._CredBuildLayout-right_ildl0_76 {
+._CredBuildLayout-left_14aaz_54,
+._CredBuildLayout-right_14aaz_75 {
   background-color: var(--credbuild-color-white);
   height: 100%;
 }
-._CredBuildLayout-sidebar_ildl0_93 {
+._CredBuildLayout-sidebar_14aaz_92 {
   display: none;
 }
 @media (min-width: 638px) {
-  ._CredBuildLayout-sidebar_ildl0_93 {
+  ._CredBuildLayout-sidebar_14aaz_92 {
     display: block;
     height: 100%;
     overflow: hidden;
@@ -1906,31 +1905,31 @@ body:has(._DropZone--isAnimating_1vmgt_68:empty) [data-credbuild-overlay] {
     flex-direction: column;
   }
 }
-._CredBuildPluginTab_ildl0_108 {
+._CredBuildPluginTab_14aaz_107 {
   display: none;
   flex-direction: column;
   flex: 1;
   overflow: hidden;
 }
-._CredBuildPluginTab--visible_ildl0_115 {
+._CredBuildPluginTab--visible_14aaz_114 {
   display: flex;
 }
-._CredBuildPluginTab-body_ildl0_119 {
+._CredBuildPluginTab-body_14aaz_118 {
   display: flex;
   flex-direction: column;
   flex: 1;
   overflow-y: auto;
   padding-bottom: 32px;
 }
-._CredBuildLayout-left_ildl0_54,
-._CredBuildLayout-right_ildl0_76,
-._CredBuildLayout-header_ildl0_49 {
+._CredBuildLayout-left_14aaz_54,
+._CredBuildLayout-right_14aaz_75,
+._CredBuildLayout-header_14aaz_49 {
   border-radius: 0 !important;
   margin: 0 !important;
   box-shadow: none !important;
   border-top: none;
 }
-._CredBuildLayout--mounted_ildl0_135 ._CredBuildLayout-inner_ildl0_8 {
+._CredBuildLayout--mounted_14aaz_134 ._CredBuildLayout-inner_14aaz_8 {
   opacity: 1;
 }
 

package/dist/no-external.js

@@ -4405,22 +4405,22 @@ var init_get_zoom_config = __esm({
       const viewportHeight = uiViewport.height === "auto" ? frameHeight : uiViewport.height;
       let rootHeight = 0;
       let autoZoom = 1;
-      if (typeof uiViewport.width === "number" && (uiViewport.width > frameWidth || viewportHeight > frameHeight)) {
+      if (typeof uiViewport.width === "number" && uiViewport.width > 0 && (uiViewport.width > frameWidth || typeof viewportHeight === "number" && viewportHeight > frameHeight)) {
         const widthZoom = Math.min(frameWidth / uiViewport.width, 1);
-        const heightZoom = Math.min(frameHeight / viewportHeight, 1);
-        zoom = widthZoom;
+        const heightZoom = typeof viewportHeight === "number" ? Math.min(frameHeight / viewportHeight, 1) : 1;
+        zoom = Math.max(widthZoom, 0.01);
         if (widthZoom < heightZoom) {
-          rootHeight = viewportHeight / zoom;
+          rootHeight = typeof viewportHeight === "number" ? viewportHeight / zoom : frameHeight;
         } else {
-          rootHeight = viewportHeight;
-          zoom = heightZoom;
+          rootHeight = typeof viewportHeight === "number" ? viewportHeight : 0;
+          zoom = Math.max(heightZoom, 0.01);
         }
         autoZoom = zoom;
       } else {
         if (RESET_ZOOM_SMALLER_THAN_FRAME) {
           autoZoom = 1;
           zoom = 1;
-          rootHeight = viewportHeight;
+          rootHeight = typeof viewportHeight === "number" ? viewportHeight : 0;
         }
       }
       return { autoZoom, rootHeight, zoom };
@@ -12509,7 +12509,7 @@ var usePropsContext = () => (0, import_react86.useContext)(propsContext);
 
 // css-module:/home/crediblemark/Project/Credibuild/components/CredBuild/components/Layout/styles.module.css#css-module
 init_react_import();
-var styles_module_default22 = { "CredBuildLayout": "_CredBuildLayout_ildl0_1", "CredBuildLayout-inner": "_CredBuildLayout-inner_ildl0_8", "CredBuildLayout--leftSideBarVisible": "_CredBuildLayout--leftSideBarVisible_ildl0_29", "CredBuildLayout--rightSideBarVisible": "_CredBuildLayout--rightSideBarVisible_ildl0_33", "CredBuild--hidePlugins": "_CredBuild--hidePlugins_ildl0_37", "CredBuildLayout-item": "_CredBuildLayout-item_ildl0_43", "CredBuildLayout-header": "_CredBuildLayout-header_ildl0_49", "CredBuildLayout-left": "_CredBuildLayout-left_ildl0_54", "CredBuildLayout-editor": "_CredBuildLayout-editor_ildl0_67", "CredBuildLayout-right": "_CredBuildLayout-right_ildl0_76", "CredBuildLayout-sidebar": "_CredBuildLayout-sidebar_ildl0_93", "CredBuildPluginTab": "_CredBuildPluginTab_ildl0_108", "CredBuildPluginTab--visible": "_CredBuildPluginTab--visible_ildl0_115", "CredBuildPluginTab-body": "_CredBuildPluginTab-body_ildl0_119", "CredBuildLayout--mounted": "_CredBuildLayout--mounted_ildl0_135" };
+var styles_module_default22 = { "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
 init_react_import();
@@ -13480,18 +13480,18 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = (0, import_react91.useMemo)(
-    () => [
+  const zoomOptions = (0, import_react91.useMemo)(() => {
+    const options = [
       ...defaultZoomOptions,
-      ...defaultsContainAutoZoom ? [] : [
+      ...defaultsContainAutoZoom || isNaN(autoZoom) ? [] : [
         {
           value: autoZoom,
           label: `${(autoZoom * 100).toFixed(0)}% (Auto)`
         }
       ]
-    ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
-    [autoZoom, defaultsContainAutoZoom]
-  );
+    ].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] = (0, import_react91.useState)(
     uiViewports.current.width
   );
@@ -13524,15 +13524,15 @@ var ViewportControls = ({
             ActionButton,
             {
               title: "Zoom viewport out",
-              disabled: zoom <= zoomOptions[0]?.value,
+              disabled: zoom <= (zoomOptions[0]?.value || 0),
               onClick: (e) => {
                 e.stopPropagation();
-                onZoom(
-                  zoomOptions[Math.max(
-                    zoomOptions.findIndex((option) => option.value === zoom) - 1,
-                    0
-                  )].value
+                const currentIndex = zoomOptions.findIndex((option) => option.value === zoom);
+                const nextIndex = Math.max(
+                  (currentIndex === -1 ? zoomOptions.length : currentIndex) - 1,
+                  0
                 );
+                onZoom(zoomOptions[nextIndex]?.value || 1);
               },
               children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ZoomOut, { size: 16 })
             }
@@ -13541,15 +13541,15 @@ var ViewportControls = ({
             ActionButton,
             {
               title: "Zoom viewport in",
-              disabled: zoom >= zoomOptions[zoomOptions.length - 1]?.value,
+              disabled: zoom >= (zoomOptions[zoomOptions.length - 1]?.value || 2),
               onClick: (e) => {
                 e.stopPropagation();
-                onZoom(
-                  zoomOptions[Math.min(
-                    zoomOptions.findIndex((option) => option.value === zoom) + 1,
-                    zoomOptions.length - 1
-                  )].value
+                const currentIndex = zoomOptions.findIndex((option) => option.value === zoom);
+                const nextIndex = Math.min(
+                  (currentIndex === -1 ? -1 : currentIndex) + 1,
+                  zoomOptions.length - 1
                 );
+                onZoom(zoomOptions[nextIndex]?.value || 1);
               },
               children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ZoomIn, { size: 16 })
             }
@@ -14214,7 +14214,8 @@ var Canvas = () => {
             className: getClassName36("root"),
             style: {
               width: iframe.enabled ? viewports.current.width : "100%",
-              height: zoomConfig.rootHeight,
+              height: !zoomConfig.rootHeight || isNaN(zoomConfig.rootHeight) ? "100%" : zoomConfig.rootHeight,
+              minHeight: "100%",
               transform: iframe.enabled ? `scale(${zoomConfig.zoom})` : void 0,
               transition: showTransition ? `width ${TRANSITION_DURATION}ms ease-out, height ${TRANSITION_DURATION}ms ease-out, transform ${TRANSITION_DURATION}ms ease-out` : "",
               overflow: iframe.enabled ? void 0 : "auto"
@@ -14809,7 +14810,7 @@ var Layout = ({ children }) => {
       })}`,
       "data-theme": theme,
       id: instanceId,
-      style: { height },
+      style: { height: typeof height === "number" && isNaN(height) ? void 0 : height },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(DragDropContext, { disableAutoScroll: dnd?.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(CustomCredBuild, { children: children || /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
           "div",
@@ -14822,7 +14823,7 @@ var Layout = ({ children }) => {
               mobilePanelHeightToggle: mobilePanelHeightMode === "toggle",
               mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content"
             }),
-            style: { height },
+            style: { height: typeof height === "number" && isNaN(height) ? void 0 : height },
             children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
               "div",
               {
@@ -14872,7 +14873,7 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: getLayoutClassName("editor"), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Canvas, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Canvas, {}),
                   !hasDesktopFieldsPlugin && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
                     Sidebar,
                     {

package/dist/no-external.mjs

@@ -12,17 +12,17 @@ import {
   registerOverlayPortal,
   useCredBuild,
   useGetCredBuild
-} from "./chunk-XUV5DF24.mjs";
-import "./chunk-FC3ZRBT2.mjs";
+} from "./chunk-5VWWS4RS.mjs";
+import "./chunk-6RPYD5IO.mjs";
 import {
   setDeep
-} from "./chunk-62JTNLF7.mjs";
+} from "./chunk-BQW2NTNG.mjs";
 import {
   AutoField,
   Button,
   FieldLabel
-} from "./chunk-ACKK2BYK.mjs";
-import "./chunk-RUAHVDDE.mjs";
+} from "./chunk-H2LU4EW3.mjs";
+import "./chunk-2VS2BST6.mjs";
 import {
   migrate,
   resolveAllData,
@@ -37,11 +37,11 @@ import {
   Label,
   RichTextMenu,
   Separator
-} from "./chunk-AP7SVXSU.mjs";
-import "./chunk-7HQNPCGI.mjs";
-import "./chunk-QA2U7BOE.mjs";
-import "./chunk-6TAU2PST.mjs";
-import "./chunk-E7XYUXJM.mjs";
+} from "./chunk-VBNE6GK2.mjs";
+import "./chunk-LBMMY5IM.mjs";
+import "./chunk-WKMRHPOM.mjs";
+import "./chunk-5OK3IPVN.mjs";
+import "./chunk-GIUKL443.mjs";
 import "./chunk-64A37UUC.mjs";
 import "./chunk-SMAWAXVX.mjs";
 import "./chunk-BFHV72KK.mjs";

package/package.json

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