@crediblemark/build 0.24.2 → 0.24.4

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-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-5H2KI7SK.mjs → chunk-P3RHOUJG.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
   }))
 );
@@ -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,7 @@ var Canvas = () => {
             className: getClassName17("root"),
             style: {
               width: iframe.enabled ? viewports.current.width : "100%",
-              height: zoomConfig.rootHeight,
+              height: isNaN(zoomConfig.rootHeight) ? "auto" : zoomConfig.rootHeight,
               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 +6084,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 +6097,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 +6147,7 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx36(Canvas, {}),
+                  /* @__PURE__ */ jsx36("div", { className: getLayoutClassName("editor"), children: /* @__PURE__ */ jsx36(Canvas, {}) }),
                   !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx36(
                     Sidebar,
                     {

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

@@ -146,20 +146,35 @@
 
 /* bundle/index.css */
 .CredBuild {
-  --cb-bg-base: #020617;
-  --cb-bg-surface: #0f172a;
-  --cb-bg-panel: #1e293b;
-  --cb-gold: #fbbf24;
-  --cb-gold-glow: rgba(251, 191, 36, 0.15);
-  --cb-gold-faint: rgba(251, 191, 36, 0.05);
-  --cb-silver: #f8fafc;
-  --cb-silver-muted: #cbd5e1;
-  --cb-border: rgba(248, 250, 252, 0.1);
   --credbuild-font-family: "Inter", sans-serif;
+  --cb-radius-m: 5px;
+}
+.CredBuild[data-theme=light] {
+  --cb-bg-base: #f8fafc;
+  --cb-bg-surface: #ffffff;
+  --cb-bg-panel: #f1f5f9;
+  --cb-gold: #d97706;
+  --cb-gold-glow: rgba(217, 119, 6, 0.1);
+  --cb-gold-faint: rgba(217, 119, 6, 0.05);
+  --cb-silver: #0f172a;
+  --cb-silver-muted: #64748b;
+  --cb-border: #e2e8f0;
+}
+.CredBuild[data-theme=dark] {
+  --cb-bg-base: #191919;
+  --cb-bg-surface: #202020;
+  --cb-bg-panel: #262626;
+  --cb-gold: #ffffff;
+  --cb-gold-glow: rgba(255, 255, 255, 0.1);
+  --cb-gold-faint: rgba(255, 255, 255, 0.05);
+  --cb-silver: #ffffff;
+  --cb-silver-muted: #a1a1aa;
+  --cb-border: #2f2f2f;
 }
 .CredBuild {
   background-color: var(--cb-bg-base) !important;
   color: var(--cb-silver) !important;
+  font-family: var(--credbuild-font-family) !important;
 }
 .CredBuildHeader {
   background: var(--cb-bg-base) !important;
@@ -167,8 +182,8 @@
   height: 48px !important;
 }
 .CredBuild svg {
-  color: var(--cb-gold) !important;
-  stroke: var(--cb-gold) !important;
+  color: currentColor !important;
+  stroke: currentColor !important;
 }
 .CredBuild h1,
 .CredBuild h2,
@@ -196,9 +211,6 @@
 .CredBuild button {
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.CredBuild button:hover {
-  filter: brightness(1.2);
-}
 [class*=Layout-left],
 [class*=Layout-right],
 [class*=Layout-header],
@@ -233,10 +245,11 @@
   background-color: var(--cb-bg-surface) !important;
   color: var(--cb-silver) !important;
   border: 1px solid var(--cb-border) !important;
+  padding: 4px 8px !important;
 }
 [class*=DrawerItem-draggable]:hover {
   border-color: var(--cb-gold) !important;
-  background-color: var(--cb-gold-glow) !important;
+  background-color: var(--cb-gold-faint) !important;
 }
 [class*=DrawerItem-name] {
   color: var(--cb-silver) !important;
@@ -244,19 +257,26 @@
 }
 [class*=DrawerItem-icon] svg,
 [class*=DrawerItem-draggable] svg {
-  color: var(--cb-gold) !important;
-  stroke: var(--cb-gold) !important;
+  color: var(--cb-silver-muted) !important;
+  stroke: var(--cb-silver-muted) !important;
+  opacity: 0.7 !important;
+}
+[class*=DrawerItem-draggable]:hover svg {
+  color: var(--cb-silver) !important;
+  stroke: var(--cb-silver) !important;
   opacity: 1 !important;
 }
 [class*=ComponentList-title] {
-  background-color: var(--cb-bg-panel) !important;
-  color: var(--cb-gold) !important;
+  background-color: transparent !important;
+  color: var(--cb-silver-muted) !important;
   border-radius: 0 !important;
   margin-bottom: 2px !important;
-  font-weight: 700 !important;
+  font-weight: 600 !important;
   letter-spacing: 0.05em !important;
   text-transform: uppercase !important;
   opacity: 1 !important;
+  padding: 8px 10px !important;
+  border-bottom: 1px solid var(--cb-border) !important;
 }
 [class*=ComponentList-title]:hover {
   background-color: var(--cb-gold-faint) !important;
@@ -267,10 +287,11 @@
 [class*=ExternalInput-input],
 [class*=Select-select] {
   background-color: var(--cb-bg-base) !important;
+  background: var(--cb-bg-base) !important;
   border: 1px solid var(--cb-border) !important;
   border-radius: var(--cb-radius-m) !important;
   color: var(--cb-silver) !important;
-  padding: 8px 12px !important;
+  padding: 6px 10px !important;
   font-size: 12px !important;
   width: 100% !important;
   transition: all 0.2s ease !important;
@@ -290,8 +311,8 @@
   font-weight: 600 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.05em !important;
-  margin-top: 12px !important;
-  margin-bottom: 8px !important;
+  margin-top: 6px !important;
+  margin-bottom: 4px !important;
 }
 [class*=SidebarSection] {
   border-bottom: 1px solid var(--cb-border) !important;
@@ -317,30 +338,8 @@
   border: 1px solid var(--cb-border) !important;
   border-radius: var(--cb-radius-m) !important;
   color: var(--cb-silver) !important;
-  padding: 8px !important;
-  margin-bottom: 4px !important;
-}
-.CredBuild [class*=Layout-right] div {
-  background-image: none !important;
-}
-[class*=CredBuildHeader] {
-  background-color: var(--cb-bg-base) !important;
-  background: var(--cb-bg-base) !important;
-  border-bottom: 1px solid var(--cb-border) !important;
-}
-[class*=Header-path],
-[class*=Header-title],
-[class*=Header-inner] * {
-  color: var(--cb-gold) !important;
-  font-weight: 600 !important;
-}
-[class*=Header] div,
-[class*=Header] button,
-[class*=Header] span {
-  background-color: transparent !important;
-  background: transparent !important;
-  border-color: transparent !important;
-  box-shadow: none !important;
+  padding: 6px !important;
+  margin-bottom: 3px !important;
 }
 [class*=Button--secondary] {
   background-color: var(--cb-bg-surface) !important;
@@ -370,66 +369,13 @@
   box-shadow: 0 0 15px var(--cb-gold-glow) !important;
   transform: translateY(-1px);
 }
-[class*=Header] svg,
-[class*=Header] svg * {
-  color: var(--cb-gold) !important;
-  stroke: var(--cb-gold) !important;
-  fill: none !important;
-}
-[class*=Header-tools] > div,
-[class*=Header-rightActions] > div {
-  background: transparent !important;
-}
-[class*=Drawer] input,
-[class*=ComponentList] input,
-[class*=Search] input {
-  background-color: var(--cb-bg-base) !important;
-  color: var(--cb-silver) !important;
-  border: 1px solid var(--cb-border) !important;
-  border-radius: var(--cb-radius-m) !important;
-  padding: 10px 12px !important;
-  font-size: 13px !important;
-  transition: all 0.2s ease !important;
-}
-[class*=Drawer] input:focus {
-  border-color: var(--cb-gold) !important;
-  box-shadow: 0 0 10px var(--cb-gold-glow) !important;
-  outline: none !important;
-}
-[class*=ComponentList-title] {
-  color: var(--cb-gold) !important;
-  text-transform: uppercase !important;
-  font-weight: 700 !important;
-  letter-spacing: 0.07em !important;
-  opacity: 1 !important;
-  padding: 12px !important;
-}
-[class*=ComponentList-title]:hover {
-  background-color: var(--cb-gold-glow) !important;
-  color: var(--cb-gold) !important;
-}
-[class*=ComponentList-titleIcon] svg {
-  color: var(--cb-gold) !important;
-}
-[class*=DrawerItem] {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  border: none !important;
-  border-bottom: none !important;
-}
-[class*=DrawerItem-name],
-[class*=DrawerItem] span,
-[class*=DrawerItem] div {
-  background-color: transparent !important;
-  background: transparent !important;
-}
-:root {
+.CredBuild {
   --credbuild-color-azure-05: var(--cb-gold);
   --credbuild-color-azure-06: var(--cb-gold);
   --credbuild-color-azure-07: var(--cb-gold);
   --credbuild-color-azure-10: var(--cb-gold-glow);
   --credbuild-color-azure-11: var(--cb-gold-glow);
-  --credbuild-color-white: var(--cb-silver);
+  --credbuild-color-white: var(--cb-bg-surface);
   --credbuild-color-grey-11: var(--cb-bg-surface);
   --credbuild-color-grey-10: var(--cb-border);
   --credbuild-color-grey-09: var(--cb-bg-base);

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 };
@@ -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,7 @@ var Canvas = () => {
             className: getClassName36("root"),
             style: {
               width: iframe.enabled ? viewports.current.width : "100%",
-              height: zoomConfig.rootHeight,
+              height: isNaN(zoomConfig.rootHeight) ? "auto" : zoomConfig.rootHeight,
               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 +14809,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 +14822,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 +14872,7 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Canvas, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: getLayoutClassName("editor"), children: /* @__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-5H2KI7SK.mjs";
-import "./chunk-FC3ZRBT2.mjs";
+} from "./chunk-P3RHOUJG.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.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 };
@@ -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,7 @@ var Canvas = () => {
             className: getClassName36("root"),
             style: {
               width: iframe.enabled ? viewports.current.width : "100%",
-              height: zoomConfig.rootHeight,
+              height: isNaN(zoomConfig.rootHeight) ? "auto" : zoomConfig.rootHeight,
               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 +14809,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 +14822,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 +14872,7 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Canvas, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: getLayoutClassName("editor"), children: /* @__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-5H2KI7SK.mjs";
-import "./chunk-FC3ZRBT2.mjs";
+} from "./chunk-P3RHOUJG.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.2",
+  "version": "0.24.4",
   "description": "The open-source visual editor for React",
   "author": "Rasyiqi Crediblemark",
   "repository": {