@crediblemark/build 0.25.6 → 0.25.8

package/dist/chunk-MWCFPGI6.mjs

@@ -0,0 +1,4807 @@
+import {
+  Drawer,
+  DropZoneEditPure,
+  DropZoneProvider,
+  DropZonePure,
+  DropZoneRenderPure,
+  SlotRender,
+  ZoneStoreContext,
+  ZoneStoreProvider,
+  dragListenerContext,
+  getFrame,
+  getSelectorForId,
+  renderContext,
+  useRichtextProps,
+  useSlots
+} from "./chunk-HHKM5MBJ.mjs";
+import {
+  collisionStore,
+  useSensors
+} from "./chunk-44PQTFGV.mjs";
+import {
+  AutoFieldPrivate,
+  Button,
+  Heading,
+  fieldContextStore,
+  useContextStore,
+  useSafeId
+} from "./chunk-T2LBDQLG.mjs";
+import {
+  IconButton,
+  Loader
+} from "./chunk-AZFZRLP7.mjs";
+import {
+  Box,
+  ChartColumn,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  ChevronUp,
+  CircleCheck,
+  Code,
+  Copy,
+  CreditCard,
+  Expand,
+  ExternalLink,
+  Eye,
+  FileText,
+  Image,
+  Inbox,
+  Info,
+  Layers,
+  LayoutDashboard,
+  LayoutGrid,
+  LayoutTemplate,
+  List,
+  Maximize2,
+  Megaphone,
+  Minimize2,
+  Monitor,
+  Moon,
+  PanelLeft,
+  PanelRight,
+  Quote,
+  RectangleEllipsis,
+  Redo2,
+  Search,
+  Settings,
+  Shapes,
+  Smartphone,
+  Sun,
+  Tablet,
+  ToyBrick,
+  Type,
+  Undo2,
+  X,
+  Zap,
+  ZoomIn,
+  ZoomOut,
+  appStoreContext,
+  createAppStore,
+  defaultAppState,
+  defaultViewports,
+  getBox,
+  monitorHotkeys,
+  useAppStore,
+  useAppStoreApi,
+  useHotkey,
+  useMonitorHotkeys,
+  useRegisterFieldsSlice,
+  useRegisterHistorySlice,
+  useRegisterPermissionsSlice,
+  useResetAutoZoom
+} from "./chunk-KN26YZZJ.mjs";
+import {
+  get_class_name_factory_default
+} from "./chunk-BFHV72KK.mjs";
+import {
+  generateId,
+  getItem,
+  insertAction,
+  makeStatePublic,
+  populateIds,
+  rootAreaId,
+  rootDroppableId,
+  rootZone,
+  toComponent,
+  walkAppState
+} from "./chunk-O44M27KT.mjs";
+
+// types/API/Overrides.ts
+var overrideKeys = [
+  "header",
+  "headerActions",
+  "fields",
+  "fieldLabel",
+  "drawer",
+  "drawerItem",
+  "componentOverlay",
+  "outline",
+  "credbuild",
+  "preview"
+];
+
+// components/Render/index.tsx
+import { useMemo } from "react";
+
+// components/HtmlModeRender/index.tsx
+import { useId, useState, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var HtmlModeRender = ({
+  htmlCode,
+  isEditing
+}) => {
+  const id = useId().replace(/:/g, "");
+  const [iframeHeight, setIframeHeight] = useState("100%");
+  const divRef = useRef(null);
+  useEffect(() => {
+    if (!isEditing) return;
+    const handleMessage = (event) => {
+      if (event.data && event.data.type === "resize-iframe" && event.data.id === id) {
+        setIframeHeight(`${event.data.height}px`);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [id, isEditing]);
+  useEffect(() => {
+    if (isEditing || !divRef.current || !htmlCode) return;
+    const scripts = divRef.current.querySelectorAll("script");
+    scripts.forEach((script) => {
+      const newScript = document.createElement("script");
+      Array.from(script.attributes).forEach(
+        (attr) => newScript.setAttribute(attr.name, attr.value)
+      );
+      newScript.appendChild(document.createTextNode(script.innerHTML));
+      script.parentNode?.replaceChild(newScript, script);
+    });
+  }, [htmlCode, isEditing]);
+  if (!htmlCode) {
+    return /* @__PURE__ */ jsx("div", { style: { padding: 48, textAlign: "center", color: "#666" }, children: "Belum ada kode HTML yang ditempel." });
+  }
+  if (isEditing) {
+    const resizeScript = `
+      <script>
+        function sendHeight() {
+          const height = document.documentElement.scrollHeight || document.body.scrollHeight;
+          window.parent.postMessage({ type: 'resize-iframe', id: '${id}', height: height }, '*');
+        }
+        window.addEventListener('load', sendHeight);
+        window.addEventListener('resize', sendHeight);
+        
+        if (window.ResizeObserver) {
+          new ResizeObserver(sendHeight).observe(document.body);
+        } else {
+          setInterval(sendHeight, 1000);
+        }
+      </script>
+    `;
+    const needsTailwind = htmlCode.includes("cdn.tailwindcss.com") || htmlCode.includes("tailwindcss") || /\b(bg-|text-|p[xy]?[-0-9]|m[xy]?[-0-9]|flex|grid|border-|rounded-|shadow-|justify-|items-|gap-|relative|absolute|hidden|w-|h-|leading-|tracking-|font-|transition|duration-|ease-|hover:|focus:|sm:|md:|lg:|xl:)/.test(
+      htmlCode
+    );
+    const isStandalone = htmlCode.includes("<html") || htmlCode.includes("<!DOCTYPE") || htmlCode.includes("<body") || htmlCode.includes("<head>");
+    let srcDoc = "";
+    if (isStandalone) {
+      let processed = htmlCode;
+      if (processed.includes("</body>")) {
+        processed = processed.replace("</body>", `${resizeScript}</body>`);
+      } else {
+        processed = processed + resizeScript;
+      }
+      if (needsTailwind && !processed.includes("cdn.tailwindcss.com") && !processed.includes("tailwindcss")) {
+        if (processed.includes("</head>")) {
+          processed = processed.replace(
+            "</head>",
+            `<script src="https://cdn.tailwindcss.com"></script></head>`
+          );
+        } else if (processed.includes("<head>")) {
+          processed = processed.replace(
+            "<head>",
+            `<head><script src="https://cdn.tailwindcss.com"></script>`
+          );
+        } else {
+          processed = `<script src="https://cdn.tailwindcss.com"></script>` + processed;
+        }
+      }
+      srcDoc = processed;
+    } else {
+      srcDoc = `
+        <!DOCTYPE html>
+        <html>
+          <head>
+            ${needsTailwind ? `<script src="https://cdn.tailwindcss.com"></script>` : ""}
+            <style>
+              *, *::before, *::after { box-sizing: border-box; }
+              body {
+                margin: 0;
+                padding: 0;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+              }
+              img, iframe, video {
+                max-width: 100%;
+              }
+            </style>
+          </head>
+          <body>
+            ${htmlCode}
+            ${resizeScript}
+          </body>
+        </html>
+      `;
+    }
+    return /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        srcDoc,
+        sandbox: "allow-scripts",
+        title: "Html Mode Sandboxed Canvas",
+        loading: "lazy",
+        style: {
+          height: iframeHeight,
+          border: "none",
+          width: "100%",
+          display: "block",
+          background: "transparent"
+        }
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: divRef,
+      dangerouslySetInnerHTML: { __html: htmlCode },
+      style: { width: "100%" }
+    }
+  );
+};
+
+// components/Render/index.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Render({
+  config,
+  data,
+  metadata = {}
+}) {
+  const defaultedData = {
+    ...data,
+    root: data.root || {},
+    content: data.content || []
+  };
+  const rootProps = "props" in defaultedData.root ? defaultedData.root.props : defaultedData.root;
+  const title = rootProps?.title || "";
+  if (rootProps?.mode === "html") {
+    return /* @__PURE__ */ jsx2(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx2(HtmlModeRender, { htmlCode: rootProps.htmlCode, isEditing: false }) });
+  }
+  const pageProps = {
+    ...rootProps,
+    credbuild: {
+      renderDropZone: DropZonePure,
+      isEditing: false,
+      dragRef: null,
+      metadata
+    },
+    title,
+    editMode: false,
+    id: "credbuild-root"
+  };
+  const propsWithSlots = useSlots(
+    config,
+    { type: "root", props: pageProps },
+    (props) => /* @__PURE__ */ jsx2(SlotRender, { ...props, config, metadata })
+  );
+  const richtextProps = useRichtextProps(config.root?.fields, pageProps);
+  const nextContextValue = useMemo(
+    () => ({
+      mode: "render",
+      depth: 0
+    }),
+    []
+  );
+  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: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx2(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx2(DropZoneRenderPure, { zone: rootZone }) }) });
+}
+
+// lib/use-credbuild.ts
+import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";
+import { createStore, useStore } from "zustand";
+
+// lib/data/resolve-and-replace-data.ts
+async function resolveAndReplaceData(currentData, getState, trigger = "force") {
+  const resolvedResult = await getState().resolveComponentData(
+    currentData,
+    trigger
+  );
+  if (!resolvedResult.didChange) return;
+  const itemSelector = getSelectorForId(
+    getState().state,
+    resolvedResult.node.props.id
+  );
+  if (!itemSelector) {
+    console.warn(
+      `Warning: Could not find component with id "${currentData.props.id}" to resolve its data. Component may have been removed or the id is invalid.`
+    );
+    return;
+  }
+  getState().dispatch({
+    type: "replace",
+    data: toComponent(resolvedResult.node),
+    destinationIndex: itemSelector.index,
+    destinationZone: itemSelector.zone
+  });
+}
+
+// lib/data/resolve-data-by-id.ts
+async function resolveDataById(id, getState, trigger) {
+  const node = getState().state.indexes.nodes[id];
+  if (!node) {
+    console.warn(
+      `Warning: Could not find component with id "${id}" to resolve its data. Component may have been removed or the id is invalid.`
+    );
+    return;
+  }
+  await resolveAndReplaceData(node.data, getState, trigger);
+}
+
+// lib/data/resolve-data-by-selector.ts
+async function resolveDataBySelector(selector, getState, trigger) {
+  const item = getItem(selector, getState().state);
+  if (!item) {
+    console.warn(
+      `Warning: Could not find component for selector "${JSON.stringify(
+        selector
+      )}" to resolve its data. Component may have been removed or the selector is invalid.`
+    );
+    return;
+  }
+  const itemAsComponent = toComponent(item);
+  await resolveAndReplaceData(itemAsComponent, getState, trigger);
+}
+
+// lib/use-credbuild.ts
+var generateUseCredBuild = (store, getState) => {
+  const history = {
+    back: store.history.back,
+    forward: store.history.forward,
+    setHistories: store.history.setHistories,
+    setHistoryIndex: store.history.setHistoryIndex,
+    hasPast: store.history.hasPast(),
+    hasFuture: store.history.hasFuture(),
+    histories: store.history.histories,
+    index: store.history.index
+  };
+  const storeData = {
+    appState: makeStatePublic(store.state),
+    config: store.config,
+    dispatch: store.dispatch,
+    getPermissions: store.permissions.getPermissions,
+    refreshPermissions: store.permissions.refreshPermissions,
+    resolveDataById: (id, trigger) => resolveDataById(id, getState, trigger),
+    resolveDataBySelector: (selector, trigger) => resolveDataBySelector(selector, getState, trigger),
+    history,
+    selectedItem: store.selectedItem || null,
+    getItemBySelector: (selector) => getItem(selector, store.state),
+    getItemById: (id) => store.state.indexes.nodes[id].data,
+    getSelectorForId: (id) => getSelectorForId(store.state, id),
+    getParentById: (id) => {
+      const node = store.state.indexes.nodes[id];
+      const parentId = node.parentId;
+      if (parentId === null) return;
+      const parentNode = store.state.indexes.nodes[parentId];
+      if (!parentNode) return;
+      return parentNode.data;
+    }
+  };
+  storeData.__private = {
+    appState: store.state
+  };
+  return storeData;
+};
+var UseCredBuildStoreContext = createContext(
+  null
+);
+var convertToPickedStore = (store) => {
+  return {
+    state: store.state,
+    config: store.config,
+    dispatch: store.dispatch,
+    permissions: store.permissions,
+    history: store.history,
+    selectedItem: store.selectedItem
+  };
+};
+var useRegisterUseCredBuildStore = (appStore) => {
+  const [useCredBuildStore] = useState2(
+    () => createStore(
+      () => generateUseCredBuild(
+        convertToPickedStore(appStore.getState()),
+        appStore.getState
+      )
+    )
+  );
+  useEffect2(() => {
+    return appStore.subscribe(
+      (store) => convertToPickedStore(store),
+      (pickedStore) => {
+        useCredBuildStore.setState(
+          generateUseCredBuild(pickedStore, appStore.getState)
+        );
+      }
+    );
+  }, [appStore, useCredBuildStore]);
+  return useCredBuildStore;
+};
+function createUseCredBuild() {
+  return function useCredBuild2(selector) {
+    const useCredBuildApi = useContext(UseCredBuildStoreContext);
+    if (!useCredBuildApi) {
+      throw new Error("useCredBuild must be used inside <CredBuild>.");
+    }
+    const result = useStore(
+      useCredBuildApi,
+      selector ?? ((s) => s)
+    );
+    return result;
+  };
+}
+function useCredBuild() {
+  useEffect2(() => {
+    console.warn(
+      "You're using the `useCredBuild` method without a selector, which may cause unnecessary re-renders. Replace with `createUseCredBuild` and provide a selector for improved performance."
+    );
+  }, []);
+  return createUseCredBuild()((s) => s);
+}
+function useGetCredBuild() {
+  const useCredBuildApi = useContext(UseCredBuildStoreContext);
+  if (!useCredBuildApi) {
+    throw new Error("useCredBuildGet must be used inside <CredBuild>.");
+  }
+  return useCredBuildApi.getState;
+}
+
+// lib/use-component-list.tsx
+import { useEffect as useEffect4, useState as useState3 } from "react";
+
+// css-module:/home/runner/work/credbuild/credbuild/components/ComponentList/styles.module.css#css-module
+var styles_module_default = { "ComponentList": "_ComponentList_10tqo_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_10tqo_5", "ComponentList-content": "_ComponentList-content_10tqo_9", "ComponentList-title": "_ComponentList-title_10tqo_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_10tqo_53" };
+
+// components/ComponentList/index.tsx
+import { useEffect as useEffect3, memo } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var getClassName = get_class_name_factory_default("ComponentList", styles_module_default);
+var ComponentListItem = memo(({
+  name,
+  label
+}) => {
+  const overrides = useAppStore((s) => s.overrides);
+  const canInsert = useAppStore(
+    (s) => s.permissions.getPermissions({
+      type: name
+    }).insert
+  );
+  useEffect3(() => {
+    if (overrides.componentItem) {
+      console.warn(
+        "The `componentItem` override has been deprecated and renamed to `drawerItem`"
+      );
+    }
+  }, [overrides]);
+  return /* @__PURE__ */ jsx3(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: overrides.componentItem ?? overrides.drawerItem });
+});
+var ComponentList = ({
+  children,
+  title,
+  id
+}) => {
+  const config = useAppStore((s) => s.config);
+  const expanded = useAppStore((s) => s.state.ui.componentList[id]?.expanded ?? true);
+  const appStoreApi = useAppStoreApi();
+  const components = Object.keys(config.components);
+  return /* @__PURE__ */ jsxs("div", { className: getClassName({ isExpanded: expanded }), children: [
+    title && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: getClassName("title"),
+        "aria-expanded": expanded,
+        "aria-controls": `${id}-content`,
+        onClick: () => {
+          const currentComponentList = appStoreApi.getState().state.ui.componentList;
+          appStoreApi.getState().setUi({
+            componentList: {
+              ...currentComponentList,
+              [id]: {
+                ...currentComponentList[id],
+                expanded: !expanded
+              }
+            }
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            id.toLowerCase().includes("hero") && /* @__PURE__ */ jsx3(LayoutTemplate, { size: 12, strokeWidth: 2.5 }),
+            id.toLowerCase().includes("content") && /* @__PURE__ */ jsx3(FileText, { size: 12, strokeWidth: 2.5 }),
+            id.toLowerCase().includes("marketing") && /* @__PURE__ */ jsx3(Megaphone, { size: 12, strokeWidth: 2.5 }),
+            id.toLowerCase().includes("layout") && /* @__PURE__ */ jsx3(Box, { size: 12, strokeWidth: 2.5 }),
+            id.toLowerCase().includes("basic") && /* @__PURE__ */ jsx3(Settings, { size: 12, strokeWidth: 2.5 }),
+            id === "other" && /* @__PURE__ */ jsx3(Layers, { size: 12, strokeWidth: 2.5 }),
+            /* @__PURE__ */ jsx3("div", { children: title?.replace(/[\u2600-\u27BF]|[\uD83C][\uDF00-\uDFFF]|[\uD83D][\uDC00-\uDE4F]|[\uD83D][\uDE80-\uDEFF]/g, "").trim() })
+          ] }),
+          /* @__PURE__ */ jsx3("div", { className: getClassName("titleIcon"), children: expanded ? /* @__PURE__ */ jsx3(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx3(ChevronDown, { size: 12 }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        id: `${id}-content`,
+        className: getClassName("content"),
+        style: {
+          overflow: "visible",
+          display: expanded ? "block" : "none"
+        },
+        children: /* @__PURE__ */ jsx3(Drawer, { children: children || components.map((componentKey, i) => {
+          return /* @__PURE__ */ jsx3(
+            ComponentListItem,
+            {
+              label: config.components[componentKey]["label"] ?? componentKey,
+              name: componentKey,
+              index: i
+            },
+            componentKey
+          );
+        }) })
+      }
+    )
+  ] });
+};
+ComponentList.Item = ComponentListItem;
+
+// lib/use-component-list.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var useComponentList = () => {
+  const [componentList, setComponentList] = useState3();
+  const config = useAppStore((s) => s.config);
+  const uiComponentList = useAppStore((s) => s.state.ui.componentList);
+  useEffect4(() => {
+    if (Object.keys(uiComponentList).length > 0) {
+      const matchedComponents = [];
+      let _componentList;
+      _componentList = Object.entries(uiComponentList).map(
+        ([categoryKey, category]) => {
+          if (!category.components) {
+            return null;
+          }
+          category.components.forEach((componentName) => {
+            matchedComponents.push(componentName);
+          });
+          if (category.visible === false) {
+            return null;
+          }
+          return /* @__PURE__ */ jsx4(
+            ComponentList,
+            {
+              id: categoryKey,
+              title: category.title || categoryKey,
+              children: category.components.map((componentName, i) => {
+                const componentConf = config.components[componentName] || {};
+                return /* @__PURE__ */ jsx4(
+                  ComponentList.Item,
+                  {
+                    label: componentConf["label"] ?? componentName,
+                    name: componentName,
+                    index: i
+                  },
+                  componentName
+                );
+              })
+            },
+            categoryKey
+          );
+        }
+      );
+      const remainingComponents = Object.keys(config.components).filter(
+        (component) => matchedComponents.indexOf(component) === -1
+      );
+      if (remainingComponents.length > 0 && !uiComponentList.other?.components && uiComponentList.other?.visible !== false) {
+        _componentList.push(
+          /* @__PURE__ */ jsx4(
+            ComponentList,
+            {
+              id: "other",
+              title: uiComponentList.other?.title || "Other",
+              children: remainingComponents.map((componentName, i) => {
+                const componentConf = config.components[componentName] || {};
+                return /* @__PURE__ */ jsx4(
+                  ComponentList.Item,
+                  {
+                    name: componentName,
+                    label: componentConf["label"] ?? componentName,
+                    index: i
+                  },
+                  componentName
+                );
+              })
+            },
+            "other"
+          )
+        );
+      }
+      setComponentList(_componentList);
+    }
+  }, [config.categories, config.components, uiComponentList]);
+  return componentList;
+};
+
+// components/CredBuild/components/Components/index.tsx
+import { useMemo as useMemo2, useState as useState4 } from "react";
+
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Components/styles.module.css#css-module
+var styles_module_default2 = { "CredBuildComponents": "_CredBuildComponents_1a9p4_1", "CredBuildComponents-searchContainer": "_CredBuildComponents-searchContainer_1a9p4_7", "CredBuildComponents-searchWrapper": "_CredBuildComponents-searchWrapper_1a9p4_16", "CredBuildComponents-searchInput": "_CredBuildComponents-searchInput_1a9p4_23", "CredBuildComponents-searchIcon": "_CredBuildComponents-searchIcon_1a9p4_42", "CredBuildComponents-clearButton": "_CredBuildComponents-clearButton_1a9p4_54", "CredBuildComponents-listContainer": "_CredBuildComponents-listContainer_1a9p4_74", "CredBuildComponents-noResults": "_CredBuildComponents-noResults_1a9p4_79" };
+
+// components/CredBuild/components/Components/index.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var getClassName2 = get_class_name_factory_default("CredBuildComponents", styles_module_default2);
+var Components = () => {
+  const overrides = useAppStore((s) => s.overrides);
+  const config = useAppStore((s) => s.config);
+  const [searchTerm, setSearchTerm] = useState4("");
+  const componentList = useComponentList();
+  const Wrapper = useMemo2(() => {
+    if (overrides.components) {
+      console.warn(
+        "The `components` override has been deprecated and renamed to `drawer`"
+      );
+    }
+    return overrides.components || overrides.drawer || "div";
+  }, [overrides]);
+  const matchingComponents = useMemo2(() => {
+    if (!searchTerm.trim()) return [];
+    return Object.keys(config.components).filter((componentKey) => {
+      const componentConf = config.components[componentKey] || {};
+      const label = componentConf["label"] ?? componentKey;
+      return label.toLowerCase().includes(searchTerm.toLowerCase()) || componentKey.toLowerCase().includes(searchTerm.toLowerCase());
+    });
+  }, [searchTerm, config.components]);
+  return /* @__PURE__ */ jsxs2(Wrapper, { className: getClassName2(), children: [
+    /* @__PURE__ */ jsx5("div", { className: getClassName2("searchContainer"), children: /* @__PURE__ */ jsxs2("div", { className: getClassName2("searchWrapper"), children: [
+      /* @__PURE__ */ jsx5(Search, { size: 14, className: getClassName2("searchIcon"), "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          type: "text",
+          className: getClassName2("searchInput"),
+          placeholder: "Search blocks...",
+          value: searchTerm,
+          onChange: (e) => setSearchTerm(e.target.value),
+          "aria-label": "Search blocks"
+        }
+      ),
+      searchTerm && /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          className: getClassName2("clearButton"),
+          onClick: () => setSearchTerm(""),
+          title: "Clear search",
+          "aria-label": "Clear search",
+          children: /* @__PURE__ */ jsx5(X, { size: 12, "aria-hidden": "true" })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx5("div", { className: getClassName2("listContainer"), children: searchTerm.trim() ? matchingComponents.length > 0 ? /* @__PURE__ */ jsxs2("div", { style: { padding: "10px 12px" }, children: [
+      /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          style: {
+            fontSize: "10px",
+            fontWeight: 700,
+            color: "var(--cb-silver-muted)",
+            marginBottom: "8px",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em"
+          },
+          children: [
+            "Search Results (",
+            matchingComponents.length,
+            ")"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx5(Drawer, { children: /* @__PURE__ */ jsx5("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: matchingComponents.map((componentName, i) => {
+        const componentConf = config.components[componentName] || {};
+        return /* @__PURE__ */ jsx5(
+          ComponentList.Item,
+          {
+            label: componentConf["label"] ?? componentName,
+            name: componentName,
+            index: i
+          },
+          componentName
+        );
+      }) }) })
+    ] }) : /* @__PURE__ */ jsxs2("div", { className: getClassName2("noResults"), children: [
+      /* @__PURE__ */ jsx5(Inbox, { size: 20, strokeWidth: 1.5 }),
+      /* @__PURE__ */ jsxs2("div", { children: [
+        'No blocks found matching "',
+        searchTerm,
+        '"'
+      ] })
+    ] }) : componentList ? componentList : /* @__PURE__ */ jsx5(ComponentList, { id: "all" }) })
+  ] });
+};
+
+// css-module:/home/runner/work/credbuild/credbuild/plugins/blocks/styles.module.css#css-module
+var styles_module_default3 = { "BlocksPlugin": "_BlocksPlugin_1q0b2_1" };
+
+// plugins/blocks/index.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var getClassName3 = get_class_name_factory_default("BlocksPlugin", styles_module_default3);
+var blocksPlugin = () => ({
+  name: "blocks",
+  label: "Blocks",
+  render: () => /* @__PURE__ */ jsx6("div", { className: getClassName3(), children: /* @__PURE__ */ jsx6(Components, {}) }),
+  icon: /* @__PURE__ */ jsx6(Shapes, {})
+});
+
+// css-module:/home/runner/work/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
+import {
+  forwardRef,
+  useCallback,
+  useContext as useContext2,
+  useRef as useRef2,
+  memo as memo2
+} from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var getClassName4 = get_class_name_factory_default("LayerTree", styles_module_default4);
+var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default4);
+var DEFAULT_LAYER_ROW_HEIGHT = 32;
+var LAYER_TREE_VIRTUALIZATION_OVERSCAN = 8;
+var MIN_VIRTUALIZED_LAYER_COUNT = 25;
+var measuredRowHeights = /* @__PURE__ */ new Map();
+var getZonesByParent = (zones) => {
+  return Object.keys(zones).reduce((acc, zone) => {
+    const [parentId] = zone.split(":");
+    acc[parentId] = [...acc[parentId] || [], zone];
+    return acc;
+  }, {});
+};
+var getZoneLabel = (zoneCompound, nodes, config, label) => {
+  if (label !== void 0) {
+    return label;
+  }
+  const [componentId, slotId] = zoneCompound.split(":");
+  if (!slotId) {
+    return;
+  }
+  const componentType = nodes[componentId]?.data.type;
+  const configForComponent = componentType && componentType !== rootAreaId ? config.components[componentType] : config.root;
+  return configForComponent?.fields?.[slotId]?.label ?? slotId;
+};
+var buildLayerNode = ({
+  config,
+  itemId,
+  index,
+  nodes,
+  zoneCompound,
+  zones,
+  zonesByParent
+}) => {
+  const nodeData = nodes[itemId];
+  const componentType = nodeData?.data.type?.toString() || "Component";
+  const label = config.components[componentType]?.label ?? componentType;
+  const childZoneCompounds = zonesByParent[itemId] || [];
+  return {
+    childZones: childZoneCompounds.map(
+      (childZoneCompound) => buildLayerTree({
+        config,
+        nodes,
+        zoneCompound: childZoneCompound,
+        zones,
+        zonesByParent
+      })
+    ),
+    componentType,
+    index,
+    itemId,
+    label,
+    zoneCompound
+  };
+};
+var buildLayerTree = ({
+  config,
+  label,
+  nodes,
+  zoneCompound,
+  zones,
+  zonesByParent = getZonesByParent(zones)
+}) => {
+  const contentIds = zones[zoneCompound]?.contentIds ?? [];
+  return {
+    items: contentIds.map(
+      (itemId, index) => buildLayerNode({
+        config,
+        itemId,
+        index,
+        nodes,
+        zoneCompound,
+        zones,
+        zonesByParent
+      })
+    ),
+    label: getZoneLabel(zoneCompound, nodes, config, label),
+    zoneCompound
+  };
+};
+var getEstimatedRowHeight = (itemId) => measuredRowHeights.get(itemId) ?? DEFAULT_LAYER_ROW_HEIGHT;
+var cacheMeasuredRowHeight = (itemId, height) => {
+  if (height <= 0) {
+    return;
+  }
+  measuredRowHeights.set(itemId, height);
+};
+var getScrollParent = (el) => {
+  let current = el?.parentElement ?? null;
+  while (current) {
+    const { overflow, overflowY } = getComputedStyle(current);
+    if ([overflow, overflowY].some((value) => /auto|scroll/.test(value))) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+};
+var Layer = memo2(forwardRef(function Layer2({
+  childIsSelected,
+  dataIndex,
+  depth,
+  isSelected,
+  node,
+  selectedId,
+  selectedPathIds
+}, ref) {
+  const dispatch = useAppStore((s) => s.dispatch);
+  const zoneStore = useContext2(ZoneStoreContext);
+  const isHovering = useContextStore(
+    ZoneStoreContext,
+    (s) => s.hoveringComponent === node.itemId
+  );
+  const containsZone = node.childZones.length > 0;
+  const setItemSelector = useCallback(
+    (itemSelector) => {
+      dispatch({ type: "setUi", ui: { itemSelector } });
+    },
+    [dispatch]
+  );
+  const shouldRenderChildren = isSelected || childIsSelected;
+  const getLayerIcon = (type) => {
+    const t = type.toLowerCase();
+    if (t === "text" || t === "heading" || t.includes("heading")) return /* @__PURE__ */ jsx7(Type, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("hero")) return /* @__PURE__ */ jsx7(LayoutTemplate, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("pricing")) return /* @__PURE__ */ jsx7(CreditCard, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("stats")) return /* @__PURE__ */ jsx7(ChartColumn, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("testimonials")) return /* @__PURE__ */ jsx7(Quote, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("about") || t.includes("info")) return /* @__PURE__ */ jsx7(Info, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("gallery") || t.includes("image")) return /* @__PURE__ */ jsx7(Image, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("marketing") || t.includes("cta")) return /* @__PURE__ */ jsx7(Megaphone, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("content") || t.includes("blog")) return /* @__PURE__ */ jsx7(FileText, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("container") || t.includes("layout") || t.includes("flex")) return /* @__PURE__ */ jsx7(Box, { size: "14", strokeWidth: 2.5 });
+    return /* @__PURE__ */ jsx7(LayoutGrid, { size: "14", strokeWidth: 2.5 });
+  };
+  return /* @__PURE__ */ jsxs3(
+    "li",
+    {
+      ref,
+      className: getClassNameLayer({
+        childIsSelected,
+        containsZone,
+        isHovering,
+        isSelected
+      }),
+      "data-index": dataIndex,
+      "data-credbuild-layer-tree-id": node.itemId,
+      children: [
+        /* @__PURE__ */ jsx7("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            type: "button",
+            className: getClassNameLayer("clickable"),
+            onClick: () => {
+              if (isSelected) {
+                setItemSelector(null);
+                return;
+              }
+              setItemSelector({
+                index: node.index,
+                zone: node.zoneCompound
+              });
+              zoneStore.getState().scrollToComponent(node.itemId);
+            },
+            onMouseEnter: (e) => {
+              e.stopPropagation();
+              zoneStore.setState({ hoveringComponent: node.itemId });
+            },
+            onMouseLeave: (e) => {
+              e.stopPropagation();
+              zoneStore.setState({ hoveringComponent: null });
+            },
+            children: [
+              containsZone && /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  className: getClassNameLayer("chevron"),
+                  title: isSelected ? "Collapse" : "Expand",
+                  children: /* @__PURE__ */ jsx7(ChevronDown, { size: "12" })
+                }
+              ),
+              /* @__PURE__ */ jsxs3("div", { className: getClassNameLayer("title"), children: [
+                /* @__PURE__ */ jsx7("div", { className: getClassNameLayer("icon"), children: getLayerIcon(node.componentType) }),
+                /* @__PURE__ */ jsx7("div", { className: getClassNameLayer("name"), children: node.label })
+              ] })
+            ]
+          }
+        ) }),
+        containsZone && shouldRenderChildren && node.childZones.map((childZone) => /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: getClassNameLayer("zones"),
+            children: /* @__PURE__ */ jsx7(
+              LayerTreeZone,
+              {
+                depth: depth + 1,
+                selectedId,
+                selectedPathIds,
+                tree: childZone
+              }
+            )
+          },
+          childZone.zoneCompound
+        ))
+      ]
+    }
+  );
+}));
+var LayerTreeZone = memo2(({
+  depth,
+  selectedId,
+  selectedPathIds,
+  tree
+}) => {
+  const shouldVirtualize = depth === 0 && tree.items.length >= MIN_VIRTUALIZED_LAYER_COUNT;
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    tree.label && /* @__PURE__ */ jsxs3("div", { className: getClassName4("zoneTitle"), children: [
+      /* @__PURE__ */ jsx7("div", { className: getClassName4("zoneIcon"), children: /* @__PURE__ */ jsx7(Layers, { size: "16" }) }),
+      tree.label
+    ] }),
+    shouldVirtualize ? /* @__PURE__ */ jsx7(
+      VirtualizedLayerTreeItems,
+      {
+        depth,
+        selectedId,
+        selectedPathIds,
+        tree
+      }
+    ) : /* @__PURE__ */ jsx7(
+      StaticLayerTreeItems,
+      {
+        depth,
+        selectedId,
+        selectedPathIds,
+        tree
+      }
+    )
+  ] });
+});
+var StaticLayerTreeItems = memo2(({
+  depth,
+  selectedId,
+  selectedPathIds,
+  tree
+}) => {
+  return /* @__PURE__ */ jsxs3("ul", { className: getClassName4(), children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx7("div", { className: getClassName4("helper"), children: "No items" }),
+    tree.items.map((node) => /* @__PURE__ */ jsx7(
+      Layer,
+      {
+        childIsSelected: selectedPathIds.has(node.itemId),
+        depth,
+        isSelected: selectedId === node.itemId,
+        node,
+        selectedId,
+        selectedPathIds
+      },
+      node.itemId
+    ))
+  ] });
+});
+var VirtualizedLayerTreeItems = memo2(({
+  depth,
+  selectedId,
+  selectedPathIds,
+  tree
+}) => {
+  const listRef = useRef2(null);
+  const virtualizer = useVirtualizer({
+    count: tree.items.length,
+    estimateSize: (index) => getEstimatedRowHeight(tree.items[index].itemId),
+    getItemKey: (index) => tree.items[index].itemId,
+    getScrollElement: () => getScrollParent(listRef.current),
+    overscan: LAYER_TREE_VIRTUALIZATION_OVERSCAN,
+    measureElement: (element) => {
+      const height = Math.ceil(element.getBoundingClientRect().height);
+      const itemId = element.dataset.credbuildLayerTreeId;
+      if (itemId) {
+        cacheMeasuredRowHeight(itemId, height);
+      }
+      return height || DEFAULT_LAYER_ROW_HEIGHT;
+    }
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const renderedItems = [];
+  let previousEnd = 0;
+  let previousIndex = -1;
+  virtualItems.forEach((virtualItem) => {
+    const node = tree.items[virtualItem.index];
+    const gapSize = Math.max(virtualItem.start - previousEnd, 0);
+    if (gapSize > 0) {
+      renderedItems.push(
+        /* @__PURE__ */ jsx7(
+          "li",
+          {
+            "aria-hidden": "true",
+            style: { height: `${gapSize}px` }
+          },
+          `gap:${tree.zoneCompound}:${previousIndex}:${virtualItem.index}`
+        )
+      );
+    }
+    renderedItems.push(
+      /* @__PURE__ */ jsx7(
+        Layer,
+        {
+          childIsSelected: selectedPathIds.has(node.itemId),
+          dataIndex: virtualItem.index,
+          depth,
+          isSelected: selectedId === node.itemId,
+          node,
+          ref: virtualizer.measureElement,
+          selectedId,
+          selectedPathIds
+        },
+        node.itemId
+      )
+    );
+    previousEnd = virtualItem.end;
+    previousIndex = virtualItem.index;
+  });
+  const trailingGap = Math.max(totalSize - previousEnd, 0);
+  if (trailingGap > 0) {
+    renderedItems.push(
+      /* @__PURE__ */ jsx7(
+        "li",
+        {
+          "aria-hidden": "true",
+          style: { height: `${trailingGap}px` }
+        },
+        `gap:${tree.zoneCompound}:${previousIndex}:end`
+      )
+    );
+  }
+  return /* @__PURE__ */ jsxs3("ul", { className: getClassName4(), ref: listRef, children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx7("div", { className: getClassName4("helper"), children: "No items" }),
+    renderedItems
+  ] });
+});
+var LayerTree = memo2(({
+  selectedId,
+  selectedPathIds,
+  trees
+}) => {
+  return /* @__PURE__ */ jsx7(Fragment, { children: trees.map((tree) => /* @__PURE__ */ jsx7(
+    LayerTreeZone,
+    {
+      depth: 0,
+      selectedId,
+      selectedPathIds,
+      tree
+    },
+    tree.zoneCompound
+  )) });
+});
+
+// components/CredBuild/components/Outline/index.tsx
+import { useMemo as useMemo3, memo as memo3 } from "react";
+
+// lib/data/find-zones-for-area.ts
+var findZonesForArea = (state, area) => {
+  return Object.keys(state.indexes.zones).filter(
+    (zone) => zone.split(":")[0] === area
+  );
+};
+
+// components/CredBuild/components/Outline/index.tsx
+import { useShallow } from "zustand/react/shallow";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Outline = memo3(() => {
+  const outlineOverride = useAppStore((s) => s.overrides.outline);
+  const config = useAppStore((s) => s.config);
+  const nodes = useAppStore((s) => s.state.indexes.nodes);
+  const zones = useAppStore((s) => s.state.indexes.zones);
+  const selectedId = useAppStore((s) => s.selectedItem?.props.id || null);
+  const rootZones = useAppStore(
+    useShallow((s) => findZonesForArea(s.state, "root"))
+  );
+  const selectedPathIds = useMemo3(() => {
+    const selectedPath = selectedId ? nodes[selectedId]?.path : null;
+    return new Set(
+      selectedPath?.map((candidate) => candidate.split(":")[0]).filter(Boolean) || []
+    );
+  }, [nodes, selectedId]);
+  const trees = useMemo3(
+    () => rootZones.map(
+      (zoneCompound) => buildLayerTree({
+        config,
+        label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
+        nodes,
+        zoneCompound,
+        zones
+      })
+    ),
+    [config, nodes, rootZones, zones]
+  );
+  const Wrapper = useMemo3(() => outlineOverride || "div", [outlineOverride]);
+  return /* @__PURE__ */ jsx8(Wrapper, { children: /* @__PURE__ */ jsx8(
+    LayerTree,
+    {
+      selectedId,
+      selectedPathIds,
+      trees
+    }
+  ) });
+});
+
+// css-module:/home/runner/work/credbuild/credbuild/plugins/outline/styles.module.css#css-module
+var styles_module_default5 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
+
+// plugins/outline/index.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var getClassName5 = get_class_name_factory_default("OutlinePlugin", styles_module_default5);
+var outlinePlugin = () => ({
+  name: "outline",
+  label: "Outline",
+  render: () => /* @__PURE__ */ jsx9("div", { className: getClassName5(), children: /* @__PURE__ */ jsx9(Outline, {}) }),
+  icon: /* @__PURE__ */ jsx9(List, {})
+});
+
+// css-module:/home/runner/work/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";
+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(() => {
+    const breadcrumbs = path?.map((zoneCompound) => {
+      const [componentId] = zoneCompound.split(":");
+      if (componentId === "root") {
+        return {
+          label: config?.root?.label || "Page",
+          selector: null
+        };
+      }
+      const node = appStore.getState().state.indexes.nodes[componentId];
+      const parentId = node.path[node.path.length - 1];
+      const contentIds = appStore.getState().state.indexes.zones[parentId]?.contentIds || [];
+      const index = contentIds.indexOf(componentId);
+      const label = node ? config.components[node.data.type]?.label ?? node.data.type : "Component";
+      return {
+        label,
+        selector: node ? {
+          index,
+          zone: node.path[node.path.length - 1]
+        } : null
+      };
+    }) || [];
+    if (renderCount) {
+      return breadcrumbs.slice(breadcrumbs.length - renderCount);
+    }
+    return breadcrumbs;
+  }, [path, renderCount, appStore, config.components, config?.root?.label]);
+};
+
+// components/Breadcrumbs/index.tsx
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var getClassName6 = get_class_name_factory_default("Breadcrumbs", styles_module_default6);
+var Breadcrumbs = ({
+  children,
+  numParents = 1
+}) => {
+  const setUi = useAppStore((s) => s.setUi);
+  const breadcrumbs = useBreadcrumbs(numParents);
+  return /* @__PURE__ */ jsxs4("div", { className: getClassName6(), children: [
+    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs4("div", { className: getClassName6("breadcrumb"), children: [
+      /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          className: getClassName6("breadcrumbLabel"),
+          onClick: () => setUi({ itemSelector: breadcrumb.selector }),
+          children: breadcrumb.label
+        }
+      ),
+      /* @__PURE__ */ jsx10(ChevronRight, { size: 16 })
+    ] }, i)),
+    children
+  ] });
+};
+
+// css-module:/home/runner/work/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
+import {
+  memo as memo4,
+  useCallback as useCallback2,
+  useContext as useContext3,
+  useEffect as useEffect5,
+  useMemo as useMemo5
+} from "react";
+import { useShallow as useShallow2 } from "zustand/react/shallow";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var getClassName7 = get_class_name_factory_default("CredBuildFields", styles_module_default7);
+var DefaultFields = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx11(Fragment2, { children });
+};
+var createOnChange = (fieldName, appStore) => async (value, updatedUi) => {
+  const { dispatch, state, selectedItem, resolveComponentData } = appStore.getState();
+  const { data, ui } = state;
+  const { itemSelector } = ui;
+  const rootProps = data.root.props || data.root;
+  const currentProps = selectedItem ? selectedItem.props : rootProps;
+  const newProps = { ...currentProps, [fieldName]: value };
+  if (selectedItem && itemSelector) {
+    const resolved = await resolveComponentData(
+      { ...selectedItem, props: newProps },
+      "replace"
+    );
+    const latestSelector = getSelectorForId(
+      appStore.getState().state,
+      selectedItem.props.id
+    );
+    if (!latestSelector) return;
+    dispatch({
+      type: "replace",
+      destinationIndex: latestSelector.index,
+      destinationZone: latestSelector.zone || rootDroppableId,
+      data: resolved.node,
+      ui: updatedUi
+    });
+    return;
+  }
+  if (data.root.props) {
+    dispatch({
+      type: "replaceRoot",
+      root: (await resolveComponentData(
+        { ...data.root, props: newProps },
+        "replace"
+      )).node,
+      ui: { ...ui, ...updatedUi },
+      recordHistory: true
+    });
+    return;
+  }
+  dispatch({
+    type: "setData",
+    data: { root: newProps }
+  });
+};
+var FieldsChildInner = ({ fieldName }) => {
+  const field = useAppStore((s) => s.fields.fields[fieldName]);
+  const isReadOnly = useAppStore(
+    (s) => ((s.selectedItem ? s.selectedItem.readOnly : s.state.data.root.readOnly) || {})[fieldName]
+  );
+  const id = useAppStore((s) => {
+    if (!field) return null;
+    return s.selectedItem ? `${s.selectedItem.props.id}_${field.type}_${fieldName}` : `root_${field.type}_${fieldName}`;
+  });
+  const permissions = useAppStore(
+    useShallow2((s) => {
+      const { selectedItem, permissions: permissions2 } = s;
+      return selectedItem ? permissions2.getPermissions({ item: selectedItem }) : permissions2.getPermissions({ root: true });
+    })
+  );
+  const appStore = useAppStoreApi();
+  const onChange = useCallback2(
+    async (value, updatedUi) => {
+      createOnChange(fieldName, appStore)(value, updatedUi);
+    },
+    [fieldName, appStore]
+  );
+  const { visible = true } = field ?? {};
+  const fieldStore = useContext3(fieldContextStore.ctx);
+  useEffect5(() => {
+    return appStore.subscribe(
+      (s) => {
+        const data = s.getCurrentData();
+        return data.props?.[fieldName];
+      },
+      (value) => {
+        fieldStore.setState({ [fieldName]: value });
+      }
+    );
+  }, [appStore, fieldStore, fieldName]);
+  if (!field || !id || !visible) return null;
+  if (field.type === "slot") return null;
+  return /* @__PURE__ */ jsx11("div", { className: getClassName7("field"), children: /* @__PURE__ */ jsx11(
+    AutoFieldPrivate,
+    {
+      field,
+      name: fieldName,
+      id,
+      readOnly: !permissions.edit || isReadOnly,
+      onChange
+    }
+  ) }, id);
+};
+var FieldsChild = ({ fieldName }) => {
+  const appStore = useAppStoreApi();
+  const initialValue = useMemo5(() => {
+    const value = appStore.getState().getCurrentData().props?.[fieldName];
+    return { [fieldName]: value };
+  }, [appStore, fieldName]);
+  return /* @__PURE__ */ jsx11(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ jsx11(FieldsChildInner, { fieldName }) });
+};
+var FieldsChildMemo = memo4(FieldsChild);
+var FieldsInternal = ({ wrapFields = true }) => {
+  const overrides = useAppStore((s) => s.overrides);
+  const componentResolving = useAppStore((s) => {
+    const loadingCount = s.selectedItem ? s.componentState[s.selectedItem.props.id]?.loadingCount : s.componentState["root"]?.loadingCount;
+    return (loadingCount ?? 0) > 0;
+  });
+  const itemSelector = useAppStore(useShallow2((s) => s.state.ui.itemSelector));
+  const id = useAppStore((s) => s.selectedItem?.props.id);
+  const appStore = useAppStoreApi();
+  useRegisterFieldsSlice(appStore, id);
+  const fieldsLoading = useAppStore((s) => s.fields.loading);
+  const fieldNames = useAppStore(
+    useShallow2((s) => {
+      if (s.fields.id === id) {
+        return Object.keys(s.fields.fields);
+      }
+      return [];
+    })
+  );
+  const isLoading = fieldsLoading || componentResolving;
+  const Wrapper = useMemo5(() => overrides.fields || DefaultFields, [overrides]);
+  return /* @__PURE__ */ jsxs5(
+    "form",
+    {
+      className: getClassName7({ wrapFields }),
+      onSubmit: (e) => {
+        e.preventDefault();
+      },
+      children: [
+        /* @__PURE__ */ jsx11(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx11(FieldsChildMemo, { fieldName }, fieldName)) }),
+        isLoading && /* @__PURE__ */ jsx11("div", { className: getClassName7("loadingOverlay"), children: /* @__PURE__ */ jsx11("div", { className: getClassName7("loadingOverlayInner"), children: /* @__PURE__ */ jsx11(Loader, { size: 16 }) }) })
+      ]
+    }
+  );
+};
+var Fields = memo4(FieldsInternal);
+
+// css-module:/home/runner/work/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
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var getClassName8 = get_class_name_factory_default("FieldsPlugin", styles_module_default8);
+var CurrentTitle = () => {
+  const label = useAppStore((s) => {
+    const selectedItem = s.selectedItem;
+    return selectedItem ? s.config.components[selectedItem.type]?.label ?? selectedItem.type : "Page";
+  });
+  return label;
+};
+var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
+  name: "fields",
+  label: "Fields",
+  render: () => /* @__PURE__ */ jsxs6("div", { className: getClassName8(), children: [
+    /* @__PURE__ */ jsx12("div", { className: getClassName8("header"), children: /* @__PURE__ */ jsx12(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ jsx12(CurrentTitle, {}) }) }),
+    /* @__PURE__ */ jsx12(Fields, {})
+  ] }),
+  icon: /* @__PURE__ */ jsx12(RectangleEllipsis, {}),
+  mobileOnly: desktopSideBar === "right"
+});
+
+// plugins/code/CodePanel.tsx
+import { useState as useState5 } from "react";
+
+// css-module:/home/runner/work/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 dispatch = useAppStore((s) => s.dispatch);
+  const root = useAppStore((s) => s.state.data.root);
+  const rootProps = root?.props || root;
+  const currentMode = rootProps?.mode || "blocks";
+  const aiPrompt = `Buatkan desain landing page lengkap dan premium dengan pendekatan mobile-first, modern, rapi, dan compact (padat & elegan) menggunakan HTML murni dan utilitas kelas Tailwind CSS. Halaman harus memuat struktur lengkap seperti Header/Navigation, Hero Section, Features/Layanan, Testimoni, Call-to-Action (CTA), dan Footer.
+
+Ketentuan penulisan kode:
+1. STRUKTUR BERSIH: Gunakan elemen semantik HTML5 seperti <section>, <header>, atau <div> sebagai wrapper utama per seksi. JANGAN sertakan tag <html>, <body>, <head>, atau <script>.
+2. MOBILE-FIRST & RESPONSIF: Desain harus sepenuhnya responsif. Mulai dari layout ponsel (default), lalu gunakan breakpoint (sm:, md:, lg:, xl:) secara terstruktur untuk layar yang lebih besar.
+3. ESTETIKA MODERN & PREMIUM: Gunakan skema warna harmonis (misal: warna gelap bernuansa glassmorphism, gradasi halus, border tipis semi-transparan, efek hover mikro interaktif).
+4. COMPACT & EFISIEN: Hindari padding/margin berlebih yang membuat halaman kosong melompong. Pastikan konten padat, terbaca dengan baik, dan memiliki rasio grid/flexbox yang rapi.
+5. BEBAS JAVASCRIPT: Seluruh interaktivitas dasar (seperti hover, focus, state) harus ditangani murni menggunakan utilitas kelas CSS Tailwind.`;
+  const handleCopyPrompt = () => {
+    navigator.clipboard.writeText(aiPrompt);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  const handleActivateHtmlMode = () => {
+    dispatch({
+      type: "setData",
+      data: (currentData) => {
+        return {
+          ...currentData,
+          content: [],
+          root: {
+            ...currentData.root,
+            props: {
+              ...currentData.root?.props,
+              mode: "html",
+              htmlCode: "",
+              htmlViewMode: "code"
+            }
+          }
+        };
+      }
+    });
+  };
+  const handleResetToBlocks = () => {
+    dispatch({
+      type: "setData",
+      data: (currentData) => {
+        return {
+          ...currentData,
+          content: [],
+          root: {
+            ...currentData.root,
+            props: {
+              ...currentData.root?.props,
+              mode: "blocks",
+              htmlCode: "",
+              htmlViewMode: "code"
+            }
+          }
+        };
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: getClassName9(), children: [
+    currentMode === "html" ? /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+      /* @__PURE__ */ jsx13("div", { className: getClassName9("title"), children: "Tempel Kode HTML" }),
+      /* @__PURE__ */ jsxs7("div", { className: "p-3 bg-emerald-950/40 border border-emerald-800/40 rounded-lg", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 text-emerald-400 text-xs font-semibold mb-3", children: [
+          /* @__PURE__ */ jsx13(CircleCheck, { size: 14, className: "shrink-0" }),
+          /* @__PURE__ */ jsx13("span", { children: "Mode HTML Aktif pada Kanvas" })
+        ] }),
+        /* @__PURE__ */ jsx13("p", { className: "text-[11px] leading-relaxed text-zinc-400 mb-4", children: "Gunakan editor kode langsung yang lapang langsung di area kanvas tengah untuk mengedit kode." }),
+        /* @__PURE__ */ jsx13("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsxs7(
+          "button",
+          {
+            type: "button",
+            onClick: handleResetToBlocks,
+            className: "w-full px-3 py-2 text-xs font-bold text-zinc-400 hover:text-white bg-zinc-950/50 border border-zinc-900 hover:border-zinc-800 rounded transition-colors cursor-pointer flex items-center justify-center gap-1.5",
+            children: [
+              /* @__PURE__ */ jsx13(LayoutGrid, { size: 13 }),
+              "Matikan Mode HTML (Mode Blok)"
+            ]
+          }
+        ) })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ jsx13("div", { className: getClassName9("title"), children: "Tempel Kode HTML" }),
+      /* @__PURE__ */ jsxs7("div", { className: "mb-4 p-3 bg-zinc-900/60 border border-zinc-800/60 rounded-lg text-[11px] leading-relaxed text-zinc-400", children: [
+        "Kanvas saat ini menggunakan ",
+        /* @__PURE__ */ jsx13("strong", { children: "Mode Blok Visual" }),
+        ". Klik tombol di bawah untuk beralih ke Mode HTML penuh pada kanvas."
+      ] }),
+      /* @__PURE__ */ jsxs7(
+        "button",
+        {
+          type: "button",
+          onClick: handleActivateHtmlMode,
+          className: "w-full px-4 py-2 border border-zinc-800 rounded-md text-xs font-semibold text-zinc-300 bg-zinc-900 hover:bg-zinc-800 hover:text-white transition-colors cursor-pointer flex items-center justify-center gap-1.5 mb-4",
+          children: [
+            /* @__PURE__ */ jsx13(Code, { size: 13 }),
+            "Aktifkan Mode HTML"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: getClassName9("promptSection"), children: [
+      /* @__PURE__ */ jsxs7("div", { className: getClassName9("promptHeader"), children: [
+        /* @__PURE__ */ jsx13("div", { className: getClassName9("optionTitle"), style: { margin: 0 }, children: "Prompt AI Generator" }),
+        /* @__PURE__ */ jsx13(
+          "button",
+          {
+            type: "button",
+            onClick: handleCopyPrompt,
+            className: getClassName9("copyBtn") + (copied ? ` ${styles_module_default9["CodePanel-copyBtn--copied"]}` : ""),
+            children: copied ? /* @__PURE__ */ jsxs7(Fragment3, { children: [
+              /* @__PURE__ */ jsx13(Check, { size: 11 }),
+              "Tersalin"
+            ] }) : /* @__PURE__ */ jsxs7(Fragment3, { children: [
+              /* @__PURE__ */ jsx13(Copy, { size: 11 }),
+              "Salin Prompt"
+            ] })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx13("div", { className: getClassName9("promptText"), children: aiPrompt })
+    ] })
+  ] });
+};
+
+// plugins/code/index.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var getClassName10 = get_class_name_factory_default("CodePlugin", styles_module_default9);
+var codePlugin = () => ({
+  name: "code",
+  label: "Code",
+  render: () => /* @__PURE__ */ jsx14("div", { className: getClassName10(), children: /* @__PURE__ */ jsx14(CodePanel, {}) }),
+  icon: /* @__PURE__ */ jsx14(Code, { size: 18 })
+});
+
+// components/CredBuild/index.tsx
+import {
+  useCallback as useCallback12,
+  useEffect as useEffect15,
+  useMemo as useMemo15,
+  useRef as useRef10,
+  useState as useState15
+} from "react";
+
+// components/CredBuild/components/Preview/index.tsx
+import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef4, useMemo as useMemo7, useState as useState7 } from "react";
+
+// components/AutoFrame/index.tsx
+import {
+  createContext as createContext2,
+  useCallback as useCallback3,
+  useContext as useContext4,
+  useEffect as useEffect6,
+  useRef as useRef3,
+  useState as useState6
+} from "react";
+import hash from "object-hash";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment4, jsx as jsx15 } from "react/jsx-runtime";
+var styleSelector = 'style, link[rel="stylesheet"]';
+var collectStyles = (doc) => {
+  const collected = [];
+  doc.querySelectorAll(styleSelector).forEach((style) => {
+    if (style.tagName === "STYLE") {
+      const hasContent = !!style.innerHTML.trim();
+      if (hasContent) {
+        collected.push(style);
+      }
+    } else {
+      collected.push(style);
+    }
+  });
+  return collected;
+};
+var getStyleSheet = (el) => {
+  return Array.from(document.styleSheets).find((ss) => {
+    const ownerNode = ss.ownerNode;
+    return ownerNode.href === el.href;
+  });
+};
+var getStyles = (styleSheet) => {
+  if (styleSheet) {
+    try {
+      return Array.from(styleSheet.cssRules).map((rule) => rule.cssText).join("");
+    } catch (e) {
+      console.warn(
+        "Access to stylesheet %s is denied. Ignoring\u2026",
+        styleSheet.href
+      );
+    }
+  }
+  return "";
+};
+var syncAttributes = (sourceElement, targetElement) => {
+  const attributes = sourceElement.attributes;
+  if (attributes?.length > 0) {
+    Array.from(attributes).forEach((attribute) => {
+      targetElement.setAttribute(attribute.name, attribute.value);
+    });
+  }
+};
+var defer = (fn) => setTimeout(fn, 0);
+var CopyHostStyles = ({
+  children,
+  debug = false,
+  onStylesLoaded = () => null
+}) => {
+  const { document: doc, window: win } = useFrame();
+  useEffect6(() => {
+    if (!win || !doc) {
+      return () => {
+      };
+    }
+    let elements = [];
+    const hashes = {};
+    const lookupEl = (el) => elements.findIndex((elementMap) => elementMap.original === el);
+    const mirrorEl = async (el, inlineStyles = false) => {
+      let mirror;
+      if (el.nodeName === "LINK" && inlineStyles) {
+        mirror = document.createElement("style");
+        mirror.type = "text/css";
+        let styleSheet = getStyleSheet(el);
+        if (!styleSheet) {
+          await new Promise((resolve) => {
+            const fn = () => {
+              resolve();
+              el.removeEventListener("load", fn);
+            };
+            el.addEventListener("load", fn);
+          });
+          styleSheet = getStyleSheet(el);
+        }
+        const styles2 = getStyles(styleSheet);
+        if (!styles2) {
+          if (debug) {
+            console.warn(
+              `Tried to load styles for link element, but couldn't find them. Skipping...`
+            );
+          }
+          return;
+        }
+        mirror.innerHTML = styles2;
+        mirror.setAttribute("data-href", el.getAttribute("href"));
+      } else {
+        mirror = el.cloneNode(true);
+      }
+      return mirror;
+    };
+    const addEl = async (el) => {
+      const index = lookupEl(el);
+      if (index > -1) {
+        if (debug)
+          console.log(
+            `Tried to add an element that was already mirrored. Updating instead...`
+          );
+        elements[index].mirror.innerText = el.innerText;
+        return;
+      }
+      const mirror = await mirrorEl(el);
+      if (!mirror) {
+        return;
+      }
+      const elHash = hash(mirror.outerHTML);
+      if (hashes[elHash]) {
+        if (debug)
+          console.log(
+            `iframe already contains element that is being mirrored. Skipping...`
+          );
+        return;
+      }
+      hashes[elHash] = true;
+      doc.head.append(mirror);
+      elements.push({ original: el, mirror });
+      if (debug) console.log(`Added style node ${el.outerHTML}`);
+    };
+    const removeEl = (el) => {
+      const index = lookupEl(el);
+      if (index === -1) {
+        if (debug)
+          console.log(
+            `Tried to remove an element that did not exist. Skipping...`
+          );
+        return;
+      }
+      const elHash = hash(el.outerHTML);
+      elements[index]?.mirror?.remove();
+      delete hashes[elHash];
+      if (debug) console.log(`Removed style node ${el.outerHTML}`);
+    };
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === "childList") {
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE) {
+              const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+              if (el && el.matches(styleSelector)) {
+                defer(() => addEl(el));
+              }
+            }
+          });
+          mutation.removedNodes.forEach((node) => {
+            if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE) {
+              const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+              if (el && el.matches(styleSelector)) {
+                defer(() => removeEl(el));
+              }
+            }
+          });
+        }
+      });
+    });
+    const parentDocument = win.parent.document;
+    const collectedStyles = collectStyles(parentDocument);
+    const hrefs = [];
+    let stylesLoaded = 0;
+    const parentHtml = parentDocument.getElementsByTagName("html")[0];
+    syncAttributes(parentHtml, doc.documentElement);
+    const parentBody = parentDocument.getElementsByTagName("body")[0];
+    syncAttributes(parentBody, doc.body);
+    Promise.all(
+      collectedStyles.map(async (styleNode, i) => {
+        if (styleNode.nodeName === "LINK") {
+          const linkHref = styleNode.href;
+          if (hrefs.indexOf(linkHref) > -1) {
+            return;
+          }
+          hrefs.push(linkHref);
+        }
+        const mirror = await mirrorEl(styleNode);
+        if (!mirror) return;
+        elements.push({ original: styleNode, mirror });
+        return mirror;
+      })
+    ).then((mirrorStyles) => {
+      const filtered = mirrorStyles.filter(
+        (el) => typeof el !== "undefined"
+      );
+      filtered.forEach((mirror) => {
+        mirror.onload = () => {
+          stylesLoaded = stylesLoaded + 1;
+          if (stylesLoaded >= filtered.length) {
+            onStylesLoaded();
+          }
+        };
+        mirror.onerror = () => {
+          console.warn(`AutoFrame couldn't load a stylesheet`);
+          stylesLoaded = stylesLoaded + 1;
+          if (stylesLoaded >= filtered.length) {
+            onStylesLoaded();
+          }
+        };
+      });
+      doc.head.innerHTML = "";
+      doc.head.append(...filtered);
+      filtered.forEach((mirror) => {
+        if (mirror.nodeName === "STYLE") {
+          stylesLoaded = stylesLoaded + 1;
+        }
+      });
+      if (stylesLoaded >= filtered.length) {
+        onStylesLoaded();
+      }
+      observer.observe(parentDocument.head, { childList: true, subtree: true });
+      filtered.forEach((el) => {
+        const elHash = hash(el.outerHTML);
+        hashes[elHash] = true;
+      });
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [debug, doc, onStylesLoaded, win]);
+  return /* @__PURE__ */ jsx15(Fragment4, { children });
+};
+var autoFrameContext = createContext2({});
+var useFrame = () => useContext4(autoFrameContext);
+function AutoFrame({
+  children,
+  className,
+  debug,
+  id,
+  onReady = () => {
+  },
+  onNotReady = () => {
+  },
+  frameRef,
+  ...props
+}) {
+  const [loaded, setLoaded] = useState6(false);
+  const [ctx, setCtx] = useState6({});
+  const [mountTarget, setMountTarget] = useState6();
+  const [stylesLoaded, setStylesLoaded] = useState6(false);
+  const handleStylesLoaded = useCallback3(() => {
+    setStylesLoaded(true);
+  }, []);
+  const onReadyRef = useRef3(onReady);
+  const onNotReadyRef = useRef3(onNotReady);
+  useEffect6(() => {
+    onReadyRef.current = onReady;
+    onNotReadyRef.current = onNotReady;
+  }, [onReady, onNotReady]);
+  useEffect6(() => {
+    if (frameRef.current) {
+      const doc = frameRef.current.contentDocument;
+      const win = frameRef.current.contentWindow;
+      setCtx((prev) => {
+        if (prev.document === doc && prev.window === win) return prev;
+        return {
+          document: doc || void 0,
+          window: win || void 0
+        };
+      });
+      const newMountTarget = frameRef.current.contentDocument?.getElementById("frame-root");
+      setMountTarget((prev) => {
+        if (prev === newMountTarget) return prev;
+        return newMountTarget;
+      });
+      if (doc && win && stylesLoaded) {
+        onReadyRef.current();
+      }
+    }
+  }, [frameRef, loaded, stylesLoaded]);
+  return /* @__PURE__ */ jsx15(
+    "iframe",
+    {
+      ...props,
+      className,
+      id,
+      srcDoc: '<!DOCTYPE html><html><head></head><body><div id="frame-root" data-credbuild-entry></div></body></html>',
+      ref: frameRef,
+      onLoad: () => {
+        setLoaded(true);
+      },
+      children: /* @__PURE__ */ jsx15(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx15(
+        CopyHostStyles,
+        {
+          debug,
+          onStylesLoaded: handleStylesLoaded,
+          children: createPortal(children, mountTarget)
+        }
+      ) })
+    }
+  );
+}
+AutoFrame.displayName = "AutoFrame";
+var AutoFrame_default = AutoFrame;
+
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Preview/styles.module.css#css-module
+var styles_module_default10 = { "CredBuildPreview": "_CredBuildPreview_1z08a_1", "CredBuildPreview-frame": "_CredBuildPreview-frame_1z08a_6" };
+
+// lib/bubble-pointer-event.ts
+var BaseEvent = typeof PointerEvent !== "undefined" ? PointerEvent : Event;
+var BubbledPointerEvent = class extends BaseEvent {
+  constructor(type, data) {
+    super(type, data);
+    this._originalTarget = null;
+    this.originalTarget = data.originalTarget;
+  }
+  // Necessary for Firefox
+  set originalTarget(target) {
+    this._originalTarget = target;
+  }
+  // Necessary for Firefox
+  get originalTarget() {
+    return this._originalTarget;
+  }
+};
+
+// components/CredBuild/components/Preview/index.tsx
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+var getClassName11 = get_class_name_factory_default("CredBuildPreview", styles_module_default10);
+var useBubbleIframeEvents = (ref) => {
+  const status = useAppStore((s) => s.status);
+  useEffect7(() => {
+    if (ref.current && status === "READY") {
+      const iframe = ref.current;
+      const handlePointerMove = (event) => {
+        const evt = new BubbledPointerEvent("pointermove", {
+          ...event,
+          bubbles: true,
+          cancelable: false,
+          clientX: event.clientX,
+          clientY: event.clientY,
+          originalTarget: event.target
+        });
+        iframe.dispatchEvent(evt);
+      };
+      const register = () => {
+        unregister();
+        iframe.contentDocument?.addEventListener(
+          "pointermove",
+          handlePointerMove,
+          {
+            capture: true
+          }
+        );
+      };
+      const unregister = () => {
+        iframe.contentDocument?.removeEventListener(
+          "pointermove",
+          handlePointerMove
+        );
+      };
+      register();
+      return () => {
+        unregister();
+      };
+    }
+  }, [status, ref]);
+};
+var Preview = ({ id = "credbuild-preview" }) => {
+  const dispatch = useAppStore((s) => s.dispatch);
+  const root = useAppStore((s) => s.state.data.root);
+  const config = useAppStore((s) => s.config);
+  const setStatus = useAppStore((s) => s.setStatus);
+  const iframe = useAppStore((s) => s.iframe);
+  const overrides = useAppStore((s) => s.overrides);
+  const metadata = useAppStore((s) => s.metadata);
+  const renderData = useAppStore(
+    (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
+  );
+  const Page = useCallback4(
+    (pageProps) => {
+      const propsWithSlots = useSlots(
+        config,
+        { type: "root", props: pageProps },
+        DropZoneEditPure
+      );
+      const richtextProps = useRichtextProps(
+        config.root?.fields ?? {},
+        pageProps
+      );
+      return config.root?.render ? config.root?.render({
+        id: "credbuild-root",
+        ...propsWithSlots,
+        ...richtextProps
+      }) : /* @__PURE__ */ jsx16(Fragment5, { children: propsWithSlots.children });
+    },
+    [config]
+  );
+  const Frame = useMemo7(() => 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 = useRef4(null);
+  useBubbleIframeEvents(ref);
+  const [localCode, setLocalCode] = useState7(htmlCode);
+  useEffect7(() => {
+    setLocalCode(htmlCode);
+  }, [htmlCode]);
+  useEffect7(() => {
+    if (localCode === htmlCode) return;
+    const timer = setTimeout(() => {
+      dispatch({
+        type: "setData",
+        data: (currentData) => {
+          if (currentData.root?.props?.htmlCode === localCode) {
+            return currentData;
+          }
+          return {
+            ...currentData,
+            root: {
+              ...currentData.root,
+              props: {
+                ...currentData.root?.props,
+                htmlCode: localCode
+              }
+            }
+          };
+        }
+      });
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [localCode, htmlCode, dispatch]);
+  const handleSaveOnBlur = () => {
+    dispatch({
+      type: "setData",
+      data: (currentData) => {
+        if (currentData.root?.props?.htmlCode === localCode) {
+          return currentData;
+        }
+        return {
+          ...currentData,
+          root: {
+            ...currentData.root,
+            props: {
+              ...currentData.root?.props,
+              htmlCode: localCode
+            }
+          }
+        };
+      }
+    });
+  };
+  const handleSetViewMode = (modeVal) => {
+    dispatch({
+      type: "setData",
+      data: (currentData) => ({
+        ...currentData,
+        root: {
+          ...currentData.root,
+          props: {
+            ...currentData.root?.props,
+            htmlViewMode: modeVal
+          }
+        }
+      })
+    });
+  };
+  const handleResetToBlocks = () => {
+    dispatch({
+      type: "setData",
+      data: (currentData) => ({
+        ...currentData,
+        content: [],
+        root: {
+          ...currentData.root,
+          props: {
+            ...currentData.root?.props,
+            mode: "blocks",
+            htmlCode: "",
+            htmlViewMode: "code"
+          }
+        }
+      })
+    });
+  };
+  const isHtmlCodeEditActive = isHtmlMode && !renderData && htmlViewMode === "code";
+  const isHtmlPreviewActive = isHtmlMode && !renderData && htmlViewMode === "preview";
+  const inner = rootProps?.mode === "html" ? !renderData ? /* @__PURE__ */ jsx16(HtmlModeRender, { htmlCode: rootProps.htmlCode, isEditing: true }) : /* @__PURE__ */ jsx16(Render, { data: renderData, config, metadata }) : !renderData ? /* @__PURE__ */ jsx16(
+    Page,
+    {
+      ...rootProps,
+      credbuild: {
+        renderDropZone: DropZonePure,
+        isEditing: true,
+        dragRef: null,
+        metadata
+      },
+      editMode: true,
+      children: /* @__PURE__ */ jsx16(DropZonePure, { zone: rootDroppableId })
+    }
+  ) : /* @__PURE__ */ jsx16(Render, { data: renderData, config, metadata });
+  useEffect7(() => {
+    if (!iframe.enabled) {
+      setStatus("READY");
+    }
+  }, [iframe.enabled, setStatus]);
+  if (isHtmlCodeEditActive) {
+    return /* @__PURE__ */ jsx16(
+      "div",
+      {
+        className: getClassName11(),
+        id,
+        "data-credbuild-preview": true,
+        style: { height: "100%", display: "flex", flexDirection: "column" },
+        children: /* @__PURE__ */ jsx16("div", { style: {
+          display: "flex",
+          flexDirection: "column",
+          flex: 1,
+          background: "#020617",
+          position: "relative"
+        }, children: /* @__PURE__ */ jsxs8("div", { style: {
+          display: "flex",
+          flex: 1,
+          position: "relative",
+          overflow: "hidden"
+        }, children: [
+          /* @__PURE__ */ jsx16("div", { style: {
+            width: 45,
+            background: "#0b0f19",
+            borderRight: "1px solid #1e293b",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-end",
+            padding: "16px 8px 16px 0",
+            fontFamily: "Menlo, Monaco, Consolas, monospace",
+            fontSize: 12,
+            color: "#475569",
+            userSelect: "none",
+            lineHeight: 1.6
+          }, children: Array.from({ length: Math.max(localCode.split("\n").length, 25) }).map((_, i) => /* @__PURE__ */ jsx16("div", { children: i + 1 }, i)) }),
+          /* @__PURE__ */ jsx16(
+            "textarea",
+            {
+              value: localCode,
+              onChange: (e) => setLocalCode(e.target.value),
+              onBlur: handleSaveOnBlur,
+              placeholder: "<!-- Tempel kode HTML/Tailwind di sini -->\n<section class='bg-zinc-900 text-white p-12'>\n  <h1 class='text-3xl font-bold'>Hello World</h1>\n</section>",
+              spellCheck: false,
+              style: {
+                flex: 1,
+                background: "transparent",
+                border: "none",
+                outline: "none",
+                color: "#e2e8f0",
+                fontFamily: "Menlo, Monaco, Consolas, 'Fira Code', monospace",
+                fontSize: 13,
+                lineHeight: 1.6,
+                padding: "16px 20px",
+                resize: "none",
+                height: "100%",
+                width: "100%",
+                overflowY: "auto"
+              }
+            }
+          )
+        ] }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      className: getClassName11(),
+      id,
+      "data-credbuild-preview": true,
+      style: { height: "100%", display: "flex", flexDirection: "column" },
+      onClick: (e) => {
+        const el = e.target;
+        if (!el.hasAttribute("data-credbuild-component") && !el.hasAttribute("data-credbuild-dropzone")) {
+          dispatch({ type: "setUi", ui: { itemSelector: null } });
+        }
+      },
+      children: /* @__PURE__ */ jsx16("div", { style: { flex: 1, position: "relative", minHeight: 0, height: "100%" }, children: iframe.enabled ? /* @__PURE__ */ jsx16(
+        AutoFrame_default,
+        {
+          id: "preview-frame",
+          className: getClassName11("frame"),
+          "data-rfd-iframe": true,
+          onReady: () => {
+            setStatus("READY");
+          },
+          onNotReady: () => {
+            setStatus("MOUNTED");
+          },
+          frameRef: ref,
+          children: /* @__PURE__ */ jsx16(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+            if (Frame) {
+              return /* @__PURE__ */ jsx16(Frame, { document: document2, children: inner });
+            }
+            return inner;
+          } })
+        }
+      ) : /* @__PURE__ */ jsx16(
+        "div",
+        {
+          id: "preview-frame",
+          className: getClassName11("frame"),
+          ref,
+          "data-credbuild-entry": true,
+          style: { height: "100%", width: "100%" },
+          children: inner
+        }
+      ) })
+    }
+  );
+};
+
+// lib/use-loaded-overrides.ts
+import { useMemo as useMemo8 } from "react";
+
+// lib/load-overrides.ts
+var loadOverrides = ({
+  overrides,
+  plugins
+}) => {
+  const collected = { ...overrides };
+  plugins?.forEach((plugin) => {
+    if (!plugin.overrides) return;
+    Object.keys(plugin.overrides).forEach((_overridesType) => {
+      const overridesType = _overridesType;
+      if (!plugin.overrides?.[overridesType]) return;
+      if (overridesType === "fieldTypes") {
+        const fieldTypes = plugin.overrides.fieldTypes;
+        Object.keys(fieldTypes).forEach((fieldType) => {
+          collected.fieldTypes = collected.fieldTypes || {};
+          const childNode2 = collected.fieldTypes[fieldType];
+          const Comp2 = (props) => fieldTypes[fieldType]({
+            ...props,
+            children: childNode2 ? childNode2(props) : props.children
+          });
+          collected.fieldTypes[fieldType] = Comp2;
+        });
+        return;
+      }
+      const childNode = collected[overridesType];
+      const Comp = (props) => plugin.overrides[overridesType]({
+        ...props,
+        children: childNode ? childNode(props) : props.children
+      });
+      collected[overridesType] = Comp;
+    });
+  });
+  return collected;
+};
+
+// lib/use-loaded-overrides.ts
+var useLoadedOverrides = ({
+  overrides,
+  plugins
+}) => {
+  return useMemo8(() => {
+    return loadOverrides({ overrides, plugins });
+  }, [plugins, overrides]);
+};
+
+// components/CredBuild/index.tsx
+import { deepEqual } from "fast-equals";
+
+// components/CredBuild/components/Layout/index.tsx
+import { useEffect as useEffect14, useMemo as useMemo14, useState as useState14 } from "react";
+
+// components/CredBuild/context.tsx
+import {
+  createContext as createContext3,
+  useContext as useContext5
+} from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var propsContext = createContext3({});
+function PropsProvider(props) {
+  return /* @__PURE__ */ jsx17(propsContext.Provider, { value: props, children: props.children });
+}
+var usePropsContext = () => useContext5(propsContext);
+
+// css-module:/home/runner/work/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";
+var styles = ``;
+var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
+  const [el, setEl] = useState8();
+  useEffect8(() => {
+    setEl(document.createElement("style"));
+  }, []);
+  useEffect8(() => {
+    if (!el || typeof window === "undefined") {
+      return;
+    }
+    el.innerHTML = initialStyles;
+    if (iframeEnabled) {
+      const frame = getFrame();
+      frame?.head?.appendChild(el);
+    }
+    document.head.appendChild(el);
+  }, [iframeEnabled, el, initialStyles]);
+  return el;
+};
+var useInjectGlobalCss = (iframeEnabled) => {
+  return useInjectStyleSheet(styles, iframeEnabled);
+};
+
+// components/DefaultOverride/index.tsx
+import { Fragment as Fragment6, jsx as jsx18 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx18(Fragment6, { children });
+
+// lib/use-preview-mode-hotkeys.ts
+import { useCallback as useCallback5 } from "react";
+var usePreviewModeHotkeys = () => {
+  const appStore = useAppStoreApi();
+  const toggleInteractive = useCallback5(() => {
+    const dispatch = appStore.getState().dispatch;
+    dispatch({
+      type: "setUi",
+      ui: (ui) => ({
+        previewMode: ui.previewMode === "edit" ? "interactive" : "edit"
+      })
+    });
+  }, [appStore]);
+  useHotkey({ meta: true, i: true }, toggleInteractive);
+  useHotkey({ ctrl: true, i: true }, toggleInteractive);
+};
+
+// components/DragDropContext/index.tsx
+import { DragDropProvider } from "@dnd-kit/react";
+import {
+  useCallback as useCallback6,
+  useEffect as useEffect9,
+  useMemo as useMemo9,
+  useRef as useRef5,
+  useState as useState9
+} from "react";
+import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
+
+// lib/dnd/NestedDroppablePlugin.ts
+import { Plugin } from "@dnd-kit/abstract";
+
+// lib/throttle.ts
+function timeout(callback, duration) {
+  const id = setTimeout(callback, duration);
+  return () => clearTimeout(id);
+}
+function throttle(func, limit) {
+  const time = () => performance.now();
+  let cancel;
+  let lastRan = 0;
+  return function(...args) {
+    const now = time();
+    const context = this;
+    if (now - lastRan >= limit) {
+      func.apply(context, args);
+      lastRan = now;
+    } else {
+      cancel?.();
+      cancel = timeout(() => {
+        func.apply(context, args);
+        lastRan = time();
+      }, limit - (now - lastRan));
+    }
+  };
+}
+
+// lib/global-position.ts
+var GlobalPosition = class {
+  constructor(target, original) {
+    this.scaleFactor = 1;
+    this.frameEl = null;
+    this.frameRect = null;
+    this.target = target;
+    this.original = original;
+    this.frameEl = document.querySelector("iframe#preview-frame");
+    if (this.frameEl) {
+      this.frameRect = this.frameEl.getBoundingClientRect();
+      this.scaleFactor = this.frameRect.width / (this.frameEl.contentWindow?.innerWidth || 1);
+    }
+  }
+  get x() {
+    return this.original.x;
+  }
+  get y() {
+    return this.original.y;
+  }
+  get global() {
+    if (document !== this.target.ownerDocument && this.frameRect) {
+      return {
+        x: this.x * this.scaleFactor + this.frameRect.left,
+        y: this.y * this.scaleFactor + this.frameRect.top
+      };
+    }
+    return this.original;
+  }
+  get frame() {
+    if (document === this.target.ownerDocument && this.frameRect) {
+      return {
+        x: (this.x - this.frameRect.left) / this.scaleFactor,
+        y: (this.y - this.frameRect.top) / this.scaleFactor
+      };
+    }
+    return this.original;
+  }
+};
+
+// lib/dnd/NestedDroppablePlugin.ts
+var depthSort = (candidates) => {
+  return candidates.sort((a, b) => {
+    const aData = a.data;
+    const bData = b.data;
+    if (aData.depth > bData.depth) {
+      return 1;
+    }
+    if (bData.depth > aData.depth) {
+      return -1;
+    }
+    return 0;
+  });
+};
+var getZoneId = (candidate) => {
+  let id = candidate?.id;
+  if (!candidate) return null;
+  if (candidate.type === "component") {
+    const data = candidate.data;
+    if (data.containsActiveZone) {
+      id = null;
+    } else {
+      id = data.zone;
+    }
+  } else if (candidate.type === "void") {
+    return "void";
+  }
+  return id;
+};
+var BUFFER = 6;
+var getPointerCollisions = (position, manager) => {
+  const candidates = [];
+  let elements = position.target.ownerDocument.elementsFromPoint(
+    position.x,
+    position.y
+  );
+  const previewFrame = elements.find(
+    (el) => el.getAttribute("data-credbuild-preview")
+  );
+  const drawer = elements.find((el) => el.getAttribute("data-credbuild-drawer"));
+  if (drawer) {
+    elements = [drawer];
+  }
+  if (previewFrame) {
+    const frame = getFrame();
+    if (frame) {
+      elements = frame.elementsFromPoint(position.frame.x, position.frame.y);
+    }
+  }
+  if (elements) {
+    for (let i = 0; i < elements.length; i++) {
+      const element = elements[i];
+      const dropzoneId = element.getAttribute("data-credbuild-dropzone");
+      const id = element.getAttribute("data-credbuild-dnd");
+      const isVoid = element.hasAttribute("data-credbuild-dnd-void");
+      if (BUFFER && (dropzoneId || id) && !isVoid) {
+        const box = element.getBoundingClientRect();
+        const contractedBox = {
+          left: box.left + BUFFER,
+          right: box.right - BUFFER,
+          top: box.top + BUFFER,
+          bottom: box.bottom - BUFFER
+        };
+        if (position.frame.x < contractedBox.left || position.frame.x > contractedBox.right || position.frame.y > contractedBox.bottom || position.frame.y < contractedBox.top) {
+          continue;
+        }
+      }
+      if (dropzoneId) {
+        const droppable = manager.registry.droppables.get(dropzoneId);
+        if (droppable) {
+          candidates.push(droppable);
+        }
+      }
+      if (id) {
+        const droppable = manager.registry.droppables.get(id);
+        if (droppable) {
+          candidates.push(droppable);
+        }
+      }
+    }
+  }
+  return candidates;
+};
+var findDeepestCandidate = (position, manager) => {
+  const candidates = getPointerCollisions(position, manager);
+  if (candidates.length > 0) {
+    const sortedCandidates = depthSort(candidates);
+    const draggable = manager.dragOperation.source;
+    const draggedCandidateIndex = sortedCandidates.findIndex(
+      (candidate) => candidate.id === draggable?.id
+    );
+    const draggedCandidateId = draggable?.id;
+    let filteredCandidates = [...sortedCandidates];
+    if (draggedCandidateId && draggedCandidateIndex > -1) {
+      filteredCandidates.splice(draggedCandidateIndex, 1);
+    }
+    filteredCandidates = filteredCandidates.filter((candidate) => {
+      const candidateData = candidate.data;
+      if (draggedCandidateId && draggedCandidateIndex > -1) {
+        if (candidateData.path.indexOf(draggedCandidateId) > -1) {
+          return false;
+        }
+      }
+      if (candidate.type === "dropzone") {
+        const candidateData2 = candidate.data;
+        if (!candidateData2.isDroppableTarget) {
+          return false;
+        }
+        if (candidateData2.areaId === draggedCandidateId) {
+          return false;
+        }
+      } else if (candidate.type === "component") {
+        const candidateData2 = candidate.data;
+        if (!candidateData2.inDroppableZone) {
+          return false;
+        }
+      }
+      return true;
+    });
+    filteredCandidates.reverse();
+    const primaryCandidate = filteredCandidates[0];
+    if (!primaryCandidate) return { zone: null, area: null };
+    const primaryCandidateData = primaryCandidate.data;
+    const primaryCandidateIsComponent = "containsActiveZone" in primaryCandidateData;
+    const zone = getZoneId(primaryCandidate);
+    const area = primaryCandidateIsComponent && primaryCandidateData.containsActiveZone ? filteredCandidates[0].id : filteredCandidates[0]?.data.areaId;
+    return { zone, area };
+  }
+  return {
+    zone: rootDroppableId,
+    area: rootAreaId
+  };
+};
+var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlugin extends Plugin {
+  constructor(manager, options) {
+    super(manager);
+    if (typeof window === "undefined") {
+      return;
+    }
+    this.registerEffect(() => {
+      const handleMove = (event) => {
+        const target = event instanceof BubbledPointerEvent ? event.originalTarget || event.target : event.target;
+        const position = new GlobalPosition(target, {
+          x: event.clientX,
+          y: event.clientY
+        });
+        const elements = document.elementsFromPoint(
+          position.global.x,
+          position.global.y
+        );
+        const overEl = elements.some((el) => el.id === id);
+        if (overEl) {
+          onChange(findDeepestCandidate(position, manager), manager);
+        }
+      };
+      const handleMoveThrottled = throttle(handleMove, 50);
+      const handlePointerMove = (event) => {
+        handleMoveThrottled(event);
+      };
+      document.body.addEventListener("pointermove", handlePointerMove, {
+        capture: true
+        // dndkit's PointerSensor prevents propagation during drag
+      });
+      const cleanup = () => {
+        document.body.removeEventListener("pointermove", handlePointerMove, {
+          capture: true
+        });
+      };
+      return cleanup;
+    });
+  }
+};
+
+// lib/insert-component.ts
+var insertComponent = async (componentType, zone, index, appStore) => {
+  const { getState } = appStore;
+  const id = generateId(componentType);
+  const insertActionData = {
+    type: "insert",
+    componentType,
+    destinationIndex: index,
+    destinationZone: zone,
+    id
+  };
+  const stateBefore = getState().state;
+  const insertedState = insertAction(stateBefore, insertActionData, getState());
+  const dispatch = getState().dispatch;
+  dispatch({
+    ...insertActionData,
+    // Dispatch insert rather set, as user's may rely on this via onAction
+    // We must always record history here so the insert is added to user history
+    // If the user has defined a resolveData method, they will end up with 2 history
+    // entries on insert - one for the initial insert, and one when the data resolves
+    recordHistory: true
+  });
+  const itemSelector = { index, zone };
+  dispatch({ type: "setUi", ui: { itemSelector } });
+  const itemData = getItem(itemSelector, insertedState);
+  if (!itemData) return;
+  const resolveComponentData = getState().resolveComponentData;
+  const resolved = await resolveComponentData(itemData, "insert");
+  if (!resolved.didChange) return;
+  const latestItemSelector = getSelectorForId(getState().state, id);
+  if (!latestItemSelector) return;
+  dispatch({
+    type: "replace",
+    destinationZone: latestItemSelector.zone,
+    destinationIndex: latestItemSelector.index,
+    data: resolved.node
+  });
+};
+
+// lib/move-component.ts
+var moveComponent = async (id, sourceSelector, destinationSelector, appStore) => {
+  const dispatch = appStore.getState().dispatch;
+  dispatch({
+    type: "move",
+    sourceIndex: sourceSelector.index,
+    sourceZone: sourceSelector.zone ?? rootDroppableId,
+    destinationIndex: destinationSelector.index,
+    destinationZone: destinationSelector.zone ?? rootDroppableId,
+    recordHistory: false
+  });
+  const componentData = appStore.getState().state.indexes.nodes[id]?.data;
+  if (!componentData) return;
+  const resolveComponentData = appStore.getState().resolveComponentData;
+  const resolvedData = await resolveComponentData(componentData, "move");
+  const latestItemSelector = getSelectorForId(
+    appStore.getState().state,
+    componentData.props.id
+  );
+  if (!latestItemSelector) return;
+  if (resolvedData.didChange)
+    dispatch({
+      type: "replace",
+      data: resolvedData.node,
+      destinationIndex: latestItemSelector.index,
+      destinationZone: latestItemSelector.zone ?? rootDroppableId
+    });
+};
+
+// components/DragDropContext/index.tsx
+import { useDebouncedCallback } from "use-debounce";
+import { createStore as createStore2 } from "zustand";
+
+// lib/get-deep-dir.ts
+function getDeepDir(el) {
+  function findDir(node) {
+    if (!node) return "ltr";
+    const d = node.getAttribute("dir");
+    return d || findDir(node.parentElement);
+  }
+  return el ? findDir(el) : "ltr";
+}
+
+// components/DragDropContext/index.tsx
+import { effect } from "@dnd-kit/state";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var DEBUG = false;
+var AREA_CHANGE_DEBOUNCE_MS = 100;
+var useTempDisableFallback = (timeout2) => {
+  const lastFallbackDisable = useRef5(null);
+  return useCallback6((manager) => {
+    collisionStore.setState({ fallbackEnabled: false });
+    const fallbackId = generateId();
+    lastFallbackDisable.current = fallbackId;
+    setTimeout(() => {
+      if (lastFallbackDisable.current === fallbackId) {
+        collisionStore.setState({ fallbackEnabled: true });
+        manager.collisionObserver.forceUpdate(true);
+      }
+    }, timeout2);
+  }, [timeout2]);
+};
+var DragDropContextClient = ({
+  children,
+  disableAutoScroll
+}) => {
+  const dispatch = useAppStore((s) => s.dispatch);
+  const instanceId = useAppStore((s) => s.instanceId);
+  const appStore = useAppStoreApi();
+  const debouncedParamsRef = useRef5(null);
+  const tempDisableFallback = useTempDisableFallback(100);
+  const [zoneStore] = useState9(() => {
+    const rootVirtualizers = /* @__PURE__ */ new Map();
+    return createStore2(() => ({
+      zoneDepthIndex: {},
+      nextZoneDepthIndex: {},
+      areaDepthIndex: {},
+      nextAreaDepthIndex: {},
+      draggedItem: null,
+      previewIndex: {},
+      enabledIndex: {},
+      hoveringComponent: null,
+      registerRootVirtualizer: (zoneCompound, handle) => {
+        rootVirtualizers.set(zoneCompound, handle);
+      },
+      unregisterRootVirtualizer: (zoneCompound) => {
+        rootVirtualizers.delete(zoneCompound);
+      },
+      scrollToComponent: (id) => {
+        const virtualizers = Array.from(rootVirtualizers.values());
+        if (virtualizers.length > 0) {
+          for (const handle of virtualizers) {
+            const index = handle.resolveIndex(id);
+            if (index < 0) {
+              continue;
+            }
+            handle.virtualizer.scrollToIndex(index, {
+              behavior: "auto",
+              // We avoid smooth scroll as this triggers virtualizer renders
+              align: "auto"
+            });
+          }
+        } else {
+          const frame = getFrame();
+          const el = frame?.querySelector(`[data-credbuild-component="${id}"]`);
+          el?.scrollIntoView({ behavior: "smooth" });
+        }
+      }
+    }));
+  });
+  const getChanged = useCallback6(
+    (params) => {
+      const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
+      const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
+      const stateHasArea = Object.keys(areaDepthIndex).length > 0;
+      let zoneChanged = false;
+      let areaChanged = false;
+      if (params.zone && !zoneDepthIndex[params.zone]) {
+        zoneChanged = true;
+      } else if (!params.zone && stateHasZone) {
+        zoneChanged = true;
+      }
+      if (params.area && !areaDepthIndex[params.area]) {
+        areaChanged = true;
+      } else if (!params.area && stateHasArea) {
+        areaChanged = true;
+      }
+      return { zoneChanged, areaChanged };
+    },
+    [zoneStore]
+  );
+  const setDeepestAndCollide = useCallback6(
+    (params, manager) => {
+      const { zoneChanged, areaChanged } = getChanged(params);
+      if (!zoneChanged && !areaChanged) return;
+      zoneStore.setState({
+        zoneDepthIndex: params.zone ? { [params.zone]: true } : {},
+        areaDepthIndex: params.area ? { [params.area]: true } : {}
+      });
+      tempDisableFallback(manager);
+      setTimeout(() => {
+        manager.collisionObserver.forceUpdate(true);
+      }, 50);
+      debouncedParamsRef.current = null;
+    },
+    [zoneStore, getChanged, tempDisableFallback]
+  );
+  const setDeepestDb = useDebouncedCallback(
+    setDeepestAndCollide,
+    AREA_CHANGE_DEBOUNCE_MS
+  );
+  const cancelDb = () => {
+    setDeepestDb.cancel();
+    debouncedParamsRef.current = null;
+  };
+  useEffect9(() => {
+    if (DEBUG) {
+      return zoneStore.subscribe(
+        (s) => console.log(
+          s.previewIndex,
+          Object.entries(s.zoneDepthIndex || {})[0]?.[0],
+          Object.entries(s.areaDepthIndex || {})[0]?.[0]
+        )
+      );
+    }
+  }, [zoneStore]);
+  const [plugins] = useState9(() => [
+    ...disableAutoScroll ? defaultPreset.plugins.filter((plugin) => plugin !== AutoScroller) : defaultPreset.plugins,
+    createNestedDroppablePlugin(
+      {
+        onChange: (params, manager) => {
+          const state = zoneStore.getState();
+          const { zoneChanged, areaChanged } = getChanged(params);
+          const isDragging = manager.dragOperation.status.dragging;
+          if (areaChanged || zoneChanged) {
+            let nextZoneDepthIndex = {};
+            let nextAreaDepthIndex = {};
+            if (params.zone) {
+              nextZoneDepthIndex = { [params.zone]: true };
+            }
+            if (params.area) {
+              nextAreaDepthIndex = { [params.area]: true };
+            }
+            zoneStore.setState({ nextZoneDepthIndex, nextAreaDepthIndex });
+          }
+          if (params.zone !== "void" && state?.zoneDepthIndex["void"]) {
+            setDeepestAndCollide(params, manager);
+            return;
+          }
+          if (areaChanged) {
+            if (isDragging) {
+              const debouncedParams = debouncedParamsRef.current;
+              const isSameParams = debouncedParams && debouncedParams.area === params.area && debouncedParams.zone === params.zone;
+              if (!isSameParams) {
+                cancelDb();
+                setDeepestDb(params, manager);
+                debouncedParamsRef.current = params;
+              }
+            } else {
+              cancelDb();
+              setDeepestAndCollide(params, manager);
+            }
+            return;
+          }
+          if (zoneChanged) {
+            setDeepestAndCollide(params, manager);
+          }
+          cancelDb();
+        }
+      },
+      instanceId
+    )
+  ]);
+  const sensors = useSensors();
+  const [dragListeners, setDragListeners] = useState9({});
+  const dragMode = useRef5(null);
+  const initialSelector = useRef5(void 0);
+  const nextContextValue = useMemo9(
+    () => ({
+      mode: "edit",
+      areaId: "root",
+      depth: 0
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx19(
+    dragListenerContext.Provider,
+    {
+      value: {
+        dragListeners,
+        setDragListeners
+      },
+      children: /* @__PURE__ */ jsx19(
+        DragDropProvider,
+        {
+          plugins,
+          sensors,
+          onDragEnd: (event, manager) => {
+            const entryEl = getFrame()?.querySelector("[data-credbuild-entry]");
+            entryEl?.removeAttribute("data-credbuild-dragging");
+            const { source, target } = event.operation;
+            if (!source) {
+              zoneStore.setState({ draggedItem: null });
+              return;
+            }
+            const { zone, index } = source.data;
+            const { previewIndex = {} } = zoneStore.getState() || {};
+            const thisPreview = previewIndex[zone]?.props.id === source.id ? previewIndex[zone] : null;
+            const onAnimationEnd = () => {
+              zoneStore.setState({ draggedItem: null });
+              if (event.canceled || target?.type === "void") {
+                zoneStore.setState({ previewIndex: {} });
+                dragListeners.dragend?.forEach((item) => {
+                  const fn = typeof item === "function" ? item : item.fn;
+                  if (typeof fn === "function") {
+                    fn(event, manager);
+                  }
+                });
+                dispatch({
+                  type: "setUi",
+                  ui: {
+                    itemSelector: null,
+                    isDragging: false
+                  }
+                });
+                return;
+              }
+              if (thisPreview) {
+                zoneStore.setState({ previewIndex: {} });
+                if (thisPreview.type === "insert") {
+                  insertComponent(
+                    thisPreview.componentType,
+                    thisPreview.zone,
+                    thisPreview.index,
+                    appStore
+                  );
+                } else if (initialSelector.current) {
+                  moveComponent(
+                    thisPreview.props.id,
+                    initialSelector.current,
+                    thisPreview,
+                    appStore
+                  );
+                }
+              }
+              const movedToNewPosition = initialSelector.current?.zone !== thisPreview?.zone || initialSelector.current?.index !== thisPreview?.index;
+              dispatch({
+                type: "setUi",
+                ui: {
+                  itemSelector: { index, zone },
+                  isDragging: false
+                },
+                recordHistory: movedToNewPosition
+              });
+              dragListeners.dragend?.forEach((item) => {
+                const fn = typeof item === "function" ? item : item.fn;
+                if (typeof fn === "function") {
+                  fn(event, manager);
+                }
+              });
+            };
+            let dispose;
+            dispose = effect(() => {
+              if (source.status === "idle") {
+                onAnimationEnd();
+                dispose?.();
+              }
+            });
+          },
+          onDragOver: (event, manager) => {
+            event.preventDefault();
+            const draggedItem = zoneStore.getState()?.draggedItem;
+            if (!draggedItem) return;
+            cancelDb();
+            const { source, target } = event.operation;
+            if (!target || !source || target.type === "void") return;
+            const [sourceId] = source.id.split(":");
+            const [targetId] = target.id.split(":");
+            const sourceData = source.data;
+            let sourceZone = sourceData.zone;
+            let sourceIndex = sourceData.index;
+            let targetZone = "";
+            let targetIndex = 0;
+            if (target.type === "component") {
+              const targetData = target.data;
+              targetZone = targetData.zone;
+              targetIndex = targetData.index;
+              const collisionData = manager.collisionObserver.collisions[0]?.data;
+              const dir = getDeepDir(target.element);
+              const collisionPosition = collisionData?.direction === "up" || dir === "ltr" && collisionData?.direction === "left" || dir === "rtl" && collisionData?.direction === "right" ? "before" : "after";
+              if (targetIndex >= sourceIndex && sourceZone === targetZone) {
+                targetIndex = targetIndex - 1;
+              }
+              if (collisionPosition === "after") {
+                targetIndex = targetIndex + 1;
+              }
+            } else {
+              targetZone = target.id.toString();
+              targetIndex = 0;
+            }
+            const path = appStore.getState().state.indexes.nodes[target.id]?.path || [];
+            if (targetId === sourceId || path.find((path2) => {
+              const [pathId] = path2.split(":");
+              return pathId === sourceId;
+            })) {
+              return;
+            }
+            if (dragMode.current === "new") {
+              zoneStore.setState({
+                previewIndex: {
+                  [targetZone]: {
+                    componentType: sourceData.componentType,
+                    type: "insert",
+                    index: targetIndex,
+                    zone: targetZone,
+                    element: source.element,
+                    props: {
+                      id: source.id.toString()
+                    }
+                  }
+                }
+              });
+            } else {
+              if (!initialSelector.current) {
+                initialSelector.current = {
+                  zone: sourceData.zone,
+                  index: sourceData.index
+                };
+              }
+              const item = getItem(
+                initialSelector.current,
+                appStore.getState().state
+              );
+              if (item) {
+                zoneStore.setState({
+                  previewIndex: {
+                    [targetZone]: {
+                      componentType: sourceData.componentType,
+                      type: "move",
+                      index: targetIndex,
+                      zone: targetZone,
+                      props: item.props,
+                      element: source.element
+                    }
+                  }
+                });
+              }
+            }
+            dragListeners.dragover?.forEach((item) => {
+              const fn = typeof item === "function" ? item : item.fn;
+              if (typeof fn === "function") {
+                fn(event, manager);
+              }
+            });
+          },
+          onDragStart: (event, manager) => {
+            const { source } = event.operation;
+            if (source && source.type !== "void") {
+              const sourceData = source.data;
+              const item = getItem(
+                {
+                  zone: sourceData.zone,
+                  index: sourceData.index
+                },
+                appStore.getState().state
+              );
+              if (item) {
+                zoneStore.setState({
+                  previewIndex: {
+                    [sourceData.zone]: {
+                      componentType: sourceData.componentType,
+                      type: "move",
+                      index: sourceData.index,
+                      zone: sourceData.zone,
+                      props: item.props,
+                      element: source.element
+                    }
+                  }
+                });
+              }
+            }
+            dragListeners.dragstart?.forEach((item) => {
+              const fn = typeof item === "function" ? item : item.fn;
+              if (typeof fn === "function") {
+                fn(event, manager);
+              }
+            });
+          },
+          onBeforeDragStart: (event) => {
+            const isNewComponent = event.operation.source?.type === "drawer";
+            dragMode.current = isNewComponent ? "new" : "existing";
+            initialSelector.current = void 0;
+            zoneStore.setState({ draggedItem: event.operation.source });
+            if (appStore.getState().selectedItem?.props.id !== event.operation.source?.id) {
+              dispatch({
+                type: "setUi",
+                ui: {
+                  itemSelector: null,
+                  isDragging: true
+                },
+                recordHistory: false
+              });
+            } else {
+              dispatch({
+                type: "setUi",
+                ui: {
+                  isDragging: true
+                },
+                recordHistory: false
+              });
+            }
+            const entryEl = getFrame()?.querySelector("[data-credbuild-entry]");
+            entryEl?.setAttribute("data-credbuild-dragging", "true");
+          },
+          children: /* @__PURE__ */ jsx19(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ jsx19(DropZoneProvider, { value: nextContextValue, children }) })
+        }
+      )
+    }
+  );
+};
+var DragDropContext = ({
+  children,
+  disableAutoScroll
+}) => {
+  const status = useAppStore((s) => s.status);
+  if (status === "LOADING") {
+    return children;
+  }
+  return /* @__PURE__ */ jsx19(DragDropContextClient, { disableAutoScroll, children });
+};
+
+// components/CredBuild/components/Header/index.tsx
+import { memo as memo5, useCallback as useCallback7, useMemo as useMemo12, useState as useState11 } from "react";
+
+// css-module:/home/runner/work/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
+import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+var getClassName12 = get_class_name_factory_default("MenuBar", styles_module_default12);
+function MenuBar({
+  menuOpen = false,
+  renderHeaderActions,
+  setMenuOpen
+}) {
+  const back = useAppStore((s) => s.history.back);
+  const forward = useAppStore((s) => s.history.forward);
+  const hasFuture = useAppStore((s) => s.history.hasFuture());
+  const hasPast = useAppStore((s) => s.history.hasPast());
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      className: getClassName12({ menuOpen }),
+      onClick: (event) => {
+        const element = event.target;
+        if (window.matchMedia("(min-width: 638px)").matches) {
+          return;
+        }
+        if (element.tagName === "A" && element.getAttribute("href")?.startsWith("#")) {
+          setMenuOpen(false);
+        }
+      },
+      children: /* @__PURE__ */ jsxs9("div", { className: getClassName12("inner"), children: [
+        /* @__PURE__ */ jsxs9("div", { className: getClassName12("history"), children: [
+          /* @__PURE__ */ jsx20(
+            IconButton,
+            {
+              type: "button",
+              title: "undo",
+              disabled: !hasPast,
+              onClick: back,
+              children: /* @__PURE__ */ jsx20(Undo2, { size: 21 })
+            }
+          ),
+          /* @__PURE__ */ jsx20(
+            IconButton,
+            {
+              type: "button",
+              title: "redo",
+              disabled: !hasFuture,
+              onClick: forward,
+              children: /* @__PURE__ */ jsx20(Redo2, { size: 21 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx20(Fragment7, { children: renderHeaderActions && renderHeaderActions() })
+      ] })
+    }
+  );
+}
+
+// components/ViewportControls/index.tsx
+import { useEffect as useEffect10, useMemo as useMemo10, useState as useState10 } from "react";
+
+// css-module:/home/runner/work/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
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+var icons = {
+  Smartphone: /* @__PURE__ */ jsx21(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ jsx21(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ jsx21(Monitor, { size: 16 }),
+  FullWidth: /* @__PURE__ */ jsx21(Expand, { size: 16 })
+};
+var getClassName13 = get_class_name_factory_default("ViewportControls", styles_module_default13);
+var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default13);
+var ActionButton = ({
+  children,
+  title,
+  onClick,
+  isActive,
+  disabled
+}) => {
+  return /* @__PURE__ */ jsx21("span", { className: getClassNameButton({ isActive }), suppressHydrationWarning: true, children: /* @__PURE__ */ jsx21(
+    IconButton,
+    {
+      type: "button",
+      title,
+      disabled: disabled || isActive,
+      onClick,
+      suppressHydrationWarning: true,
+      children: /* @__PURE__ */ jsx21("span", { className: getClassNameButton("inner"), children })
+    }
+  ) });
+};
+var defaultZoomOptions = [
+  { label: "25%", value: 0.25 },
+  { label: "50%", value: 0.5 },
+  { label: "75%", value: 0.75 },
+  { label: "100%", value: 1 },
+  { label: "125%", value: 1.25 },
+  { label: "150%", value: 1.5 },
+  { label: "200%", value: 2 }
+];
+var ViewportControls = ({
+  autoZoom,
+  zoom,
+  onViewportChange,
+  onZoom,
+  fullScreen
+}) => {
+  const viewports = useAppStore((s) => s.viewports);
+  const uiViewports = useAppStore((s) => s.state.ui.viewports);
+  const defaultsContainAutoZoom = defaultZoomOptions.find(
+    (option) => option.value === autoZoom
+  );
+  const zoomOptions = useMemo10(() => {
+    const options = [
+      ...defaultZoomOptions,
+      ...defaultsContainAutoZoom || isNaN(autoZoom) ? [] : [
+        {
+          value: autoZoom,
+          label: `${(autoZoom * 100).toFixed(0)}% (Auto)`
+        }
+      ]
+    ].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(
+    uiViewports.current.width
+  );
+  useEffect10(() => {
+    setActiveViewport(uiViewports.current.width);
+  }, [uiViewports.current.width, uiViewports]);
+  const [isExpanded, setIsExpanded] = useState10(false);
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: getClassName13({ isExpanded, fullScreen }),
+      suppressHydrationWarning: true,
+      children: [
+        /* @__PURE__ */ jsx21("div", { className: getClassName13("actions"), children: /* @__PURE__ */ jsxs10("div", { className: getClassName13("actionsInner"), children: [
+          viewports.map((viewport, i) => /* @__PURE__ */ jsx21(
+            ActionButton,
+            {
+              title: viewport.label ? `Switch to ${viewport.label} viewport` : "Switch viewport",
+              onClick: () => {
+                setActiveViewport(viewport.width);
+                onViewportChange(viewport);
+              },
+              isActive: activeViewport === viewport.width,
+              children: typeof viewport.icon === "string" ? icons[viewport.icon] || viewport.icon : viewport.icon || icons.Smartphone
+            },
+            i
+          )),
+          /* @__PURE__ */ jsx21("div", { className: getClassName13("divider") }),
+          /* @__PURE__ */ jsx21(
+            ActionButton,
+            {
+              title: "Zoom viewport out",
+              disabled: zoom <= (zoomOptions[0]?.value || 0),
+              onClick: (e) => {
+                e.stopPropagation();
+                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__ */ jsx21(ZoomOut, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsx21(
+            ActionButton,
+            {
+              title: "Zoom viewport in",
+              disabled: zoom >= (zoomOptions[zoomOptions.length - 1]?.value || 2),
+              onClick: (e) => {
+                e.stopPropagation();
+                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__ */ jsx21(ZoomIn, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsxs10("div", { className: getClassName13("zoom"), children: [
+            /* @__PURE__ */ jsx21("div", { className: getClassName13("divider") }),
+            /* @__PURE__ */ jsx21(
+              "select",
+              {
+                className: getClassName13("zoomSelect"),
+                value: zoom.toString(),
+                onClick: (e) => {
+                  e.stopPropagation();
+                },
+                onChange: (e) => {
+                  onZoom(parseFloat(e.currentTarget.value));
+                },
+                children: zoomOptions.map((option) => /* @__PURE__ */ jsx21(
+                  "option",
+                  {
+                    value: option.value,
+                    label: option.label
+                  },
+                  option.label
+                ))
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx21(
+          "button",
+          {
+            className: getClassName13("toggleButton"),
+            title: "Toggle viewport menu",
+            "aria-expanded": isExpanded,
+            onClick: () => setIsExpanded((s) => !s),
+            children: isExpanded ? /* @__PURE__ */ jsx21(X, { size: 16 }) : /* @__PURE__ */ jsx21(Monitor, { size: 16 })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// components/CredBuild/components/Header/index.tsx
+import { useShallow as useShallow3 } from "zustand/react/shallow";
+
+// lib/frame-context.tsx
+import {
+  createContext as createContext5,
+  useContext as useContext7,
+  useRef as useRef6,
+  useMemo as useMemo11
+} from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var FrameContext = createContext5(null);
+var FrameProvider = ({
+  children
+}) => {
+  const frameRef = useRef6(null);
+  const value = useMemo11(
+    () => ({
+      frameRef
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx22(FrameContext.Provider, { value, children });
+};
+var useCanvasFrame = () => {
+  const context = useContext7(FrameContext);
+  if (context === null) {
+    throw new Error("useCanvasFrame must be used within a FrameProvider");
+  }
+  return context;
+};
+
+// css-module:/home/runner/work/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
+import { Fragment as Fragment8, jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+var getClassName14 = get_class_name_factory_default("CredBuildHeader", styles_module_default14);
+var HeaderInner = ({
+  hidePlugins,
+  theme
+}) => {
+  const {
+    onPublish,
+    renderHeader,
+    renderHeaderActions,
+    headerTitle,
+    headerPath,
+    iframe: _iframe
+  } = usePropsContext();
+  const dispatch = useAppStore((s) => s.dispatch);
+  const appStore = useAppStoreApi();
+  const defaultHeaderRender = useMemo12(() => {
+    if (renderHeader) {
+      console.warn(
+        "`renderHeader` is deprecated. Please use `overrides.header` and the `useCredBuild` hook instead"
+      );
+      const RenderHeader = ({ actions, ...props }) => {
+        const Comp = renderHeader;
+        const appState = useAppStore((s) => s.state);
+        return /* @__PURE__ */ jsx23(Comp, { ...props, dispatch, state: appState, children: actions });
+      };
+      return RenderHeader;
+    }
+    return DefaultOverride;
+  }, [renderHeader, dispatch]);
+  const defaultHeaderActionsRender = useMemo12(() => {
+    if (renderHeaderActions) {
+      console.warn(
+        "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `useCredBuild` hook instead."
+      );
+      const RenderHeader = (props) => {
+        const Comp = renderHeaderActions;
+        const appState = useAppStore((s) => s.state);
+        return /* @__PURE__ */ jsx23(Comp, { ...props, dispatch, state: appState });
+      };
+      return RenderHeader;
+    }
+    return DefaultOverride;
+  }, [renderHeaderActions, dispatch]);
+  const CustomHeader = useAppStore(
+    (s) => s.overrides.header || defaultHeaderRender
+  );
+  const CustomHeaderActions = useAppStore(
+    (s) => s.overrides.headerActions || defaultHeaderActionsRender
+  );
+  const [menuOpen, setMenuOpen] = useState11(false);
+  const rootTitle = useAppStore((s) => {
+    const rootData = s.state.indexes.nodes["root"]?.data;
+    return rootData.props.title ?? "";
+  });
+  const root = useAppStore((s) => s.state.data.root);
+  const rootProps = root?.props || root;
+  const isHtmlMode = rootProps?.mode === "html";
+  const htmlViewMode = rootProps?.htmlViewMode || (rootProps?.htmlCode ? "preview" : "code");
+  const handleSetViewMode = useCallback7((modeVal) => {
+    dispatch({
+      type: "setData",
+      data: (currentData) => ({
+        ...currentData,
+        root: {
+          ...currentData.root,
+          props: {
+            ...currentData.root?.props,
+            htmlViewMode: modeVal
+          }
+        }
+      })
+    });
+  }, [dispatch]);
+  const handleResetToBlocks = useCallback7(() => {
+    dispatch({
+      type: "setData",
+      data: (currentData) => ({
+        ...currentData,
+        content: [],
+        root: {
+          ...currentData.root,
+          props: {
+            ...currentData.root?.props,
+            mode: "blocks",
+            htmlCode: "",
+            htmlViewMode: "code"
+          }
+        }
+      })
+    });
+  }, [dispatch]);
+  const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
+  const rightSideBarVisible = useAppStore(
+    (s) => s.state.ui.rightSideBarVisible
+  );
+  const {
+    setUi,
+    zoomConfig,
+    setZoomConfig,
+    _experimentalFullScreenCanvas
+  } = useAppStore(
+    useShallow3((s) => ({
+      setUi: s.setUi,
+      zoomConfig: s.zoomConfig,
+      setZoomConfig: s.setZoomConfig,
+      _experimentalFullScreenCanvas: s._experimentalFullScreenCanvas
+    }))
+  );
+  const { viewports } = useAppStore(
+    useShallow3((s) => ({
+      viewports: s.state.ui.viewports
+    }))
+  );
+  const { frameRef } = useCanvasFrame();
+  const resetAutoZoom = useResetAutoZoom(frameRef);
+  const toggleSidebars = useCallback7(
+    (sidebar) => {
+      const widerViewport = window.matchMedia("(min-width: 638px)").matches;
+      const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
+      const oppositeSideBar = sidebar === "left" ? "rightSideBarVisible" : "leftSideBarVisible";
+      dispatch({
+        type: "setUi",
+        ui: {
+          [`${sidebar}SideBarVisible`]: !sideBarVisible,
+          ...!widerViewport ? { [oppositeSideBar]: false } : {}
+        }
+      });
+    },
+    [dispatch, leftSideBarVisible, rightSideBarVisible]
+  );
+  return /* @__PURE__ */ jsx23(
+    CustomHeader,
+    {
+      actions: /* @__PURE__ */ jsx23(Fragment8, { children: /* @__PURE__ */ jsxs11(CustomHeaderActions, { children: [
+        /* @__PURE__ */ jsx23(
+          Button,
+          {
+            href: headerPath || "/",
+            newTab: true,
+            variant: "secondary",
+            icon: /* @__PURE__ */ jsx23(ExternalLink, { size: 14 }),
+            children: "View Web"
+          }
+        ),
+        /* @__PURE__ */ jsx23("span", { className: "PublishButton", children: /* @__PURE__ */ jsx23(
+          Button,
+          {
+            onClick: () => {
+              const data = appStore.getState().state.data;
+              onPublish && onPublish(data);
+            },
+            icon: /* @__PURE__ */ jsx23(Zap, { size: 14, fill: "currentColor" }),
+            children: "Publish"
+          }
+        ) })
+      ] }) }),
+      children: /* @__PURE__ */ jsx23(
+        "header",
+        {
+          className: getClassName14({
+            leftSideBarVisible,
+            rightSideBarVisible,
+            hidePlugins
+          }),
+          children: /* @__PURE__ */ jsxs11("div", { className: getClassName14("inner"), children: [
+            /* @__PURE__ */ jsxs11("div", { className: getClassName14("leftActions"), children: [
+              /* @__PURE__ */ jsxs11("div", { style: { marginRight: "8px", display: "flex", gap: "8px", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsx23(
+                  Button,
+                  {
+                    href: "/dashboard",
+                    variant: "secondary",
+                    size: "medium",
+                    icon: /* @__PURE__ */ jsx23(LayoutDashboard, { size: 14 }),
+                    children: "Dashboard"
+                  }
+                ),
+                /* @__PURE__ */ jsx23(
+                  IconButton,
+                  {
+                    type: "button",
+                    onClick: () => {
+                      const editorEl = document.querySelector(".CredBuild");
+                      if (!editorEl) return;
+                      const isDark = editorEl.classList.contains("dark");
+                      const newTheme = isDark ? "light" : "dark";
+                      if (isDark) {
+                        editorEl.classList.remove("dark");
+                      } else {
+                        editorEl.classList.add("dark");
+                      }
+                      localStorage.setItem("credbuild-theme", newTheme);
+                      window.dispatchEvent(new CustomEvent("credbuild-theme-change", { detail: newTheme }));
+                    },
+                    title: "Toggle Theme",
+                    children: theme === "dark" ? /* @__PURE__ */ jsx23(Sun, { size: 16 }) : /* @__PURE__ */ jsx23(Moon, { size: 16 })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs11("div", { className: getClassName14("toggle"), children: [
+                /* @__PURE__ */ jsx23("div", { className: getClassName14("leftSideBarToggle"), children: /* @__PURE__ */ jsx23(
+                  IconButton,
+                  {
+                    type: "button",
+                    onClick: () => {
+                      toggleSidebars("left");
+                    },
+                    title: "Toggle left sidebar",
+                    children: /* @__PURE__ */ jsx23(PanelLeft, { size: 16, focusable: "false" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx23("div", { className: getClassName14("rightSideBarToggle"), children: /* @__PURE__ */ jsx23(
+                  IconButton,
+                  {
+                    type: "button",
+                    onClick: () => {
+                      toggleSidebars("right");
+                    },
+                    title: "Toggle right sidebar",
+                    children: /* @__PURE__ */ jsx23(PanelRight, { size: 16, focusable: "false" })
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx23("div", { className: getClassName14("title"), children: /* @__PURE__ */ jsxs11(Heading, { rank: "2", size: "xs", children: [
+                /* @__PURE__ */ jsx23("span", { style: { fontSize: "11px", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }, children: headerTitle || rootTitle || "Page" }),
+                headerPath && /* @__PURE__ */ jsx23(Fragment8, { children: /* @__PURE__ */ jsx23("code", { className: getClassName14("path"), style: { fontSize: "10px", opacity: 0.6, marginLeft: "8px" }, children: headerPath }) })
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxs11("div", { className: getClassName14("viewportTools"), style: { display: "flex", gap: "16px", alignItems: "center" }, children: [
+              isHtmlMode && /* @__PURE__ */ jsxs11("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px"
+              }, children: [
+                /* @__PURE__ */ jsxs11("div", { style: {
+                  display: "flex",
+                  background: "var(--credbuild-color-grey-09)",
+                  padding: 2,
+                  borderRadius: 6,
+                  border: "1px solid var(--credbuild-color-grey-10)"
+                }, children: [
+                  /* @__PURE__ */ jsxs11(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleSetViewMode("code"),
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 4,
+                        padding: "4px 10px",
+                        borderRadius: 4,
+                        fontSize: 11,
+                        fontWeight: 600,
+                        cursor: "pointer",
+                        border: "none",
+                        background: htmlViewMode === "code" ? "var(--credbuild-color-white)" : "transparent",
+                        color: "var(--credbuild-color-black)",
+                        opacity: htmlViewMode === "code" ? 1 : 0.6,
+                        boxShadow: htmlViewMode === "code" ? "0 1px 2px rgba(0,0,0,0.1)" : "none",
+                        transition: "all 0.15s ease"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx23(Code, { size: 12 }),
+                        "Edit Kode"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs11(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleSetViewMode("preview"),
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 4,
+                        padding: "4px 10px",
+                        borderRadius: 4,
+                        fontSize: 11,
+                        fontWeight: 600,
+                        cursor: "pointer",
+                        border: "none",
+                        background: htmlViewMode === "preview" ? "var(--credbuild-color-white)" : "transparent",
+                        color: "var(--credbuild-color-black)",
+                        opacity: htmlViewMode === "preview" ? 1 : 0.6,
+                        boxShadow: htmlViewMode === "preview" ? "0 1px 2px rgba(0,0,0,0.1)" : "none",
+                        transition: "all 0.15s ease"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx23(Eye, { size: 12 }),
+                        "Lihat Hasil"
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx23(
+                  Button,
+                  {
+                    type: "button",
+                    onClick: handleResetToBlocks,
+                    variant: "secondary",
+                    size: "medium",
+                    icon: /* @__PURE__ */ jsx23(LayoutGrid, { size: 14 }),
+                    children: "Kembali ke Mode Blok"
+                  }
+                )
+              ] }),
+              (!isHtmlMode || htmlViewMode === "preview") && /* @__PURE__ */ jsx23(
+                ViewportControls,
+                {
+                  fullScreen: _experimentalFullScreenCanvas,
+                  autoZoom: zoomConfig.autoZoom,
+                  zoom: zoomConfig.zoom,
+                  onViewportChange: (viewport) => {
+                    const isFullWidth = viewport.width === "100%";
+                    const uiViewport = {
+                      ...viewport,
+                      height: viewport.height || "auto",
+                      zoom: isFullWidth ? 1 : zoomConfig.zoom
+                    };
+                    const newUi = {
+                      viewports: { ...viewports, current: uiViewport }
+                    };
+                    if (isFullWidth) {
+                      setZoomConfig({ ...zoomConfig, zoom: 1 });
+                    }
+                    setUi(newUi);
+                  },
+                  onZoom: (zoom) => {
+                    setZoomConfig({ ...zoomConfig, zoom });
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs11("div", { className: getClassName14("tools"), children: [
+              /* @__PURE__ */ jsx23("div", { className: getClassName14("menuButton"), children: /* @__PURE__ */ jsx23(
+                IconButton,
+                {
+                  type: "button",
+                  onClick: () => {
+                    return setMenuOpen(!menuOpen);
+                  },
+                  title: "Toggle menu bar",
+                  children: menuOpen ? /* @__PURE__ */ jsx23(ChevronUp, { size: 16, focusable: "false" }) : /* @__PURE__ */ jsx23(ChevronDown, { size: 16, focusable: "false" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx23(
+                MenuBar,
+                {
+                  dispatch,
+                  onPublish,
+                  menuOpen,
+                  renderHeaderActions: () => /* @__PURE__ */ jsxs11(CustomHeaderActions, { children: [
+                    /* @__PURE__ */ jsx23(
+                      Button,
+                      {
+                        href: headerPath || "/",
+                        newTab: true,
+                        variant: "secondary",
+                        icon: /* @__PURE__ */ jsx23(ExternalLink, { size: 14 }),
+                        children: "View Web"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx23("span", { className: "PublishButton", children: /* @__PURE__ */ jsx23(
+                      Button,
+                      {
+                        onClick: () => {
+                          const data = appStore.getState().state.data;
+                          onPublish && onPublish(data);
+                        },
+                        icon: /* @__PURE__ */ jsx23(Zap, { size: 14, fill: "currentColor" }),
+                        children: "Publish"
+                      }
+                    ) })
+                  ] }),
+                  setMenuOpen
+                }
+              )
+            ] })
+          ] })
+        }
+      )
+    }
+  );
+};
+var Header = memo5(HeaderInner);
+
+// css-module:/home/runner/work/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
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+var getClassName15 = get_class_name_factory_default("SidebarSection", styles_module_default15);
+var SidebarSection = ({
+  children,
+  title,
+  background,
+  showBreadcrumbs,
+  noBorderTop,
+  isLoading
+}) => {
+  return /* @__PURE__ */ jsxs12("div", { className: getClassName15({ noBorderTop }), style: { background }, children: [
+    /* @__PURE__ */ jsx24("div", { className: getClassName15("title"), children: /* @__PURE__ */ jsxs12("div", { className: getClassName15("breadcrumbs"), children: [
+      showBreadcrumbs && /* @__PURE__ */ jsx24(Breadcrumbs, {}),
+      /* @__PURE__ */ jsx24("div", { className: getClassName15("heading"), children: /* @__PURE__ */ jsx24(Heading, { rank: "2", size: "xs", children: title }) })
+    ] }) }),
+    /* @__PURE__ */ jsx24("div", { className: getClassName15("content"), children }),
+    isLoading && /* @__PURE__ */ jsx24("div", { className: getClassName15("loadingOverlay"), children: /* @__PURE__ */ jsx24(Loader, { size: 32 }) })
+  ] });
+};
+
+// components/CredBuild/components/Canvas/index.tsx
+import {
+  useCallback as useCallback8,
+  useEffect as useEffect11,
+  useMemo as useMemo13,
+  useRef as useRef7,
+  useState as useState12
+} from "react";
+
+// css-module:/home/runner/work/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
+import { useShallow as useShallow4 } from "zustand/react/shallow";
+import { Fragment as Fragment9, jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+var getClassName16 = get_class_name_factory_default("CredBuildCanvas", styles_module_default16);
+var ZOOM_ON_CHANGE = true;
+var TRANSITION_DURATION = 150;
+var Canvas = () => {
+  const { frameRef } = useCanvasFrame();
+  const resetAutoZoom = useResetAutoZoom(frameRef);
+  const { viewports: viewportOptions = defaultViewports, ui: uiProp } = usePropsContext();
+  const {
+    dispatch,
+    overrides,
+    setUi,
+    zoomConfig,
+    setZoomConfig,
+    status,
+    iframe,
+    _experimentalFullScreenCanvas
+  } = useAppStore(
+    useShallow4((s) => ({
+      dispatch: s.dispatch,
+      overrides: s.overrides,
+      setUi: s.setUi,
+      zoomConfig: s.zoomConfig,
+      setZoomConfig: s.setZoomConfig,
+      status: s.status,
+      iframe: s.iframe,
+      _experimentalFullScreenCanvas: s._experimentalFullScreenCanvas
+    }))
+  );
+  const {
+    leftSideBarVisible,
+    rightSideBarVisible,
+    leftSideBarWidth,
+    rightSideBarWidth,
+    viewports,
+    root
+  } = useAppStore(
+    useShallow4((s) => ({
+      leftSideBarVisible: s.state.ui.leftSideBarVisible,
+      rightSideBarVisible: s.state.ui.rightSideBarVisible,
+      leftSideBarWidth: s.state.ui.leftSideBarWidth,
+      rightSideBarWidth: s.state.ui.rightSideBarWidth,
+      viewports: s.state.ui.viewports,
+      root: s.state.data.root
+    }))
+  );
+  const isNonFullWidth = viewports.current.width !== "100%";
+  const shouldApplyViewport = true;
+  const [showTransition, setShowTransition] = useState12(false);
+  const isResizingRef = useRef7(false);
+  const defaultRender = useMemo13(() => {
+    const CredBuildDefault = ({ children }) => /* @__PURE__ */ jsx25(Fragment9, { children });
+    return CredBuildDefault;
+  }, []);
+  const CustomPreview = useMemo13(
+    () => overrides.preview || defaultRender,
+    [overrides, defaultRender]
+  );
+  const getFrameDimensions = useCallback8(() => {
+    if (frameRef.current) {
+      const frame = frameRef.current;
+      const box = getBox(frame);
+      return { width: box.contentBox.width, height: box.contentBox.height };
+    }
+    return { width: 0, height: 0 };
+  }, [frameRef]);
+  useEffect11(() => {
+    resetAutoZoom();
+  }, [
+    frameRef,
+    leftSideBarVisible,
+    rightSideBarVisible,
+    rightSideBarWidth,
+    viewports,
+    resetAutoZoom
+  ]);
+  useEffect11(() => {
+    const updateRootHeight = () => {
+      const iframeEl = frameRef.current?.querySelector("iframe");
+      if (iframeEl) {
+        try {
+          const doc = iframeEl.contentDocument;
+          if (doc && doc.body) {
+            const contentHeight = doc.body.scrollHeight || doc.documentElement.scrollHeight;
+            if (contentHeight > 0) {
+              const newRootHeight2 = contentHeight;
+              if (zoomConfig.rootHeight !== newRootHeight2) {
+                setZoomConfig({
+                  ...zoomConfig,
+                  rootHeight: newRootHeight2
+                });
+              }
+              return;
+            }
+          }
+        } catch (e) {
+        }
+      }
+      const { height: frameHeight } = getFrameDimensions();
+      const newRootHeight = frameHeight / zoomConfig.zoom;
+      if (zoomConfig.rootHeight !== newRootHeight) {
+        setZoomConfig({
+          ...zoomConfig,
+          rootHeight: newRootHeight
+        });
+      }
+    };
+    if (viewports.current.height === "auto") {
+      updateRootHeight();
+      const iframeEl = frameRef.current?.querySelector("iframe");
+      if (iframeEl) {
+        try {
+          const doc = iframeEl.contentDocument;
+          if (doc && doc.body) {
+            const observer = new ResizeObserver(updateRootHeight);
+            observer.observe(doc.body);
+            return () => observer.disconnect();
+          }
+        } catch (e) {
+        }
+      }
+    }
+  }, [
+    zoomConfig.zoom,
+    getFrameDimensions,
+    setZoomConfig,
+    viewports,
+    zoomConfig.rootHeight,
+    frameRef
+  ]);
+  useEffect11(() => {
+    if (ZOOM_ON_CHANGE) {
+      resetAutoZoom();
+    }
+  }, [viewports.current.width, viewports, resetAutoZoom]);
+  useEffect11(() => {
+    if (!frameRef.current) return;
+    const resizeObserver = new ResizeObserver(() => {
+      if (!isResizingRef.current) {
+        resetAutoZoom();
+      }
+    });
+    resizeObserver.observe(frameRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [frameRef, resetAutoZoom]);
+  const [showLoader, setShowLoader] = useState12(false);
+  useEffect11(() => {
+    setTimeout(() => {
+      setShowLoader(true);
+    }, 500);
+  }, []);
+  const appStoreApi = useAppStoreApi();
+  useEffect11(() => {
+    if (typeof window === "undefined") return;
+    if (uiProp?.viewports?.current) return;
+    const viewportWidth = window.innerWidth;
+    const frameWidth = frameRef.current?.getBoundingClientRect().width;
+    if (!viewportWidth) return;
+    if (!frameWidth) return;
+    if (viewportOptions.length === 0) return;
+    const fullWidthViewport = Object.values(viewportOptions).find(
+      (v) => v.width === "100%"
+    );
+    const containsFullWidthViewport = !!fullWidthViewport;
+    const viewportDifferences = Object.entries(viewportOptions).filter(([_, value]) => value.width !== "100%").map(([key, value]) => ({
+      key,
+      diff: Math.abs(
+        viewportWidth - (typeof value.width === "string" ? viewportWidth : value.width)
+      ),
+      value
+    })).sort((a, b) => a.diff > b.diff ? 1 : -1);
+    let closestViewport = viewportDifferences[0].value;
+    if (closestViewport.width < frameWidth && containsFullWidthViewport) {
+      closestViewport = fullWidthViewport;
+    }
+    {
+      const s = appStoreApi.getState();
+      const appState = {
+        state: {
+          ...s.state,
+          ui: {
+            ...s.state.ui,
+            viewports: {
+              ...s.state.ui.viewports,
+              current: {
+                ...s.state.ui.viewports.current,
+                height: closestViewport?.height || "auto",
+                width: closestViewport?.width
+              }
+            }
+          }
+        }
+      };
+      let history = s.history;
+      if (s.history.histories.length === 1) {
+        history = { ...history, histories: [appState] };
+      }
+      appStoreApi.setState({ ...appState, history });
+    }
+  }, [
+    viewportOptions,
+    iframe,
+    appStoreApi,
+    uiProp?.viewports,
+    frameRef
+  ]);
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      className: getClassName16({
+        ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
+        showLoader,
+        fullScreen: _experimentalFullScreenCanvas
+      }),
+      onClick: (e) => {
+        const el = e.target;
+        if (!el.hasAttribute("data-credbuild-component") && !el.hasAttribute("data-credbuild-dropzone")) {
+          dispatch({
+            type: "setUi",
+            ui: { itemSelector: null },
+            recordHistory: false
+          });
+        }
+      },
+      children: /* @__PURE__ */ jsxs13("div", { className: getClassName16("inner"), ref: frameRef, children: [
+        /* @__PURE__ */ jsx25(
+          "div",
+          {
+            className: getClassName16("root"),
+            style: {
+              width: viewports.current.width || "100%",
+              height: !zoomConfig.rootHeight || isNaN(zoomConfig.rootHeight) ? "100%" : zoomConfig.rootHeight,
+              minHeight: "100%",
+              transform: `scale(${zoomConfig.zoom})`,
+              transition: showTransition ? `width ${TRANSITION_DURATION}ms ease-out, height ${TRANSITION_DURATION}ms ease-out, transform ${TRANSITION_DURATION}ms ease-out` : "",
+              overflow: isNonFullWidth ? void 0 : "auto"
+            },
+            suppressHydrationWarning: true,
+            id: "credbuild-canvas-root",
+            onTransitionEnd: () => {
+              setShowTransition(false);
+              isResizingRef.current = false;
+            },
+            children: /* @__PURE__ */ jsx25(CustomPreview, { children: /* @__PURE__ */ jsx25(Preview, {}) })
+          }
+        ),
+        /* @__PURE__ */ jsx25("div", { className: getClassName16("loader"), children: /* @__PURE__ */ jsx25(Loader, { size: 24 }) })
+      ] })
+    }
+  );
+};
+
+// lib/use-sidebar-resize.ts
+import { useCallback as useCallback9, useEffect as useEffect12, useRef as useRef8, useState as useState13 } from "react";
+function useSidebarResize(position, dispatch) {
+  const [width, setWidth] = useState13(null);
+  const sidebarRef = useRef8(null);
+  const storeWidth = useAppStore(
+    (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
+  );
+  useEffect12(() => {
+    if (typeof window !== "undefined" && !storeWidth) {
+      try {
+        const savedWidths = localStorage.getItem("credbuild-sidebar-widths");
+        if (savedWidths) {
+          const widths = JSON.parse(savedWidths);
+          const savedWidth = widths[position];
+          const key = position === "left" ? "leftSideBarWidth" : "rightSideBarWidth";
+          if (savedWidth) {
+            dispatch({
+              type: "setUi",
+              ui: {
+                [key]: savedWidth
+              }
+            });
+          }
+        }
+      } catch (error) {
+        console.error(
+          `Failed to load ${position} sidebar width from localStorage`,
+          error
+        );
+      }
+    }
+  }, [dispatch, position, storeWidth]);
+  useEffect12(() => {
+    if (storeWidth !== void 0) {
+      setWidth(storeWidth);
+    }
+  }, [storeWidth]);
+  const handleResizeEnd = useCallback9(
+    (width2) => {
+      dispatch({
+        type: "setUi",
+        ui: {
+          [position === "left" ? "leftSideBarWidth" : "rightSideBarWidth"]: width2
+        }
+      });
+      let widths = {};
+      try {
+        const savedWidths = localStorage.getItem("credbuild-sidebar-widths");
+        widths = savedWidths ? JSON.parse(savedWidths) : {};
+      } catch (error) {
+        console.error(
+          `Failed to save ${position} sidebar width to localStorage`,
+          error
+        );
+      } finally {
+        localStorage.setItem(
+          "credbuild-sidebar-widths",
+          JSON.stringify({
+            ...widths,
+            [position]: width2
+          })
+        );
+      }
+      window.dispatchEvent(
+        new CustomEvent("viewportchange", {
+          bubbles: true,
+          cancelable: false
+        })
+      );
+    },
+    [dispatch, position]
+  );
+  return {
+    width,
+    setWidth,
+    sidebarRef,
+    handleResizeEnd
+  };
+}
+
+// components/CredBuild/components/ResizeHandle/index.tsx
+import { useCallback as useCallback10, useRef as useRef9 } from "react";
+
+// css-module:/home/runner/work/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
+import { jsx as jsx26 } from "react/jsx-runtime";
+var getClassName17 = get_class_name_factory_default("ResizeHandle", styles_module_default17);
+var ResizeHandle = ({
+  position,
+  sidebarRef,
+  onResize,
+  onResizeEnd
+}) => {
+  const { frameRef } = useCanvasFrame();
+  const resetAutoZoom = useResetAutoZoom(frameRef);
+  const handleRef = useRef9(null);
+  const isDragging = useRef9(false);
+  const startX = useRef9(0);
+  const startWidth = useRef9(0);
+  const handleMouseMove = useCallback10(
+    (e) => {
+      if (!isDragging.current) return;
+      const delta = e.clientX - startX.current;
+      const newWidth = position === "left" ? startWidth.current + delta : startWidth.current - delta;
+      const width = Math.max(192, newWidth);
+      onResize(width);
+      e.preventDefault();
+    },
+    [onResize, position]
+  );
+  const handleMouseUp = useCallback10(() => {
+    if (!isDragging.current) return;
+    isDragging.current = false;
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+    const overlay = document.getElementById("resize-overlay");
+    if (overlay) {
+      document.body.removeChild(overlay);
+    }
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("mouseup", handleMouseUp);
+    const finalWidth = sidebarRef.current?.getBoundingClientRect().width || 0;
+    onResizeEnd(finalWidth);
+    resetAutoZoom();
+  }, [onResizeEnd, handleMouseMove, resetAutoZoom, sidebarRef]);
+  const handleMouseDown = useCallback10(
+    (e) => {
+      isDragging.current = true;
+      startX.current = e.clientX;
+      startWidth.current = sidebarRef.current?.getBoundingClientRect().width || 0;
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+      const overlay = document.createElement("div");
+      overlay.id = "resize-overlay";
+      overlay.setAttribute("data-resize-overlay", "");
+      document.body.appendChild(overlay);
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      e.preventDefault();
+    },
+    [handleMouseMove, handleMouseUp, sidebarRef]
+  );
+  return /* @__PURE__ */ jsx26(
+    "div",
+    {
+      ref: handleRef,
+      className: getClassName17({ [position]: true }),
+      onMouseDown: handleMouseDown
+    }
+  );
+};
+
+// css-module:/home/runner/work/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
+import { Fragment as Fragment10, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+var getClassName18 = get_class_name_factory_default("Sidebar", styles_module_default18);
+var Sidebar = ({
+  position,
+  sidebarRef,
+  isVisible,
+  onResize,
+  onResizeEnd,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs14(Fragment10, { children: [
+    /* @__PURE__ */ jsx27(
+      "div",
+      {
+        ref: sidebarRef,
+        className: getClassName18({ [position]: true, isVisible }),
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx27("div", { className: `${getClassName18("resizeHandle")}`, children: /* @__PURE__ */ jsx27(
+      ResizeHandle,
+      {
+        position,
+        sidebarRef,
+        onResize,
+        onResizeEnd
+      }
+    ) })
+  ] });
+};
+
+// lib/use-delete-hotkeys.ts
+import { useCallback as useCallback11 } from "react";
+var isElementVisible = (element) => {
+  let current = element;
+  while (current && current !== document.body) {
+    const style = window.getComputedStyle(current);
+    if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0" || current.getAttribute("aria-hidden") === "true" || current.hasAttribute("hidden")) {
+      return false;
+    }
+    current = current.parentElement;
+  }
+  return true;
+};
+var shouldBlockDeleteHotkey = (e) => {
+  if (e?.defaultPrevented) return true;
+  const origin = e?.composedPath?.()[0] || e?.target || document.activeElement;
+  if (origin instanceof HTMLElement) {
+    const tag = origin.tagName.toLowerCase();
+    if (tag === "input" || tag === "textarea" || tag === "select") return true;
+    if (origin.isContentEditable) return true;
+    const role = origin.getAttribute("role");
+    if (role === "textbox" || role === "combobox" || role === "searchbox" || role === "listbox" || role === "grid") {
+      return true;
+    }
+  }
+  const modal = document.querySelector(
+    'dialog[open], [aria-modal="true"], [role="dialog"], [role="alertdialog"]'
+  );
+  if (modal && isElementVisible(modal)) {
+    return true;
+  }
+  return false;
+};
+var useDeleteHotkeys = () => {
+  const appStore = useAppStoreApi();
+  const deleteSelectedComponent = useCallback11(
+    (e) => {
+      if (shouldBlockDeleteHotkey(e)) {
+        return false;
+      }
+      const { state, dispatch, permissions, selectedItem } = appStore.getState();
+      const sel = state.ui?.itemSelector;
+      if (!sel?.zone || !selectedItem) return true;
+      if (!permissions.getPermissions({ item: selectedItem }).delete)
+        return true;
+      dispatch({
+        type: "remove",
+        index: sel.index,
+        zone: sel.zone
+      });
+      return true;
+    },
+    [appStore]
+  );
+  useHotkey({ delete: true }, deleteSelectedComponent);
+  useHotkey({ backspace: true }, deleteSelectedComponent);
+};
+
+// css-module:/home/runner/work/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
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+var getClassName19 = get_class_name_factory_default("Nav", styles_module_default19);
+var getClassNameItem = get_class_name_factory_default("NavItem", styles_module_default19);
+var MenuItem = ({
+  label,
+  icon,
+  onClick,
+  isActive,
+  mobileOnly,
+  desktopOnly
+}) => {
+  return /* @__PURE__ */ jsx28(
+    "li",
+    {
+      className: getClassNameItem({
+        active: isActive,
+        mobileOnly,
+        desktopOnly
+      }),
+      children: onClick && /* @__PURE__ */ jsx28("div", { className: getClassNameItem("link"), onClick, title: label, children: icon && /* @__PURE__ */ jsx28("span", { className: getClassNameItem("linkIcon"), children: icon }) })
+    }
+  );
+};
+var Nav = ({
+  items,
+  mobileActions
+}) => {
+  return /* @__PURE__ */ jsxs15("nav", { className: getClassName19(), children: [
+    /* @__PURE__ */ jsx28("ul", { className: getClassName19("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx28(MenuItem, { ...item }, key)) }),
+    mobileActions && /* @__PURE__ */ jsx28("div", { className: getClassName19("mobileActions"), children: mobileActions })
+  ] });
+};
+
+// components/CredBuild/components/Layout/index.tsx
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+var getClassName20 = get_class_name_factory_default("CredBuild", styles_module_default11);
+var getLayoutClassName = get_class_name_factory_default("CredBuildLayout", styles_module_default11);
+var getPluginTabClassName = get_class_name_factory_default("CredBuildPluginTab", styles_module_default11);
+var FieldSideBar = () => {
+  const title = useAppStore(
+    (s) => s.selectedItem ? s.config.components[s.selectedItem.type]?.["label"] ?? s.selectedItem.type.toString() : s.config.root?.label || "Page"
+  );
+  return /* @__PURE__ */ jsx29(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx29(Fields, {}) });
+};
+var PluginTab = ({
+  children,
+  visible,
+  mobileOnly
+}) => {
+  return /* @__PURE__ */ jsx29("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx29("div", { className: getPluginTabClassName("body"), children }) });
+};
+var Layout = ({ children }) => {
+  const {
+    iframe: _iframe,
+    dnd,
+    initialHistory: _initialHistory,
+    plugins,
+    height
+  } = usePropsContext();
+  const iframe = useMemo14(
+    () => ({
+      enabled: true,
+      waitForStyles: true,
+      ..._iframe
+    }),
+    [_iframe]
+  );
+  useInjectGlobalCss(iframe.enabled);
+  const dispatch = useAppStore((s) => s.dispatch);
+  const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
+  const rightSideBarVisible = useAppStore(
+    (s) => s.state.ui.rightSideBarVisible
+  );
+  const instanceId = useAppStore((s) => s.instanceId);
+  const {
+    width: leftWidth,
+    setWidth: setLeftWidth,
+    sidebarRef: leftSidebarRef,
+    handleResizeEnd: handleLeftSidebarResizeEnd
+  } = useSidebarResize("left", dispatch);
+  const {
+    width: rightWidth,
+    setWidth: setRightWidth,
+    sidebarRef: rightSidebarRef,
+    handleResizeEnd: handleRightSidebarResizeEnd
+  } = useSidebarResize("right", dispatch);
+  useEffect14(() => {
+    if (!window.matchMedia("(min-width: 638px)").matches) {
+      dispatch({
+        type: "setUi",
+        ui: {
+          leftSideBarVisible: false,
+          rightSideBarVisible: false
+        }
+      });
+    }
+    const handleResize = () => {
+      if (!window.matchMedia("(min-width: 638px)").matches) {
+        dispatch({
+          type: "setUi",
+          ui: (ui) => ({
+            ...ui,
+            ...ui.rightSideBarVisible ? { leftSideBarVisible: false } : {}
+          })
+        });
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [dispatch]);
+  const overrides = useAppStore((s) => s.overrides);
+  const CustomCredBuild = useMemo14(
+    () => overrides.credbuild || DefaultOverride,
+    [overrides]
+  );
+  const [mounted, setMounted] = useState14(false);
+  const [theme, setTheme] = useState14("dark");
+  useEffect14(() => {
+    setMounted(true);
+    const savedTheme = localStorage.getItem("credbuild-theme");
+    if (savedTheme) {
+      setTheme(savedTheme);
+    }
+    const handleThemeToggle = (e) => {
+      const newTheme = e.detail || localStorage.getItem("credbuild-theme");
+      if (newTheme) setTheme(newTheme);
+    };
+    window.addEventListener("credbuild-theme-change", handleThemeToggle);
+    window.addEventListener("storage", handleThemeToggle);
+    return () => {
+      window.removeEventListener("credbuild-theme-change", handleThemeToggle);
+      window.removeEventListener("storage", handleThemeToggle);
+    };
+  }, []);
+  const ready = useAppStore((s) => s.status === "READY");
+  useMonitorHotkeys();
+  useEffect14(() => {
+    if (ready && iframe.enabled) {
+      const frameDoc = getFrame();
+      if (frameDoc) {
+        return monitorHotkeys(frameDoc);
+      }
+    }
+  }, [ready, iframe.enabled]);
+  usePreviewModeHotkeys();
+  useDeleteHotkeys();
+  const layoutOptions = {};
+  if (leftWidth) {
+    layoutOptions["--credbuild-user-left-side-bar-width"] = `${leftWidth}px`;
+  }
+  if (rightWidth) {
+    layoutOptions["--credbuild-user-right-side-bar-width"] = `${rightWidth}px`;
+  }
+  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(
+    () => !!plugins?.find((p) => p.name === "legacy-side-bar"),
+    [plugins]
+  );
+  const pluginItems = useMemo14(() => {
+    const details = {};
+    const defaultPlugins = [
+      blocksPlugin(),
+      outlinePlugin(),
+      codePlugin()
+    ];
+    const isLegacy = (plugin) => plugin.name === "legacy-side-bar" ? -1 : 0;
+    const combinedPlugins = [
+      ...defaultPlugins,
+      ...plugins ?? []
+    ].sort((a, b) => isLegacy(a) - isLegacy(b));
+    if (!plugins?.some((p) => p.name === "fields")) {
+      combinedPlugins.push(fieldsPlugin());
+    }
+    combinedPlugins?.forEach((plugin) => {
+      if (plugin.name && plugin.render) {
+        if (details[plugin.name]) {
+          delete details[plugin.name];
+        }
+        details[plugin.name] = {
+          label: plugin.label ?? plugin.name,
+          icon: plugin.icon ?? /* @__PURE__ */ jsx29(ToyBrick, {}),
+          onClick: () => {
+            setMobilePanelHeightMode(plugin.mobilePanelHeight ?? "toggle");
+            if (plugin.name === currentPlugin) {
+              if (leftSideBarVisible) {
+                setUi({ leftSideBarVisible: false });
+              } else {
+                setUi({ leftSideBarVisible: true });
+              }
+            } else {
+              if (plugin.name) {
+                setUi({
+                  plugin: { current: plugin.name },
+                  leftSideBarVisible: true
+                });
+              }
+            }
+          },
+          isActive: leftSideBarVisible && currentPlugin === plugin.name,
+          render: plugin.render,
+          mobileOnly: hasLegacySideBarPlugin || plugin.mobileOnly,
+          desktopOnly: plugin.name === "legacy-side-bar" || plugin.desktopOnly
+        };
+      }
+    });
+    return details;
+  }, [plugins, currentPlugin, leftSideBarVisible, hasLegacySideBarPlugin, setUi]);
+  useEffect14(() => {
+    if (!currentPlugin) {
+      const names = Object.keys(pluginItems);
+      setUi({ plugin: { current: names[0] } });
+    }
+  }, [pluginItems, currentPlugin, setUi]);
+  const hasDesktopFieldsPlugin = pluginItems["fields"] && pluginItems["fields"].mobileOnly === false;
+  const mobilePanelExpanded = useAppStore(
+    (s) => s.state.ui.mobilePanelExpanded ?? false
+  );
+  return /* @__PURE__ */ jsxs16(
+    "div",
+    {
+      className: `CredBuild ${theme === "dark" ? "dark" : ""} ${getClassName20({
+        hidePlugins: hasLegacySideBarPlugin
+      })}`,
+      "data-theme": theme,
+      id: instanceId,
+      style: { height: typeof height === "number" && isNaN(height) ? void 0 : height },
+      children: [
+        /* @__PURE__ */ jsx29(DragDropContext, { disableAutoScroll: dnd?.disableAutoScroll, children: /* @__PURE__ */ jsx29(CustomCredBuild, { children: children || /* @__PURE__ */ jsx29(FrameProvider, { children: /* @__PURE__ */ jsx29(
+          "div",
+          {
+            className: getLayoutClassName({
+              leftSideBarVisible,
+              mounted,
+              rightSideBarVisible: !hasDesktopFieldsPlugin && rightSideBarVisible,
+              isExpanded: mobilePanelExpanded,
+              mobilePanelHeightToggle: mobilePanelHeightMode === "toggle",
+              mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content"
+            }),
+            style: { height: typeof height === "number" && isNaN(height) ? void 0 : height },
+            children: /* @__PURE__ */ jsxs16(
+              "div",
+              {
+                className: getLayoutClassName("inner"),
+                style: layoutOptions,
+                children: [
+                  /* @__PURE__ */ jsx29("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsx29(Header, { theme, hidePlugins: hasLegacySideBarPlugin }) }),
+                  /* @__PURE__ */ jsxs16(
+                    Sidebar,
+                    {
+                      position: "left",
+                      sidebarRef: leftSidebarRef,
+                      isVisible: leftSideBarVisible,
+                      onResize: setLeftWidth,
+                      onResizeEnd: handleLeftSidebarResizeEnd,
+                      children: [
+                        /* @__PURE__ */ jsx29("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx29(
+                          Nav,
+                          {
+                            items: pluginItems,
+                            mobileActions: typeof window !== "undefined" && !window.matchMedia("(min-width: 638px)").matches && leftSideBarVisible && mobilePanelHeightMode === "toggle" && /* @__PURE__ */ jsx29(
+                              IconButton,
+                              {
+                                type: "button",
+                                title: "maximize",
+                                onClick: () => {
+                                  setUi({
+                                    mobilePanelExpanded: !mobilePanelExpanded
+                                  });
+                                },
+                                children: mobilePanelExpanded ? /* @__PURE__ */ jsx29(Minimize2, { size: 21 }) : /* @__PURE__ */ jsx29(Maximize2, { size: 21 })
+                              }
+                            )
+                          }
+                        ) }),
+                        Object.entries(pluginItems).map(
+                          ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx29(
+                            PluginTab,
+                            {
+                              visible: currentPlugin === id,
+                              mobileOnly,
+                              children: /* @__PURE__ */ jsx29(Render2, {})
+                            },
+                            id
+                          )
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx29(Canvas, {}),
+                  !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx29(
+                    Sidebar,
+                    {
+                      position: "right",
+                      sidebarRef: rightSidebarRef,
+                      isVisible: rightSideBarVisible,
+                      onResize: setRightWidth,
+                      onResizeEnd: handleRightSidebarResizeEnd,
+                      children: /* @__PURE__ */ jsx29(FieldSideBar, {})
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) }) }) }),
+        /* @__PURE__ */ jsx29("div", { id: "credbuild-portal-root", className: getClassName20("portal") })
+      ]
+    }
+  );
+};
+
+// components/CredBuild/index.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+function CredBuildProvider({ children }) {
+  const {
+    config,
+    data: initialData,
+    ui: initialUi,
+    onChange,
+    permissions = {},
+    plugins,
+    overrides,
+    viewports = defaultViewports,
+    iframe: _iframe,
+    initialHistory: _initialHistory,
+    metadata,
+    onAction,
+    fieldTransforms,
+    _experimentalFullScreenCanvas,
+    _experimentalVirtualization
+  } = usePropsContext();
+  const iframe = useMemo15(
+    () => ({
+      enabled: true,
+      waitForStyles: true,
+      ..._iframe
+    }),
+    [_iframe]
+  );
+  const [generatedAppState] = useState15(() => {
+    const initial = { ...defaultAppState.ui, ...initialUi };
+    let clientUiState = {};
+    if (Object.keys(initialData?.root || {}).length > 0 && !initialData?.root?.props) {
+      console.warn(
+        "Warning: Defining props on `root` is deprecated. Please use `root.props`, or republish this page to migrate automatically."
+      );
+    }
+    const rootProps = initialData?.root?.props || initialData?.root || {};
+    const defaultedRootProps = {
+      ...config.root?.defaultProps,
+      ...rootProps
+    };
+    const root = populateIds(
+      toComponent({ ...initialData?.root, props: defaultedRootProps }),
+      config
+    );
+    const newAppState = {
+      ...defaultAppState,
+      data: {
+        ...initialData,
+        root: { ...initialData?.root, props: root.props },
+        content: initialData.content || []
+      },
+      ui: {
+        ...initial,
+        ...clientUiState,
+        // Store categories under componentList on state to allow render functions and plugins to modify
+        componentList: config.categories ? Object.entries(config.categories).reduce(
+          (acc, [categoryName, category]) => {
+            return {
+              ...acc,
+              [categoryName]: {
+                title: category.title,
+                components: category.components,
+                expanded: category.defaultExpanded,
+                visible: category.visible
+              }
+            };
+          },
+          {}
+        ) : {}
+      }
+    };
+    return walkAppState(newAppState, config);
+  });
+  const { appendData = true } = _initialHistory || {};
+  const [blendedHistories] = useState15(
+    [
+      ..._initialHistory?.histories || [],
+      ...appendData ? [{ state: generatedAppState }] : []
+    ].map((history) => {
+      let newState = { ...generatedAppState, ...history.state };
+      if (!history.state.indexes) {
+        newState = walkAppState(newState, config);
+      }
+      return {
+        ...history,
+        state: newState
+      };
+    })
+  );
+  const initialHistoryIndex = useMemo15(() => {
+    if (_initialHistory?.index !== void 0 && _initialHistory?.index >= 0 && _initialHistory?.index < blendedHistories.length) {
+      return _initialHistory?.index;
+    }
+    return blendedHistories.length - 1;
+  }, [_initialHistory?.index, blendedHistories.length]);
+  const initialAppState = blendedHistories[initialHistoryIndex].state;
+  const loadedOverrides = useLoadedOverrides({
+    overrides,
+    plugins
+  });
+  const loadedFieldTransforms = useMemo15(() => {
+    const _plugins = plugins || [];
+    const pluginFieldTransforms = _plugins.reduce(
+      (acc, plugin) => ({ ...acc, ...plugin.fieldTransforms }),
+      {}
+    );
+    return {
+      ...pluginFieldTransforms,
+      ...fieldTransforms
+    };
+  }, [fieldTransforms, plugins]);
+  const instanceId = useSafeId();
+  const generateAppStore = useCallback12(
+    (state) => {
+      return {
+        instanceId,
+        state,
+        config,
+        plugins: plugins || [],
+        overrides: loadedOverrides,
+        viewports,
+        iframe,
+        _experimentalFullScreenCanvas: !!_experimentalFullScreenCanvas,
+        _experimentalVirtualization: !!_experimentalVirtualization,
+        onAction,
+        metadata,
+        fieldTransforms: loadedFieldTransforms
+      };
+    },
+    [
+      instanceId,
+      config,
+      plugins,
+      loadedOverrides,
+      viewports,
+      iframe,
+      _experimentalFullScreenCanvas,
+      _experimentalVirtualization,
+      onAction,
+      metadata,
+      loadedFieldTransforms
+    ]
+  );
+  const [appStore] = useState15(
+    () => createAppStore(generateAppStore(initialAppState))
+  );
+  useEffect15(() => {
+    if (process.env.NODE_ENV !== "production") {
+      window.__CREDBUILD_INTERNAL_DO_NOT_USE = { appStore };
+    }
+  }, [appStore]);
+  useEffect15(() => {
+    const state = appStore.getState().state;
+    appStore.setState({
+      ...generateAppStore(state)
+    });
+  }, [generateAppStore, appStore]);
+  useRegisterHistorySlice(appStore, {
+    histories: blendedHistories,
+    index: initialHistoryIndex,
+    initialAppState
+  });
+  const previousData = useRef10(null);
+  useEffect15(() => {
+    return appStore.subscribe(
+      (s) => s.state.data,
+      (data) => {
+        if (onChange) {
+          if (deepEqual(data, previousData.current)) return;
+          onChange(data);
+          previousData.current = data;
+        }
+      }
+    );
+  }, [onChange, appStore]);
+  useRegisterPermissionsSlice(appStore, permissions);
+  const uCredBuildStore = useRegisterUseCredBuildStore(appStore);
+  useEffect15(() => {
+    const { resolveAndCommitData } = appStore.getState();
+    setTimeout(() => {
+      resolveAndCommitData();
+    }, 0);
+  }, [appStore]);
+  return /* @__PURE__ */ jsx30(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx30(UseCredBuildStoreContext.Provider, { value: uCredBuildStore, children }) });
+}
+function CredBuild(props) {
+  return /* @__PURE__ */ jsx30(PropsProvider, { ...props, children: /* @__PURE__ */ jsx30(CredBuildProvider, { ...props, children: /* @__PURE__ */ jsx30(Layout, { children: props.children }) }) });
+}
+CredBuild.Components = Components;
+CredBuild.Fields = Fields;
+CredBuild.Layout = Layout;
+CredBuild.Outline = Outline;
+CredBuild.Preview = Preview;
+
+// plugins/legacy-side-bar/index.tsx
+import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+var legacySideBarPlugin = () => ({
+  name: "legacy-side-bar",
+  render: () => /* @__PURE__ */ jsxs17("div", { style: { overflowY: "auto" }, children: [
+    /* @__PURE__ */ jsx31(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx31(Components, {}) }),
+    /* @__PURE__ */ jsx31(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx31(Outline, {}) })
+  ] })
+});
+
+export {
+  overrideKeys,
+  Render,
+  createUseCredBuild,
+  useCredBuild,
+  useGetCredBuild,
+  blocksPlugin,
+  outlinePlugin,
+  fieldsPlugin,
+  codePlugin,
+  CredBuild,
+  legacySideBarPlugin
+};