@crediblemark/build 0.25.7 → 0.25.8

package/dist/chunk-HHKM5MBJ.mjs

@@ -0,0 +1,3163 @@
+import {
+  LoadedRichTextMenu
+} from "./chunk-Z7DDX2XU.mjs";
+import {
+  DragIcon,
+  createDynamicCollisionDetector,
+  setDeep
+} from "./chunk-44PQTFGV.mjs";
+import {
+  EditorFallback,
+  useContextStore,
+  useSafeId
+} from "./chunk-T2LBDQLG.mjs";
+import {
+  styles_module_default
+} from "./chunk-ISXFLTBM.mjs";
+import {
+  ActionBar,
+  Loader
+} from "./chunk-AZFZRLP7.mjs";
+import {
+  Copy,
+  CornerLeftUp,
+  Trash,
+  defaultAppState,
+  resolveComponentData,
+  useAppStore,
+  useAppStoreApi
+} from "./chunk-KN26YZZJ.mjs";
+import {
+  get_class_name_factory_default
+} from "./chunk-BFHV72KK.mjs";
+import {
+  expandNode,
+  generateId,
+  getItem,
+  getZoneId,
+  insert,
+  mapFields,
+  rootAreaId,
+  rootDroppableId,
+  setupZone,
+  toComponent,
+  walkAppState,
+  walkTree
+} from "./chunk-O44M27KT.mjs";
+
+// components/AutoField/fields/SliderField/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SliderField = ({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  unit = "px",
+  defaultValue = 0,
+  useUnits = true,
+  style = {}
+}) => {
+  const parseValue = (val) => {
+    if (typeof val === "number") return val;
+    if (typeof val === "string") return parseFloat(val);
+    return 0;
+  };
+  const inputValue = value !== void 0 && value !== null ? value : defaultValue;
+  const numericValue = parseValue(inputValue);
+  const extractUnit = (val) => {
+    if (!useUnits) return "";
+    if (typeof val === "string") {
+      const match = val.replace(/[0-9.-]/g, "");
+      return match || unit;
+    }
+    return unit;
+  };
+  const currentUnit = extractUnit(inputValue);
+  const handleChange = (e) => {
+    const newVal = parseFloat(e.target.value);
+    if (isNaN(newVal)) return;
+    if (useUnits) {
+      onChange(`${newVal}${currentUnit}`);
+    } else {
+      onChange(newVal);
+    }
+  };
+  const handleUnitChange = (e) => {
+    const newUnit = e.target.value;
+    onChange(`${numericValue}${newUnit}`);
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "0", ...style }, children: [
+    /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `
+                .cb-slider-input {
+                    -webkit-appearance: none;
+                    width: 100%;
+                    height: 3px;
+                    background: var(--cb-border, #e2e8f0);
+                    border-radius: 2px;
+                    outline: none;
+                    margin: 8px 0;
+                }
+                .cb-slider-input::-webkit-slider-thumb {
+                    -webkit-appearance: none;
+                    appearance: none;
+                    width: 12px;
+                    height: 12px;
+                    background: var(--cb-gold, #d97706);
+                    cursor: pointer;
+                    border-radius: 50%;
+                    border: 2px solid var(--cb-bg-surface, #fff);
+                    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+                    transition: all 0.2s ease;
+                }
+                .cb-slider-input::-webkit-slider-thumb:hover {
+                    transform: scale(1.15);
+                }
+                .cb-number-input:focus, .cb-select-input:focus {
+                    border-color: var(--cb-gold) !important;
+                    outline: none !important;
+                }
+            ` } }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min,
+          max,
+          step,
+          value: numericValue,
+          onChange: handleChange,
+          className: "cb-slider-input",
+          style: { flex: 1, cursor: "pointer" }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "2px" }, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            min,
+            max,
+            step,
+            value: numericValue,
+            onChange: handleChange,
+            className: "cb-number-input",
+            style: {
+              width: "48px",
+              padding: "3px 4px",
+              borderRadius: "3px",
+              border: "1px solid var(--cb-border, #e2e8f0)",
+              background: "var(--cb-bg-base, #f8fafc)",
+              color: "var(--cb-silver, #0f172a)",
+              fontSize: "10px",
+              fontWeight: "500",
+              textAlign: "center",
+              transition: "all 0.2s ease"
+            }
+          }
+        ),
+        useUnits && /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: currentUnit,
+            onChange: handleUnitChange,
+            className: "cb-select-input",
+            style: {
+              width: "42px",
+              padding: "2px",
+              borderRadius: "3px",
+              border: "1px solid var(--cb-border, #e2e8f0)",
+              background: "var(--cb-bg-base, #f8fafc)",
+              color: "var(--cb-silver, #0f172a)",
+              fontSize: "9px",
+              fontWeight: "500",
+              cursor: "pointer",
+              transition: "all 0.2s ease"
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "px", children: "px" }),
+              /* @__PURE__ */ jsx("option", { value: "%", children: "%" }),
+              /* @__PURE__ */ jsx("option", { value: "vh", children: "vh" }),
+              /* @__PURE__ */ jsx("option", { value: "vw", children: "vw" }),
+              /* @__PURE__ */ jsx("option", { value: "em", children: "em" }),
+              /* @__PURE__ */ jsx("option", { value: "rem", children: "rem" })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
+// components/AutoField/fields/ResponsiveSliderField/index.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DesktopIcon = () => /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx2("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx2("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+  /* @__PURE__ */ jsx2("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+] });
+var TabletIcon = () => /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx2("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx2("line", { x1: "12", y1: "18", x2: "12.01", y2: "18" })
+] });
+var MobileIcon = () => /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx2("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx2("line", { x1: "12", y1: "18", x2: "12.01", y2: "18" })
+] });
+var ResponsiveSliderField = ({
+  value = {},
+  onChange,
+  label,
+  unit = "px",
+  max = 100,
+  min = 0,
+  step = 1,
+  defaultValue = 0
+}) => {
+  const setUi = useAppStore((s) => s.setUi);
+  const viewportsState = useAppStore((s) => s.state.ui.viewports);
+  const zoomConfig = useAppStore((s) => s.zoomConfig);
+  const setZoomConfig = useAppStore((s) => s.setZoomConfig);
+  const viewportConfigOptions = useAppStore((s) => s.viewports);
+  const getModeFromWidth = (width) => {
+    if (width === "100%") return "desktop";
+    const w = typeof width === "string" ? parseInt(width) : width;
+    if (w <= 480) return "mobile";
+    if (w <= 900) return "tablet";
+    return "desktop";
+  };
+  const mode = getModeFromWidth(viewportsState.current.width);
+  const changeGlobalViewport = (targetMode) => {
+    const targetIcon = targetMode === "mobile" ? "Smartphone" : targetMode === "tablet" ? "Tablet" : "Monitor";
+    const matched = viewportConfigOptions.find((v) => v.icon === targetIcon) || viewportConfigOptions.find((v) => {
+      if (targetMode === "mobile") return v.width !== "100%" && parseInt(String(v.width)) <= 480;
+      if (targetMode === "tablet") return v.width !== "100%" && parseInt(String(v.width)) > 480 && parseInt(String(v.width)) <= 900;
+      return v.width === "100%" || parseInt(String(v.width)) > 900;
+    }) || viewportConfigOptions[0];
+    const isFullWidth = matched.width === "100%";
+    const uiViewport = {
+      ...matched,
+      height: matched.height || "auto",
+      zoom: isFullWidth ? 1 : zoomConfig.zoom
+    };
+    if (isFullWidth) {
+      setZoomConfig({ ...zoomConfig, zoom: 1 });
+    }
+    setUi({
+      viewports: { ...viewportsState, current: uiViewport }
+    });
+  };
+  const getCurrentValue = () => {
+    const val = value?.[mode];
+    if (val !== void 0 && val !== null) {
+      return val;
+    }
+    if (mode === "tablet" && value?.desktop !== void 0) return value.desktop;
+    if (mode === "mobile") {
+      if (value?.tablet !== void 0) return value.tablet;
+      if (value?.desktop !== void 0) return value.desktop;
+    }
+    if (typeof defaultValue === "number") return defaultValue;
+    const def = defaultValue;
+    const defVal = def?.[mode];
+    if (defVal !== void 0) return defVal;
+    if (mode === "tablet" && def?.desktop !== void 0) return def.desktop;
+    if (mode === "mobile") {
+      if (def?.tablet !== void 0) return def.tablet;
+      if (def?.desktop !== void 0) return def.desktop;
+    }
+    return 0;
+  };
+  const handleChange = (newVal) => {
+    onChange({
+      ...value,
+      [mode]: newVal
+    });
+  };
+  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "2px", width: "100%" }, children: [
+    label && /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "2px" }, children: /* @__PURE__ */ jsxs2("label", { style: {
+      fontSize: "10px",
+      fontWeight: 600,
+      color: "var(--cb-silver-muted, #71717a)",
+      display: "flex",
+      alignItems: "center",
+      gap: "4px",
+      textTransform: "uppercase",
+      letterSpacing: "0.05em"
+    }, children: [
+      label,
+      /* @__PURE__ */ jsxs2("span", { style: { fontSize: "9px", opacity: 0.5, fontWeight: "400" }, children: [
+        "(",
+        mode,
+        ")"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" }, children: [
+      /* @__PURE__ */ jsxs2("div", { style: {
+        display: "flex",
+        backgroundColor: "var(--cb-bg-panel, #f1f5f9)",
+        borderRadius: "4px",
+        padding: "1px",
+        border: "1px solid var(--cb-border, #e2e8f0)",
+        flexShrink: 0
+      }, children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: () => changeGlobalViewport("desktop"),
+            style: {
+              padding: "2px 5px",
+              border: "none",
+              background: mode === "desktop" ? "var(--cb-bg-surface, #fff)" : "transparent",
+              boxShadow: mode === "desktop" ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
+              borderRadius: "3px",
+              cursor: "pointer",
+              color: mode === "desktop" ? "var(--cb-gold, #d97706)" : "var(--cb-silver-muted, #a1a1aa)",
+              display: "flex",
+              alignItems: "center",
+              transition: "all 0.1s ease"
+            },
+            title: "Desktop",
+            "aria-label": "Desktop viewport",
+            "aria-pressed": mode === "desktop",
+            children: /* @__PURE__ */ jsx2(DesktopIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: () => changeGlobalViewport("tablet"),
+            style: {
+              padding: "2px 5px",
+              border: "none",
+              background: mode === "tablet" ? "var(--cb-bg-surface, #fff)" : "transparent",
+              boxShadow: mode === "tablet" ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
+              borderRadius: "3px",
+              cursor: "pointer",
+              color: mode === "tablet" ? "var(--cb-gold, #d97706)" : "var(--cb-silver-muted, #a1a1aa)",
+              display: "flex",
+              alignItems: "center",
+              transition: "all 0.1s ease"
+            },
+            title: "Tablet",
+            "aria-label": "Tablet viewport",
+            "aria-pressed": mode === "tablet",
+            children: /* @__PURE__ */ jsx2(TabletIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: () => changeGlobalViewport("mobile"),
+            style: {
+              padding: "2px 5px",
+              border: "none",
+              background: mode === "mobile" ? "var(--cb-bg-surface, #fff)" : "transparent",
+              boxShadow: mode === "mobile" ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
+              borderRadius: "3px",
+              cursor: "pointer",
+              color: mode === "mobile" ? "var(--cb-gold, #d97706)" : "var(--cb-silver-muted, #a1a1aa)",
+              display: "flex",
+              alignItems: "center",
+              transition: "all 0.1s ease"
+            },
+            title: "Mobile",
+            "aria-label": "Mobile viewport",
+            "aria-pressed": mode === "mobile",
+            children: /* @__PURE__ */ jsx2(MobileIcon, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx2("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx2(
+        SliderField,
+        {
+          value: getCurrentValue(),
+          onChange: handleChange,
+          unit,
+          max,
+          min,
+          step,
+          useUnits: false
+        }
+      ) })
+    ] })
+  ] });
+};
+
+// components/AutoField/fields/ColorPickerField/index.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var ColorPickerField = ({ value, onChange }) => {
+  const safeValue = value || "#ffffff";
+  return /* @__PURE__ */ jsxs3("div", { style: { padding: "4px 0", display: "flex", gap: "6px", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx3("div", { style: {
+      position: "relative",
+      width: "28px",
+      height: "28px",
+      borderRadius: "3px",
+      border: "1px solid var(--cb-border, #e2e8f0)",
+      overflow: "hidden",
+      flexShrink: 0,
+      background: "var(--cb-bg-base, #f8fafc)"
+    }, children: /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type: "color",
+        value: safeValue.startsWith("#") ? safeValue : "#000000",
+        onChange: (e) => {
+          if (e.target.value !== value) {
+            onChange(e.target.value);
+          }
+        },
+        style: {
+          position: "absolute",
+          top: "-50%",
+          left: "-50%",
+          width: "200%",
+          height: "200%",
+          cursor: "pointer",
+          border: "none",
+          padding: 0,
+          margin: 0
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type: "text",
+        value: value || "",
+        placeholder: "#RRGGBB",
+        onChange: (e) => onChange(e.target.value),
+        style: {
+          flex: 1,
+          padding: "4px 8px",
+          borderRadius: "3px",
+          border: "1px solid var(--cb-border, #e2e8f0)",
+          background: "var(--cb-bg-base, #f8fafc)",
+          color: "var(--cb-silver, #0f172a)",
+          fontSize: "11px",
+          fontFamily: "var(--cb-font-mono, 'JetBrains Mono', monospace)",
+          fontWeight: "500",
+          height: "28px",
+          transition: "all 0.1s ease"
+        }
+      }
+    )
+  ] });
+};
+
+// css-module:/home/runner/work/credbuild/credbuild/components/Drawer/styles.module.css#css-module
+var styles_module_default2 = { "Drawer": "_Drawer_1bd7y_1", "Drawer-draggable": "_Drawer-draggable_1bd7y_7", "Drawer-draggableBg": "_Drawer-draggableBg_1bd7y_11", "DrawerItem-draggable": "_DrawerItem-draggable_1bd7y_21", "DrawerItem--disabled": "_DrawerItem--disabled_1bd7y_34", "DrawerItem": "_DrawerItem_1bd7y_21", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_1bd7y_43", "DrawerItem-default": "_DrawerItem-default_1bd7y_44", "DrawerItem-name": "_DrawerItem-name_1bd7y_61" };
+
+// components/Drawer/index.tsx
+import { useMemo, useState } from "react";
+
+// components/DragDropContext/context.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useRef
+} from "react";
+var dragListenerContext = createContext({
+  dragListeners: {}
+});
+function useDragListener(type, fn, deps = []) {
+  const { setDragListeners } = useContext(dragListenerContext);
+  const id = useId();
+  const fnRef = useRef(fn);
+  useEffect(() => {
+    fnRef.current = fn;
+  }, [fn]);
+  useEffect(() => {
+    if (setDragListeners) {
+      const wrappedFn = ((...args) => {
+        return fnRef.current(...args);
+      });
+      setDragListeners((old) => ({
+        ...old,
+        [type]: [...old[type] || [], { id, fn: wrappedFn }]
+      }));
+      return () => {
+        setDragListeners((old) => ({
+          ...old,
+          [type]: (old[type] || []).filter((item) => item.id !== id)
+        }));
+      };
+    }
+  }, [type, setDragListeners, id]);
+}
+
+// components/Drawer/index.tsx
+import { useDraggable, useDroppable } from "@dnd-kit/react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var getClassName = get_class_name_factory_default("Drawer", styles_module_default2);
+var getClassNameItem = get_class_name_factory_default("DrawerItem", styles_module_default2);
+var DrawerItemInner = ({
+  children,
+  name,
+  label,
+  dragRef,
+  isDragDisabled
+}) => {
+  const CustomInner = useMemo(
+    () => children || (({ children: children2 }) => /* @__PURE__ */ jsx4("div", { className: getClassNameItem("default"), children: children2 })),
+    [children]
+  );
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: getClassNameItem({ disabled: isDragDisabled }),
+      ref: dragRef,
+      onMouseDown: (e) => e.preventDefault(),
+      "data-testid": dragRef ? `drawer-item:${name}` : "",
+      "data-credbuild-drawer-item": true,
+      children: /* @__PURE__ */ jsx4(CustomInner, { name, children: /* @__PURE__ */ jsx4("div", { className: getClassNameItem("draggableWrapper"), children: /* @__PURE__ */ jsxs4("div", { className: getClassNameItem("draggable"), children: [
+        /* @__PURE__ */ jsx4("div", { className: getClassNameItem("name"), children: label ?? name }),
+        /* @__PURE__ */ jsx4("div", { className: getClassNameItem("icon"), children: /* @__PURE__ */ jsx4(DragIcon, {}) })
+      ] }) }) })
+    }
+  );
+};
+var DrawerItemDraggable = ({
+  children,
+  name,
+  label,
+  id,
+  isDragDisabled
+}) => {
+  const { ref } = useDraggable({
+    id,
+    data: { componentType: name },
+    disabled: isDragDisabled,
+    type: "drawer"
+  });
+  return /* @__PURE__ */ jsxs4("div", { className: getClassName("draggable"), children: [
+    /* @__PURE__ */ jsx4("div", { className: getClassName("draggableBg"), children: /* @__PURE__ */ jsx4(DrawerItemInner, { name, label, children }) }),
+    /* @__PURE__ */ jsx4("div", { className: getClassName("draggableFg"), children: /* @__PURE__ */ jsx4(
+      DrawerItemInner,
+      {
+        name,
+        label,
+        dragRef: ref,
+        isDragDisabled,
+        children
+      }
+    ) })
+  ] });
+};
+var DrawerItem = ({
+  name,
+  children,
+  id,
+  label,
+  index,
+  isDragDisabled
+}) => {
+  const resolvedId = id || name;
+  const [dynamicId, setDynamicId] = useState(generateId(resolvedId));
+  if (typeof index !== "undefined") {
+    console.error(
+      "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
+    );
+  }
+  useDragListener(
+    "dragend",
+    () => {
+      setDynamicId(generateId(resolvedId));
+    },
+    [resolvedId]
+  );
+  return /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
+    DrawerItemDraggable,
+    {
+      name,
+      label,
+      id: dynamicId,
+      isDragDisabled,
+      children
+    }
+  ) }, dynamicId);
+};
+var Drawer = ({
+  children,
+  droppableId,
+  direction
+}) => {
+  if (droppableId) {
+    console.error(
+      "Warning: The `droppableId` prop on Drawer is deprecated and no longer required."
+    );
+  }
+  if (direction) {
+    console.error(
+      "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
+    );
+  }
+  const id = useSafeId();
+  const { ref } = useDroppable({
+    id,
+    type: "void",
+    collisionPriority: 0
+    // Never collide with this, but we use it so NestedDroppablePlugin respects the Drawer
+  });
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: getClassName(),
+      ref,
+      "data-credbuild-dnd": id,
+      "data-credbuild-drawer": true,
+      "data-credbuild-dnd-void": true,
+      children
+    }
+  );
+};
+Drawer.Item = DrawerItem;
+
+// lib/overlay-portal/index.tsx
+var registerOverlayPortal = (el, opts = {}) => {
+  if (!el) return;
+  const { disableDrag = false, disableDragOnFocus = true } = opts;
+  const stopPropagation = (e) => {
+    e.stopPropagation();
+  };
+  el.addEventListener("mouseover", stopPropagation, {
+    capture: true
+  });
+  const onFocus = () => {
+    setTimeout(() => {
+      el.addEventListener("pointerdown", stopPropagation, {
+        capture: true
+      });
+    }, 200);
+  };
+  const onBlur = () => {
+    el.removeEventListener("pointerdown", stopPropagation, {
+      capture: true
+    });
+  };
+  if (disableDrag) {
+    el.addEventListener("pointerdown", stopPropagation, {
+      capture: true
+    });
+  } else if (disableDragOnFocus) {
+    el.addEventListener("focus", onFocus, { capture: true });
+    el.addEventListener("blur", onBlur, { capture: true });
+  }
+  el.setAttribute("data-credbuild-overlay-portal", "true");
+  return () => {
+    el.removeEventListener("mouseover", stopPropagation, {
+      capture: true
+    });
+    if (disableDrag) {
+      el.removeEventListener("pointerdown", stopPropagation, {
+        capture: true
+      });
+    } else if (disableDragOnFocus) {
+      el.removeEventListener("focus", onFocus, { capture: true });
+      el.removeEventListener("blur", onBlur, { capture: true });
+    }
+    el.removeAttribute("data-credbuild-overlay-portal");
+  };
+};
+
+// components/DropZone/index.tsx
+import {
+  forwardRef as forwardRef2,
+  memo as memo4,
+  useCallback as useCallback10,
+  useContext as useContext5,
+  useEffect as useEffect9,
+  useMemo as useMemo8,
+  useRef as useRef8
+} from "react";
+import DOMPurify2 from "isomorphic-dompurify";
+
+// components/DraggableComponent/index.tsx
+import {
+  useCallback as useCallback3,
+  useContext as useContext2,
+  useEffect as useEffect2,
+  useLayoutEffect,
+  useMemo as useMemo3,
+  useRef as useRef2,
+  useState as useState2,
+  useTransition
+} from "react";
+
+// css-module:/home/runner/work/credbuild/credbuild/components/DraggableComponent/styles.module.css#css-module
+var styles_module_default3 = { "DraggableComponent": "_DraggableComponent_yrtpz_1", "DraggableComponent-overlayWrapper": "_DraggableComponent-overlayWrapper_yrtpz_12", "DraggableComponent-overlay": "_DraggableComponent-overlay_yrtpz_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_yrtpz_34", "DraggableComponent--hover": "_DraggableComponent--hover_yrtpz_50", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_yrtpz_57", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_yrtpz_71", "DraggableComponent-actions": "_DraggableComponent-actions_yrtpz_71" };
+
+// components/DraggableComponent/index.tsx
+import { createPortal } from "react-dom";
+
+// components/DropZone/context.tsx
+import {
+  createContext as createContext2,
+  useCallback,
+  useMemo as useMemo2
+} from "react";
+import { createStore } from "zustand";
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
+var dropZoneContext = createContext2(null);
+var ZoneStoreContext = createContext2(
+  createStore(() => ({
+    zoneDepthIndex: {},
+    nextZoneDepthIndex: {},
+    areaDepthIndex: {},
+    nextAreaDepthIndex: {},
+    draggedItem: null,
+    previewIndex: {},
+    enabledIndex: {},
+    hoveringComponent: null,
+    registerRootVirtualizer: () => {
+    },
+    unregisterRootVirtualizer: () => {
+    },
+    scrollToComponent: () => false
+  }))
+);
+var ZoneStoreProvider = ({
+  children,
+  store
+}) => {
+  return /* @__PURE__ */ jsx5(ZoneStoreContext.Provider, { value: store, children });
+};
+var DropZoneProvider = ({
+  children,
+  value
+}) => {
+  const dispatch = useAppStore((s) => s.dispatch);
+  const registerZone = useCallback(
+    (zoneCompound) => {
+      dispatch({
+        type: "registerZone",
+        zone: zoneCompound
+      });
+    },
+    [dispatch]
+  );
+  const memoValue = useMemo2(
+    () => ({
+      registerZone,
+      ...value
+    }),
+    [value, registerZone]
+  );
+  return /* @__PURE__ */ jsx5(Fragment, { children: memoValue && /* @__PURE__ */ jsx5(dropZoneContext.Provider, { value: memoValue, children }) });
+};
+
+// lib/get-deep-scroll-position.ts
+function getDeepScrollPosition(element) {
+  let totalScroll = {
+    x: 0,
+    y: 0
+  };
+  let current = element;
+  while (current && current !== document.documentElement) {
+    const parent = current.parentElement;
+    if (parent) {
+      totalScroll.x += parent.scrollLeft;
+      totalScroll.y += parent.scrollTop;
+    }
+    current = parent;
+  }
+  return totalScroll;
+}
+
+// components/DraggableComponent/index.tsx
+import { useShallow } from "zustand/react/shallow";
+import { useSortable } from "@dnd-kit/react/sortable";
+
+// lib/dnd/use-on-drag-finished.ts
+import { useCallback as useCallback2 } from "react";
+var useOnDragFinished = (cb, _deps = []) => {
+  const appStore = useAppStoreApi();
+  return useCallback2(() => {
+    let dispose = () => {
+    };
+    const processDragging = (isDragging2) => {
+      if (isDragging2) {
+        cb(false);
+      } else {
+        setTimeout(() => {
+          cb(true);
+        }, 0);
+        if (dispose) dispose();
+      }
+    };
+    const isDragging = appStore.getState().state.ui.isDragging;
+    processDragging(isDragging);
+    if (isDragging) {
+      dispose = appStore.subscribe(
+        (s) => s.state.ui.isDragging,
+        (isDragging2) => {
+          processDragging(isDragging2);
+        }
+      );
+    }
+    return dispose;
+  }, [appStore, cb]);
+};
+
+// lib/assign-refs.ts
+function assignRef(ref, node) {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref && typeof ref === "object" && "current" in ref) {
+    ref.current = node;
+  }
+}
+function assignRefs(refs, node) {
+  refs.forEach((ref) => {
+    assignRef(ref, node);
+  });
+}
+
+// components/DraggableComponent/index.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var getClassName2 = get_class_name_factory_default("DraggableComponent", styles_module_default3);
+var DEBUG = false;
+var MEASURE_EVERY_MS = 100;
+var space = 8;
+var actionsOverlayTop = space * 6.5;
+var actionsTop = -(actionsOverlayTop - 8);
+var actionsSide = space;
+var DefaultActionBar = ({
+  label,
+  children,
+  parentAction
+}) => /* @__PURE__ */ jsxs5(ActionBar, { children: [
+  /* @__PURE__ */ jsxs5(ActionBar.Group, { children: [
+    parentAction,
+    label && /* @__PURE__ */ jsx6(ActionBar.Label, { label })
+  ] }),
+  /* @__PURE__ */ jsx6(ActionBar.Group, { children })
+] });
+var DefaultOverlay = ({
+  children
+}) => /* @__PURE__ */ jsx6(Fragment2, { children });
+var DraggableComponent = ({
+  children,
+  depth,
+  componentType,
+  id,
+  index,
+  zoneCompound,
+  isLoading = false,
+  isSelected = false,
+  debug,
+  label,
+  autoDragAxis,
+  userDragAxis,
+  inDroppableZone = true,
+  itemRef
+}) => {
+  const zoom = useAppStore(
+    (s) => s.selectedItem?.props.id === id ? s.zoomConfig.zoom : 1
+  );
+  const _experimentalFullScreenCanvas = useAppStore(
+    (s) => s._experimentalFullScreenCanvas
+  );
+  const overrides = useAppStore((s) => s.overrides);
+  const dispatch = useAppStore((s) => s.dispatch);
+  const appStore = useAppStoreApi();
+  const isIframeEnabled = useAppStore((s) => s.iframe.enabled);
+  const lastMeasureRef = useRef2(0);
+  const ctx = useContext2(dropZoneContext);
+  const [localZones, setLocalZones] = useState2({});
+  const registerLocalZone = useCallback3(
+    (zoneCompound2, active) => {
+      ctx?.registerLocalZone?.(zoneCompound2, active);
+      setLocalZones((obj) => ({
+        ...obj,
+        [zoneCompound2]: active
+      }));
+    },
+    [setLocalZones, ctx]
+  );
+  const unregisterLocalZone = useCallback3(
+    (zoneCompound2) => {
+      ctx?.unregisterLocalZone?.(zoneCompound2);
+      setLocalZones((obj) => {
+        const newLocalZones = {
+          ...obj
+        };
+        delete newLocalZones[zoneCompound2];
+        return newLocalZones;
+      });
+    },
+    [setLocalZones, ctx]
+  );
+  const containsActiveZone = Object.values(localZones).filter(Boolean).length > 0;
+  const path = useAppStore(useShallow((s) => s.state.indexes.nodes[id]?.path));
+  const permissions = useAppStore(
+    useShallow((s) => {
+      const item = getItem({ index, zone: zoneCompound }, s.state);
+      return s.permissions.getPermissions({ item });
+    })
+  );
+  const zoneStore = useContext2(ZoneStoreContext);
+  const [dragAxis, setDragAxis] = useState2(userDragAxis || autoDragAxis);
+  const dynamicCollisionDetector = useMemo3(
+    () => createDynamicCollisionDetector(dragAxis),
+    [dragAxis]
+  );
+  const {
+    ref: sortableRef,
+    isDragging: thisIsDragging,
+    sortable
+  } = useSortable({
+    id,
+    index,
+    group: zoneCompound,
+    type: "component",
+    data: {
+      areaId: ctx?.areaId,
+      zone: zoneCompound,
+      index,
+      componentType,
+      containsActiveZone,
+      depth,
+      path: path || [],
+      inDroppableZone
+    },
+    collisionPriority: depth,
+    collisionDetector: dynamicCollisionDetector,
+    // "Out of the way" transition from react-beautiful-dnd
+    transition: {
+      duration: 200,
+      easing: "cubic-bezier(0.2, 0, 0, 1)"
+    },
+    feedback: "clone"
+  });
+  useEffect2(() => {
+    const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
+    sortable.droppable.disabled = !isEnabled;
+    sortable.draggable.disabled = !permissions.drag;
+    const cleanup = zoneStore.subscribe((s) => {
+      sortable.droppable.disabled = !s.enabledIndex[zoneCompound];
+    });
+    if (ref.current && !permissions.drag) {
+      ref.current.setAttribute("data-credbuild-disabled", "");
+      return () => {
+        ref.current?.removeAttribute("data-credbuild-disabled");
+        cleanup();
+      };
+    }
+    return cleanup;
+  }, [permissions.drag, zoneCompound, sortable.draggable, sortable.droppable, zoneStore]);
+  const [, setRerender] = useState2(0);
+  const ref = useRef2(null);
+  const refSetter = useCallback3(
+    (el) => {
+      sortableRef(el);
+      if (ref.current !== el) {
+        ref.current = el;
+        setRerender((update) => update + 1);
+        if (itemRef) {
+          assignRefs([itemRef], el);
+        }
+      }
+    },
+    [itemRef, sortableRef]
+  );
+  const [portalEl, setPortalEl] = useState2();
+  useEffect2(() => {
+    setPortalEl(
+      isIframeEnabled ? ref.current?.ownerDocument.body : ref.current?.closest("[data-credbuild-preview]") ?? document.body
+    );
+  }, [isIframeEnabled]);
+  const getStyle = useCallback3(() => {
+    if (!ref.current) return;
+    const el = ref.current;
+    const rect = el.getBoundingClientRect();
+    const portalContainerEl = isIframeEnabled ? null : el.closest("[data-credbuild-preview]");
+    const targetIsFixed = (() => {
+      let node = el;
+      while (node && node !== document.documentElement) {
+        if (getComputedStyle(node).position === "fixed") {
+          return true;
+        }
+        node = node.parentElement;
+      }
+      return false;
+    })();
+    const portalContainerRect = portalContainerEl?.getBoundingClientRect();
+    const portalScroll = portalContainerEl ? getDeepScrollPosition(portalContainerEl) : { x: 0, y: 0 };
+    const deepScrollPosition = targetIsFixed ? { x: 0, y: 0 } : getDeepScrollPosition(el);
+    const scroll = targetIsFixed ? { x: 0, y: 0 } : {
+      x: deepScrollPosition.x - portalScroll.x - (portalContainerRect?.left ?? 0),
+      y: deepScrollPosition.y - portalScroll.y - (portalContainerRect?.top ?? 0)
+    };
+    const zoomMultiplier = isIframeEnabled ? 1 : appStore.getState().zoomConfig.zoom;
+    const style2 = {
+      left: `${(rect.left + scroll.x) / zoomMultiplier}px`,
+      top: `${(rect.top + scroll.y) / zoomMultiplier}px`,
+      height: `${rect.height / zoomMultiplier}px`,
+      width: `${rect.width / zoomMultiplier}px`,
+      position: targetIsFixed ? "fixed" : void 0
+    };
+    return style2;
+  }, [isIframeEnabled]);
+  const [style, setStyle] = useState2();
+  const lastRectRef = useRef2(null);
+  const syncRafRef = useRef2(null);
+  const sync = useCallback3(() => {
+    setStyle(getStyle());
+    if (itemRef) {
+      assignRefs([itemRef], ref.current);
+    }
+  }, [getStyle, itemRef]);
+  const scheduleSync = useCallback3(() => {
+    if (syncRafRef.current != null) return;
+    syncRafRef.current = requestAnimationFrame(() => {
+      syncRafRef.current = null;
+      sync();
+    });
+  }, [sync]);
+  useEffect2(() => {
+    return () => {
+      if (syncRafRef.current != null) {
+        cancelAnimationFrame(syncRafRef.current);
+        syncRafRef.current = null;
+      }
+    };
+  }, []);
+  useEffect2(() => {
+    if (ref.current) {
+      const observer = new ResizeObserver(() => {
+        scheduleSync();
+      });
+      observer.observe(ref.current);
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [scheduleSync, itemRef]);
+  const registerNode = useAppStore((s) => s.nodes.registerNode);
+  const unregisterNode = useAppStore((s) => s.nodes.unregisterNode);
+  const hideOverlay = useCallback3(() => {
+    setIsVisible(false);
+  }, []);
+  const showOverlay = useCallback3(() => {
+    setIsVisible(true);
+  }, []);
+  const nodeHandleRef = useRef2({
+    sync: () => null,
+    hideOverlay: () => null,
+    showOverlay: () => null
+  });
+  useLayoutEffect(() => {
+    nodeHandleRef.current.sync = sync;
+    nodeHandleRef.current.hideOverlay = hideOverlay;
+    nodeHandleRef.current.showOverlay = showOverlay;
+  }, [hideOverlay, showOverlay, sync]);
+  useEffect2(() => {
+    registerNode(id, nodeHandleRef.current);
+    return () => {
+      unregisterNode(id);
+    };
+  }, [id, registerNode, unregisterNode]);
+  const CustomActionBar = useMemo3(
+    () => overrides.actionBar || DefaultActionBar,
+    [overrides.actionBar]
+  );
+  const CustomOverlay = useMemo3(
+    () => overrides.componentOverlay || DefaultOverlay,
+    [overrides.componentOverlay]
+  );
+  const onClick = useCallback3(
+    (e) => {
+      const userIsDragging = !!zoneStore.getState().draggedItem;
+      if (userIsDragging) {
+        return;
+      }
+      const el = e.target;
+      if (!el.closest("[data-credbuild-overlay-portal]")) {
+        e.stopPropagation();
+      }
+      if (_experimentalFullScreenCanvas) {
+        dispatch({
+          type: "setUi",
+          ui: {
+            itemSelector: isSelected ? null : { index, zone: zoneCompound }
+          }
+        });
+      } else {
+        dispatch({
+          type: "setUi",
+          ui: {
+            itemSelector: { index, zone: zoneCompound }
+          }
+        });
+      }
+    },
+    [index, zoneCompound, isSelected, _experimentalFullScreenCanvas, dispatch, zoneStore]
+  );
+  const onSelectParent = useCallback3(() => {
+    const { nodes, zones } = appStore.getState().state.indexes;
+    const node = nodes[id];
+    const parentNode = node?.parentId ? nodes[node?.parentId] : null;
+    if (!parentNode || !node.parentId) {
+      return;
+    }
+    const parentZoneCompound = `${parentNode.parentId}:${parentNode.zone}`;
+    const parentIndex = zones[parentZoneCompound].contentIds.indexOf(
+      node.parentId
+    );
+    dispatch({
+      type: "setUi",
+      ui: {
+        itemSelector: {
+          zone: parentZoneCompound,
+          index: parentIndex
+        }
+      }
+    });
+  }, [appStore, dispatch, id]);
+  const onDuplicate = useCallback3(() => {
+    dispatch({
+      type: "duplicate",
+      sourceIndex: index,
+      sourceZone: zoneCompound
+    });
+  }, [index, zoneCompound, dispatch]);
+  const onDelete = useCallback3(() => {
+    dispatch({
+      type: "remove",
+      index,
+      zone: zoneCompound
+    });
+  }, [index, zoneCompound, dispatch]);
+  const [hover, setHover] = useState2(false);
+  const indicativeHover = useContextStore(
+    ZoneStoreContext,
+    (s) => s.hoveringComponent === id
+  );
+  useEffect2(() => {
+    if (!ref.current) {
+      return;
+    }
+    const el = ref.current;
+    const _onMouseOver = (e) => {
+      const userIsDragging = !!zoneStore.getState().draggedItem;
+      if (userIsDragging) {
+        if (containsActiveZone) {
+          setHover(true);
+        } else {
+          setHover(false);
+        }
+      } else {
+        setHover(true);
+      }
+      e.stopPropagation();
+    };
+    const _onMouseOut = (e) => {
+      e.stopPropagation();
+      setHover(false);
+    };
+    el.setAttribute("data-credbuild-component", id);
+    el.setAttribute("data-credbuild-dnd", id);
+    el.style.position = "relative";
+    el.addEventListener("click", onClick);
+    el.addEventListener("mouseover", _onMouseOver);
+    el.addEventListener("mouseout", _onMouseOut);
+    return () => {
+      el.removeAttribute("data-credbuild-component");
+      el.removeAttribute("data-credbuild-dnd");
+      el.removeEventListener("click", onClick);
+      el.removeEventListener("mouseover", _onMouseOver);
+      el.removeEventListener("mouseout", _onMouseOut);
+    };
+  }, [
+    ref,
+    // Remount attributes if the element changes
+    onClick,
+    containsActiveZone,
+    zoneCompound,
+    setHover,
+    thisIsDragging,
+    inDroppableZone,
+    zoneStore,
+    id
+  ]);
+  const [isVisible, setIsVisible] = useState2(false);
+  const [dragFinished, setDragFinished] = useState2(true);
+  const [_, startTransition] = useTransition();
+  useEffect2(() => {
+    startTransition(() => {
+      if (hover || indicativeHover || isSelected) {
+        scheduleSync();
+        setIsVisible(true);
+        setThisWasDragging(false);
+      } else {
+        setIsVisible(false);
+      }
+    });
+  }, [hover, indicativeHover, isSelected, isIframeEnabled, scheduleSync]);
+  const [thisWasDragging, setThisWasDragging] = useState2(false);
+  const onDragFinished = useOnDragFinished(
+    useCallback3(
+      (finished) => {
+        if (finished) {
+          startTransition(() => {
+            sync();
+            setDragFinished(true);
+          });
+        } else {
+          setDragFinished(false);
+        }
+      },
+      [sync, startTransition]
+    )
+  );
+  useEffect2(() => {
+    if (thisIsDragging) {
+      setThisWasDragging(true);
+    }
+  }, [thisIsDragging]);
+  useEffect2(() => {
+    if (thisWasDragging) return onDragFinished();
+  }, [thisWasDragging, onDragFinished]);
+  useEffect2(() => {
+    if (!dragFinished || !(isSelected || thisIsDragging)) return;
+    const el = ref.current;
+    if (!el) return;
+    const doc = el.ownerDocument;
+    const view = doc.defaultView;
+    if (!view) return;
+    lastMeasureRef.current = 0;
+    scheduleSync();
+    const onScroll = () => scheduleSync();
+    const onResize = () => scheduleSync();
+    doc.addEventListener("scroll", onScroll, true);
+    view.addEventListener("resize", onResize);
+    let frame = 0;
+    const tick = (t) => {
+      if (t - lastMeasureRef.current >= MEASURE_EVERY_MS) {
+        lastMeasureRef.current = t;
+        const node = ref.current;
+        if (node) {
+          const rect = node.getBoundingClientRect();
+          const prev = lastRectRef.current;
+          const changed = !prev || Math.abs(rect.x - prev.x) > 0.5 || Math.abs(rect.y - prev.y) > 0.5 || Math.abs(rect.width - prev.width) > 0.5 || Math.abs(rect.height - prev.height) > 0.5;
+          if (changed) {
+            lastRectRef.current = rect;
+            scheduleSync();
+          }
+        }
+      }
+      frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => {
+      doc.removeEventListener("scroll", onScroll, true);
+      view.removeEventListener("resize", onResize);
+      cancelAnimationFrame(frame);
+    };
+  }, [dragFinished, isSelected, thisIsDragging, scheduleSync]);
+  const syncActionsPosition = useCallback3(
+    (el) => {
+      if (el) {
+        const view = el.ownerDocument.defaultView;
+        if (view) {
+          const rect = el.getBoundingClientRect();
+          const diffLeft = rect.x;
+          const exceedsBoundsLeft = diffLeft < 0;
+          const diffTop = rect.y;
+          const exceedsBoundsTop = diffTop < 0;
+          if (exceedsBoundsLeft) {
+            el.style.transformOrigin = "left top";
+            el.style.left = "0px";
+          }
+          if (exceedsBoundsTop) {
+            el.style.top = "12px";
+            if (!exceedsBoundsLeft) {
+              el.style.transformOrigin = "right top";
+            }
+          }
+        }
+      }
+    },
+    []
+  );
+  useEffect2(() => {
+    if (userDragAxis) {
+      setDragAxis(userDragAxis);
+      return;
+    }
+    if (ref.current) {
+      const computedStyle = window.getComputedStyle(ref.current);
+      if (computedStyle.display === "inline" || computedStyle.display === "inline-block") {
+        setDragAxis("x");
+        return;
+      }
+    }
+    setDragAxis(autoDragAxis);
+  }, [ref, userDragAxis, autoDragAxis]);
+  const parentAction = useMemo3(
+    () => ctx?.areaId && ctx?.areaId !== "root" && /* @__PURE__ */ jsx6(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ jsx6(CornerLeftUp, { size: 16 }) }),
+    [ctx?.areaId, onSelectParent]
+  );
+  const nextContextValue = useMemo3(
+    () => ({
+      ...ctx,
+      areaId: id,
+      zoneCompound,
+      index,
+      depth: depth + 1,
+      registerLocalZone,
+      unregisterLocalZone
+    }),
+    [
+      ctx,
+      id,
+      zoneCompound,
+      index,
+      depth,
+      registerLocalZone,
+      unregisterLocalZone
+    ]
+  );
+  const richText = useAppStore(
+    (s) => s.currentRichText?.inlineComponentId === id ? s.currentRichText : null
+  );
+  const hasNormalActions = permissions.duplicate || permissions.delete;
+  return /* @__PURE__ */ jsxs5(DropZoneProvider, { value: nextContextValue, children: [
+    dragFinished && isVisible && createPortal(
+      /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          className: getClassName2({
+            isSelected,
+            isDragging: thisIsDragging,
+            hover: hover || indicativeHover
+          }),
+          style: { ...style },
+          "data-credbuild-overlay": true,
+          children: [
+            debug,
+            isLoading && /* @__PURE__ */ jsx6("div", { className: getClassName2("loadingOverlay"), children: /* @__PURE__ */ jsx6(Loader, {}) }),
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                className: getClassName2("actionsOverlay"),
+                style: {
+                  top: actionsOverlayTop / zoom
+                },
+                children: /* @__PURE__ */ jsx6(
+                  "div",
+                  {
+                    className: getClassName2("actions"),
+                    style: {
+                      transform: `scale(${1 / zoom}`,
+                      top: actionsTop / zoom,
+                      right: 0,
+                      paddingLeft: actionsSide,
+                      paddingRight: actionsSide
+                    },
+                    ref: syncActionsPosition,
+                    children: /* @__PURE__ */ jsxs5(
+                      CustomActionBar,
+                      {
+                        parentAction,
+                        label: DEBUG ? id : label,
+                        children: [
+                          richText && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                            /* @__PURE__ */ jsx6(
+                              LoadedRichTextMenu,
+                              {
+                                editor: richText.editor,
+                                field: richText.field,
+                                inline: true,
+                                readOnly: false
+                              }
+                            ),
+                            hasNormalActions && /* @__PURE__ */ jsx6(ActionBar.Separator, {})
+                          ] }),
+                          permissions.duplicate && /* @__PURE__ */ jsx6(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx6(Copy, { size: 16 }) }),
+                          permissions.delete && /* @__PURE__ */ jsx6(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx6(Trash, { size: 16 }) })
+                        ]
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx6("div", { className: getClassName2("overlayWrapper"), children: /* @__PURE__ */ jsx6(
+              CustomOverlay,
+              {
+                componentId: id,
+                componentType,
+                hover,
+                isSelected,
+                children: /* @__PURE__ */ jsx6("div", { className: getClassName2("overlay") })
+              }
+            ) })
+          ]
+        }
+      ),
+      portalEl || document.body
+    ),
+    children(refSetter)
+  ] });
+};
+
+// css-module:/home/runner/work/credbuild/credbuild/components/DropZone/styles.module.css#css-module
+var styles_module_default4 = { "DropZone": "_DropZone_1vmgt_1", "DropZone--hasChildren": "_DropZone--hasChildren_1vmgt_11", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_1vmgt_24", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_1vmgt_25", "DropZone--isRootZone": "_DropZone--isRootZone_1vmgt_25", "DropZone--isDestination": "_DropZone--isDestination_1vmgt_35", "DropZone-item": "_DropZone-item_1vmgt_47", "DropZone-hitbox": "_DropZone-hitbox_1vmgt_51", "DropZone--isEnabled": "_DropZone--isEnabled_1vmgt_59", "DropZone--isAnimating": "_DropZone--isAnimating_1vmgt_68" };
+
+// components/DropZone/index.tsx
+import { useDroppable as useDroppable2 } from "@dnd-kit/react";
+import { pointerIntersection } from "@dnd-kit/collision";
+
+// components/DropZone/lib/use-min-empty-height.ts
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+var getNumItems = (appStore, zoneCompound) => appStore.getState().state.indexes.zones[zoneCompound].contentIds.length;
+var useMinEmptyHeight = ({
+  zoneCompound,
+  userMinEmptyHeight,
+  ref
+}) => {
+  const appStore = useAppStoreApi();
+  const [prevHeight, setPrevHeight] = useState3(0);
+  const [isAnimating, setIsAnimating] = useState3(false);
+  const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
+    return {
+      draggedItem: s.draggedItem?.data.zone === zoneCompound ? s.draggedItem : null,
+      isZone: s.draggedItem?.data.zone === zoneCompound
+    };
+  });
+  const numItems = useRef3(0);
+  const onDragFinished = useOnDragFinished(
+    useCallback4(
+      (finished) => {
+        if (finished) {
+          const newNumItems = getNumItems(appStore, zoneCompound);
+          setPrevHeight(0);
+          if (newNumItems || numItems.current === 0) {
+            setIsAnimating(false);
+            return;
+          }
+          const selectedItem = appStore.getState().selectedItem;
+          const zones = appStore.getState().state.indexes.zones;
+          const nodes = appStore.getState().nodes;
+          nodes.setOverlayVisible(selectedItem?.props.id, false);
+          setTimeout(() => {
+            const contentIds = zones[zoneCompound]?.contentIds || [];
+            nodes.syncNodes(contentIds);
+            if (selectedItem) {
+              setTimeout(() => {
+                nodes.syncNode(selectedItem.props.id);
+                nodes.setOverlayVisible(selectedItem.props.id, true);
+              }, 200);
+            }
+            setIsAnimating(false);
+          }, 100);
+        }
+      },
+      [appStore, zoneCompound]
+    )
+  );
+  useEffect3(() => {
+    if (draggedItem && ref.current) {
+      if (isZone) {
+        const rect = ref.current.getBoundingClientRect();
+        numItems.current = getNumItems(appStore, zoneCompound);
+        setPrevHeight(rect.height);
+        setIsAnimating(true);
+        return onDragFinished();
+      }
+    }
+  }, [ref, draggedItem, onDragFinished, appStore, isZone, zoneCompound]);
+  const returnedMinHeight = isNaN(Number(userMinEmptyHeight)) ? userMinEmptyHeight : `${userMinEmptyHeight}px`;
+  return [prevHeight ? `${prevHeight}px` : returnedMinHeight, isAnimating];
+};
+
+// components/DropZone/lib/use-content-with-preview.ts
+import { useCallback as useCallback6, useContext as useContext3, useEffect as useEffect4, useState as useState4 } from "react";
+
+// lib/dnd/use-rendered-callback.ts
+import { useDragDropManager } from "@dnd-kit/react";
+import { useCallback as useCallback5 } from "react";
+function useRenderedCallback(callback, _deps = []) {
+  const manager = useDragDropManager();
+  return useCallback5(
+    async (...args) => {
+      await manager?.renderer.rendering;
+      return callback(...args);
+    },
+    [manager, callback]
+  );
+}
+
+// components/DropZone/lib/use-content-with-preview.ts
+var useContentIdsWithPreview = (contentIds, zoneCompound) => {
+  const zoneStore = useContext3(ZoneStoreContext);
+  const preview = useContextStore(
+    ZoneStoreContext,
+    (s) => s.previewIndex[zoneCompound]
+  );
+  const isDragging = useAppStore((s) => s.state.ui.isDragging);
+  const [contentIdsWithPreview, setContentIdsWithPreview] = useState4(contentIds);
+  const [localPreview, setLocalPreview] = useState4(
+    preview
+  );
+  const updateContent = useRenderedCallback(
+    useCallback6(
+      (contentIds2, preview2, isDragging2, draggedItemId, previewExists) => {
+        if (isDragging2 && !previewExists) {
+          return;
+        }
+        if (preview2) {
+          if (preview2.type === "insert") {
+            setContentIdsWithPreview(
+              insert(
+                contentIds2.filter((id) => id !== preview2.props.id),
+                preview2.index,
+                preview2.props.id
+              )
+            );
+          } else {
+            setContentIdsWithPreview(
+              insert(
+                contentIds2.filter((id) => id !== preview2.props.id),
+                preview2.index,
+                preview2.props.id
+              )
+            );
+          }
+        } else {
+          setContentIdsWithPreview(
+            previewExists ? contentIds2.filter((id) => id !== draggedItemId) : contentIds2
+          );
+        }
+        setLocalPreview(preview2);
+      },
+      []
+    )
+  );
+  useEffect4(() => {
+    const s = zoneStore.getState();
+    const draggedItemId = s.draggedItem?.id;
+    const previewExists = Object.keys(s.previewIndex || {}).length > 0;
+    updateContent(
+      contentIds,
+      preview,
+      isDragging,
+      draggedItemId,
+      previewExists
+    );
+  }, [contentIds, preview, isDragging, updateContent, zoneStore]);
+  return [contentIdsWithPreview, localPreview];
+};
+
+// components/DropZone/lib/use-drag-axis.ts
+import { useCallback as useCallback7, useEffect as useEffect5, useState as useState5 } from "react";
+var GRID_DRAG_AXIS = "dynamic";
+var FLEX_ROW_DRAG_AXIS = "x";
+var DEFAULT_DRAG_AXIS = "y";
+var useDragAxis = (ref, collisionAxis) => {
+  const status = useAppStore((s) => s.status);
+  const [dragAxis, setDragAxis] = useState5(
+    collisionAxis || DEFAULT_DRAG_AXIS
+  );
+  const calculateDragAxis = useCallback7(() => {
+    if (ref.current) {
+      const computedStyle = window.getComputedStyle(ref.current);
+      if (computedStyle.display === "grid") {
+        setDragAxis(GRID_DRAG_AXIS);
+      } else if (computedStyle.display === "flex" && computedStyle.flexDirection === "row") {
+        setDragAxis(FLEX_ROW_DRAG_AXIS);
+      } else {
+        setDragAxis(DEFAULT_DRAG_AXIS);
+      }
+    }
+  }, [ref]);
+  useEffect5(() => {
+    const onViewportChange = () => {
+      calculateDragAxis();
+    };
+    window.addEventListener("viewportchange", onViewportChange);
+    return () => {
+      window.removeEventListener("viewportchange", onViewportChange);
+    };
+  }, [calculateDragAxis]);
+  useEffect5(calculateDragAxis, [status, collisionAxis, calculateDragAxis]);
+  return [dragAxis, calculateDragAxis];
+};
+
+// components/DropZone/index.tsx
+import { useShallow as useShallow3 } from "zustand/react/shallow";
+
+// components/Render/context.tsx
+import React2 from "react";
+var renderContext = React2.createContext({
+  config: { components: {} },
+  data: { root: {}, content: [] },
+  metadata: {}
+});
+
+// lib/field-transforms/use-field-transforms.tsx
+import { useMemo as useMemo4 } from "react";
+
+// lib/field-transforms/build-mappers.ts
+function buildMappers(transforms, readOnly, forceReadOnly) {
+  return Object.keys(transforms).reduce((acc, _fieldType) => {
+    const fieldType = _fieldType;
+    return {
+      ...acc,
+      [fieldType]: ({
+        parentId,
+        ...params
+      }) => {
+        const wildcardPath = params.propPath.replace(/\[\d+\]/g, "[*]");
+        const isReadOnly = readOnly?.[params.propPath] || readOnly?.[wildcardPath] || forceReadOnly || false;
+        const fn = transforms[fieldType];
+        return fn?.({
+          ...params,
+          isReadOnly,
+          componentId: parentId
+        });
+      }
+    };
+  }, {});
+}
+
+// lib/field-transforms/use-field-transforms.tsx
+function useFieldTransforms(config, item, transforms, readOnly, forceReadOnly) {
+  const mappers = useMemo4(
+    () => buildMappers(transforms, readOnly, forceReadOnly),
+    [transforms, readOnly, forceReadOnly]
+  );
+  const transformedProps = useMemo4(() => {
+    return mapFields(item, mappers, config).props;
+  }, [config, item, mappers]);
+  const mergedProps = useMemo4(
+    () => ({ ...item.props, ...transformedProps }),
+    [item.props, transformedProps]
+  );
+  return mergedProps;
+}
+
+// lib/field-transforms/default-transforms/slot-transform.tsx
+var getSlotTransform = (renderSlotEdit, renderSlotRender = renderSlotEdit) => ({
+  slot: ({ value: content, propName, field, isReadOnly }) => {
+    const render = isReadOnly ? renderSlotRender : renderSlotEdit;
+    const Slot = (dzProps) => render({
+      allow: field?.type === "slot" ? field.allow : [],
+      disallow: field?.type === "slot" ? field.disallow : [],
+      ...dzProps,
+      zone: propName,
+      content
+    });
+    return Slot;
+  }
+});
+
+// lib/use-slots.tsx
+function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
+  return useFieldTransforms(
+    config,
+    item,
+    getSlotTransform(renderSlotEdit, renderSlotRender),
+    readOnly,
+    forceReadOnly
+  );
+}
+
+// components/SlotRender/index.tsx
+import { useShallow as useShallow2 } from "zustand/react/shallow";
+
+// components/SlotRender/server.tsx
+import { forwardRef } from "react";
+
+// components/RichTextEditor/lib/use-richtext-props.tsx
+import { lazy, Suspense, useMemo as useMemo5 } from "react";
+
+// components/RichTextEditor/components/RenderFallback.tsx
+import DOMPurify from "isomorphic-dompurify";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var getClassName3 = get_class_name_factory_default("RichTextEditor", styles_module_default);
+function RichTextRenderFallback({ content }) {
+  return /* @__PURE__ */ jsx7("div", { className: getClassName3(), children: /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: "rich-text",
+      dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(content) }
+    }
+  ) });
+}
+
+// components/RichTextEditor/lib/mapDeep.ts
+var mapDeep = (source, path, render) => {
+  if (!source) {
+    return null;
+  }
+  if (path.length === 0) {
+    return render(source);
+  }
+  const [key, ...rest] = path;
+  if (Array.isArray(source)) {
+    return source.map((item) => mapDeep(item, path, render));
+  }
+  return {
+    ...source,
+    [key]: mapDeep(source[key], rest, render)
+  };
+};
+
+// components/RichTextEditor/lib/use-richtext-props.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var findAllRichtextKeys = (fields, path = []) => {
+  if (!fields) return [];
+  const result = [];
+  for (const [key, field] of Object.entries(fields)) {
+    const currentPath = [...path, key];
+    if (field.type === "richtext") {
+      result.push({
+        path: currentPath,
+        field
+      });
+    }
+    if (field.type === "array" && "arrayFields" in field) {
+      result.push(...findAllRichtextKeys(field.arrayFields, currentPath));
+    }
+    if (field.type === "object" && "objectFields" in field) {
+      result.push(...findAllRichtextKeys(field.objectFields, currentPath));
+    }
+  }
+  return result;
+};
+function useRichtextProps(fields, props) {
+  const richtextKeys = useMemo5(() => findAllRichtextKeys(fields), [fields]);
+  const richtextProps = useMemo5(() => {
+    if (!richtextKeys?.length) return {};
+    const RichTextRender2 = lazy(
+      () => import("./Render-I6PZ5MEA.mjs").then((m) => ({
+        default: m.RichTextRender
+      }))
+    );
+    let result = { ...props };
+    for (const { path, field } of richtextKeys) {
+      result = mapDeep(result, path, (content) => /* @__PURE__ */ jsx8(
+        Suspense,
+        {
+          fallback: /* @__PURE__ */ jsx8(RichTextRenderFallback, { content }),
+          children: /* @__PURE__ */ jsx8(RichTextRender2, { content, field })
+        },
+        generateId()
+      ));
+    }
+    return result;
+  }, [richtextKeys, props]);
+  return richtextProps;
+}
+
+// components/SlotRender/server.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var SlotRenderPure = (props) => /* @__PURE__ */ jsx9(SlotRender, { ...props });
+var Item = ({
+  config,
+  item,
+  metadata
+}) => {
+  const Component = config.components[item.type];
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx9(SlotRenderPure, { ...slotProps, config, metadata }));
+  const richtextProps = useRichtextProps(Component.fields, props);
+  return /* @__PURE__ */ jsx9(
+    Component.render,
+    {
+      ...props,
+      ...richtextProps,
+      credbuild: {
+        ...props.credbuild,
+        metadata: metadata || {}
+      }
+    }
+  );
+};
+var SlotRender = forwardRef(
+  function SlotRenderInternal({ className, style, content, config, metadata, as }, ref) {
+    const El = as ?? "div";
+    return /* @__PURE__ */ jsx9(El, { className, style, ref, children: content.map((item) => {
+      if (!config.components[item.type]) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx9(
+        Item,
+        {
+          config,
+          item,
+          metadata
+        },
+        item.props.id
+      );
+    }) });
+  }
+);
+
+// components/SlotRender/index.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var ContextSlotRender = ({
+  componentId,
+  zone
+}) => {
+  const config = useAppStore((s) => s.config);
+  const metadata = useAppStore((s) => s.metadata);
+  const slotContent = useAppStore(
+    useShallow2((s) => {
+      const indexes = s.state.indexes;
+      const contentIds = indexes.zones[`${componentId}:${zone}`]?.contentIds ?? [];
+      return contentIds.map((contentId) => indexes.nodes[contentId].flatData);
+    })
+  );
+  return /* @__PURE__ */ jsx10(
+    SlotRenderPure,
+    {
+      content: slotContent,
+      zone,
+      config,
+      metadata
+    }
+  );
+};
+
+// lib/field-transforms/use-field-transforms-tracked.tsx
+import { useMemo as useMemo6, useRef as useRef4 } from "react";
+function useFieldTransformsTracked(config, item, transforms, readOnly, forceReadOnly) {
+  const prevProps = useRef4(null);
+  const prevResult = useRef4(item.props);
+  const mappers = useMemo6(
+    () => buildMappers(transforms, readOnly, forceReadOnly),
+    [transforms, readOnly, forceReadOnly]
+  );
+  const transformedProps = useMemo6(() => {
+    const changedProps = {};
+    const componentConfig = item.type === "root" ? config.root : config.components?.[item.type];
+    let changeIncludesSlot = false;
+    for (const fieldName in item.props) {
+      const fieldType = componentConfig?.fields?.[fieldName]?.type;
+      if (!prevProps.current || item.props[fieldName] !== prevProps.current[fieldName]) {
+        changedProps[fieldName] = item.props[fieldName];
+        if (fieldType === "slot") {
+          changeIncludesSlot = true;
+        }
+      }
+    }
+    changedProps.id = item.props.id;
+    prevProps.current = item.props;
+    const mapped = mapFields(
+      { ...item, props: changedProps },
+      mappers,
+      config,
+      false,
+      changeIncludesSlot
+    ).props;
+    prevResult.current = { ...prevResult.current, ...mapped };
+    return prevResult.current;
+  }, [config, item, mappers]);
+  const mergedProps = useMemo6(
+    () => ({ ...item.props, ...transformedProps }),
+    [item.props, transformedProps]
+  );
+  return mergedProps;
+}
+
+// components/InlineTextField/index.tsx
+import { memo, useEffect as useEffect6, useRef as useRef5, useState as useState6 } from "react";
+
+// css-module:/home/runner/work/credbuild/credbuild/components/InlineTextField/styles.module.css#css-module
+var styles_module_default5 = { "InlineTextField": "_InlineTextField_104qp_1" };
+
+// lib/get-selector-for-id.ts
+var getSelectorForId = (state, id) => {
+  const node = state.indexes.nodes[id];
+  if (!node) return;
+  const zoneCompound = `${node.parentId}:${node.zone}`;
+  const index = state.indexes.zones[zoneCompound].contentIds.indexOf(id);
+  return { zone: zoneCompound, index };
+};
+
+// components/InlineTextField/index.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var getClassName4 = get_class_name_factory_default("InlineTextField", styles_module_default5);
+var InlineTextFieldInternal = ({
+  propPath,
+  componentId,
+  value,
+  isReadOnly,
+  opts = {}
+}) => {
+  const ref = useRef5(null);
+  const appStoreApi = useAppStoreApi();
+  const disableLineBreaks = opts.disableLineBreaks ?? false;
+  useEffect6(() => {
+    const appStore = appStoreApi.getState();
+    const data = appStore.state.indexes.nodes[componentId].data;
+    const componentConfig = appStore.getComponentConfig(data.type);
+    if (!componentConfig) {
+      throw new Error(
+        `InlineTextField Error: No config defined for ${data.type}`
+      );
+    }
+    if (ref.current) {
+      if (value !== ref.current.innerText) {
+        ref.current.replaceChildren(value);
+      }
+      const cleanupPortal = registerOverlayPortal(ref.current);
+      const handleInput = async (e) => {
+        const appStore2 = appStoreApi.getState();
+        const node = appStore2.state.indexes.nodes[componentId];
+        const zoneCompound = `${node.parentId}:${node.zone}`;
+        const index = appStore2.state.indexes.zones[zoneCompound]?.contentIds.indexOf(
+          componentId
+        );
+        let value2 = e.target.innerText;
+        if (disableLineBreaks) {
+          value2 = value2.replaceAll(/\n/gm, "");
+        }
+        const newProps = setDeep(node.data.props, propPath, value2);
+        const resolvedData = await appStore2.resolveComponentData(
+          { ...node.data, props: newProps },
+          "replace"
+        );
+        appStore2.dispatch({
+          type: "replace",
+          data: resolvedData.node,
+          destinationIndex: index,
+          destinationZone: zoneCompound
+        });
+      };
+      const el = ref.current;
+      el.addEventListener("input", handleInput);
+      return () => {
+        el.removeEventListener("input", handleInput);
+        cleanupPortal?.();
+      };
+    }
+  }, [appStoreApi, ref, value, disableLineBreaks, componentId, propPath]);
+  const [isHovering, setIsHovering] = useState6(false);
+  const [isFocused, setIsFocused] = useState6(false);
+  return /* @__PURE__ */ jsx11(
+    "span",
+    {
+      className: getClassName4(),
+      ref,
+      contentEditable: isHovering || isFocused ? "plaintext-only" : "false",
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      onClickCapture: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const itemSelector = getSelectorForId(
+          appStoreApi.getState().state,
+          componentId
+        );
+        appStoreApi.getState().setUi({ itemSelector });
+      },
+      onKeyDown: (e) => {
+        e.stopPropagation();
+        if (disableLineBreaks && e.key === "Enter" || isReadOnly) {
+          e.preventDefault();
+        }
+      },
+      onKeyUp: (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      },
+      onMouseOverCapture: () => setIsHovering(true),
+      onMouseOutCapture: () => setIsHovering(false),
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false)
+    }
+  );
+};
+var InlineTextField = memo(InlineTextFieldInternal);
+
+// lib/field-transforms/default-transforms/inline-text-transform.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var getInlineTextTransform = () => ({
+  text: ({ value, componentId, field, propPath, isReadOnly }) => {
+    if (field.contentEditable) {
+      return /* @__PURE__ */ jsx12(
+        InlineTextField,
+        {
+          propPath,
+          componentId,
+          value,
+          opts: { disableLineBreaks: true },
+          isReadOnly
+        }
+      );
+    }
+    return value;
+  },
+  textarea: ({ value, componentId, field, propPath, isReadOnly }) => {
+    if (field.contentEditable) {
+      return /* @__PURE__ */ jsx12(
+        InlineTextField,
+        {
+          propPath,
+          componentId,
+          value,
+          isReadOnly
+        }
+      );
+    }
+    return value;
+  },
+  custom: ({ value, componentId, field, propPath, isReadOnly }) => {
+    if (field.contentEditable && typeof value === "string") {
+      return /* @__PURE__ */ jsx12(
+        InlineTextField,
+        {
+          propPath,
+          componentId,
+          value,
+          isReadOnly
+        }
+      );
+    }
+    return value;
+  }
+});
+
+// lib/field-transforms/default-transforms/rich-text-transform.tsx
+import {
+  useEffect as useEffect7,
+  useRef as useRef6,
+  useCallback as useCallback8,
+  memo as memo2,
+  lazy as lazy2,
+  Suspense as Suspense2
+} from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Editor = lazy2(
+  () => import("./Editor-P3UUWNSZ.mjs").then((m) => ({
+    default: m.Editor
+  }))
+);
+var RichTextRender = lazy2(
+  () => import("./Render-I6PZ5MEA.mjs").then((m) => ({
+    default: m.RichTextRender
+  }))
+);
+var InlineEditorWrapper = memo2(
+  ({
+    value,
+    componentId,
+    propPath,
+    field,
+    id
+  }) => {
+    const portalRef = useRef6(null);
+    const appStoreApi = useAppStoreApi();
+    const onClickHandler = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    const onClickCaptureHandler = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const itemSelector = getSelectorForId(
+        appStoreApi.getState().state,
+        componentId
+      );
+      appStoreApi.getState().setUi({ itemSelector });
+    };
+    useEffect7(() => {
+      if (!portalRef.current) return;
+      const cleanup = registerOverlayPortal(portalRef.current, {
+        disableDragOnFocus: true
+      });
+      return () => cleanup?.();
+    }, []);
+    const handleChange = useCallback8(
+      async (content, ui) => {
+        const appStore = appStoreApi.getState();
+        const node = appStore.state.indexes.nodes[componentId];
+        const zoneCompound = `${node.parentId}:${node.zone}`;
+        const index = appStore.state.indexes.zones[zoneCompound]?.contentIds.indexOf(
+          componentId
+        );
+        const newProps = setDeep(node.data.props, propPath, content);
+        const resolvedData = await appStore.resolveComponentData(
+          { ...node.data, props: newProps },
+          "replace"
+        );
+        appStore.dispatch({
+          type: "replace",
+          data: resolvedData.node,
+          destinationIndex: index,
+          destinationZone: zoneCompound,
+          ui
+        });
+      },
+      [appStoreApi, componentId, propPath]
+    );
+    const handleFocus = useCallback8(
+      (editor) => {
+        appStoreApi.setState({
+          currentRichText: {
+            inlineComponentId: componentId,
+            inline: true,
+            field,
+            editor,
+            id
+          }
+        });
+      },
+      [field, componentId, appStoreApi, id]
+    );
+    if (!field.contentEditable)
+      return /* @__PURE__ */ jsx13(Suspense2, { fallback: /* @__PURE__ */ jsx13(RichTextRenderFallback, { content: value }), children: /* @__PURE__ */ jsx13(RichTextRender, { content: value, field }) });
+    const editorProps = {
+      content: value,
+      onChange: handleChange,
+      field,
+      inline: true,
+      onFocus: handleFocus,
+      id,
+      name: propPath
+    };
+    return /* @__PURE__ */ jsx13(
+      "div",
+      {
+        ref: portalRef,
+        onClick: onClickHandler,
+        onClickCapture: onClickCaptureHandler,
+        children: /* @__PURE__ */ jsx13(Suspense2, { fallback: /* @__PURE__ */ jsx13(EditorFallback, { ...editorProps }), children: /* @__PURE__ */ jsx13(Editor, { ...editorProps }) })
+      }
+    );
+  }
+);
+InlineEditorWrapper.displayName = "InlineEditorWrapper";
+var getRichTextTransform = () => ({
+  richtext: ({ value, componentId, field, propPath, isReadOnly }) => {
+    const { contentEditable = true, tiptap } = field;
+    if (contentEditable === false || isReadOnly) {
+      return /* @__PURE__ */ jsx13(RichTextRender, { content: value, field });
+    }
+    const id = `${componentId}_${field.type}_${propPath}`;
+    return /* @__PURE__ */ jsx13(
+      InlineEditorWrapper,
+      {
+        value,
+        componentId,
+        propPath,
+        field,
+        id
+      },
+      id
+    );
+  }
+});
+
+// components/MemoizeComponent/index.tsx
+import { deepEqual } from "fast-equals";
+import { memo as memo3 } from "react";
+
+// lib/shallow-equal.ts
+function shallowEqual(obj1, obj2, keysToIgnore = []) {
+  if (Object.is(obj1, obj2)) return true;
+  if (typeof obj1 !== "object" || obj1 === null || typeof obj2 !== "object" || obj2 === null) {
+    return false;
+  }
+  if (Object.getPrototypeOf(obj1) !== Object.getPrototypeOf(obj2)) {
+    return false;
+  }
+  const ignore = new Set(keysToIgnore);
+  const keys1 = Object.keys(obj1).filter((k) => !ignore.has(k));
+  const keys2 = Object.keys(obj2).filter((k) => !ignore.has(k));
+  if (keys1.length !== keys2.length) return false;
+  for (let i = 0; i < keys1.length; i++) {
+    const currKey = keys1[i];
+    if (!Object.prototype.hasOwnProperty.call(obj2, currKey)) return false;
+    const val1 = obj1[currKey];
+    const val2 = obj2[currKey];
+    if (!Object.is(val1, val2)) return false;
+  }
+  return true;
+}
+
+// components/MemoizeComponent/index.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var RenderComponent = ({
+  Component,
+  componentProps: renderProps
+}) => {
+  return /* @__PURE__ */ jsx14(Component, { ...renderProps });
+};
+var MemoizeComponent = memo3(RenderComponent, (prev, next) => {
+  let credbuildEquals = true;
+  if ("credbuild" in prev.componentProps && "credbuild" in next.componentProps) {
+    credbuildEquals = deepEqual(prev.componentProps.credbuild, next.componentProps.credbuild);
+  }
+  return prev.Component === next.Component && shallowEqual(prev.componentProps, next.componentProps, ["credbuild"]) && credbuildEquals;
+});
+
+// components/DropZone/VirtualizedDropZone.tsx
+import {
+  useCallback as useCallback9,
+  useContext as useContext4,
+  useEffect as useEffect8,
+  useMemo as useMemo7,
+  useRef as useRef7
+} from "react";
+import {
+  defaultRangeExtractor,
+  elementScroll,
+  observeElementOffset,
+  observeElementRect,
+  observeWindowOffset,
+  observeWindowRect,
+  useVirtualizer,
+  windowScroll
+} from "@tanstack/react-virtual";
+
+// lib/get-frame.ts
+var getFrame = () => {
+  if (typeof window === "undefined") return;
+  let frameEl = document.querySelector("#preview-frame");
+  if (frameEl?.tagName === "IFRAME") {
+    return frameEl.contentDocument || document;
+  }
+  return frameEl?.ownerDocument || document;
+};
+
+// components/DropZone/VirtualizedDropZone.tsx
+import { Fragment as Fragment3, jsx as jsx15 } from "react/jsx-runtime";
+var ROOT_ZONE_VIRTUALIZATION_OVERSCAN = 5;
+var DEFAULT_VIRTUALIZED_ITEM_HEIGHT = 320;
+var measuredItemHeights = /* @__PURE__ */ new Map();
+var getEstimatedItemHeight = (componentId) => measuredItemHeights.get(componentId) ?? DEFAULT_VIRTUALIZED_ITEM_HEIGHT;
+var cacheMeasuredItemHeight = (componentId, height) => {
+  if (height <= 0) {
+    return;
+  }
+  measuredItemHeights.set(componentId, height);
+};
+var VirtualizedDropZone = ({
+  contentIds,
+  zoneCompound,
+  renderItem
+}) => {
+  const selectedId = useAppStore((s) => s.selectedItem?.props.id ?? null);
+  const frame = getFrame();
+  const zoneStore = useContext4(ZoneStoreContext);
+  const draggedItemId = useContextStore(ZoneStoreContext, (s) => {
+    const draggedId = s.draggedItem?.id;
+    return draggedId ? String(draggedId) : null;
+  });
+  const dragTargetParentId = useContextStore(ZoneStoreContext, (s) => {
+    if (s.draggedItem?.id) {
+      const parentZone = Object.keys(s.previewIndex ?? {})[0];
+      return parentZone?.split(":")[0];
+    }
+    return null;
+  });
+  const iframeWindow = frame?.defaultView;
+  const measureRefsRef = useRef7(/* @__PURE__ */ new Map());
+  const appStoreApi = useAppStoreApi();
+  const resolveIndex = useCallback9(
+    (targetId) => {
+      if (!targetId || targetId === "root") {
+        return -1;
+      }
+      const directIndex = contentIds.indexOf(targetId);
+      if (directIndex > -1) {
+        return directIndex;
+      }
+      const path = appStoreApi.getState().state.indexes.nodes?.[targetId]?.path ?? [];
+      for (let i = path.length - 1; i >= 0; i -= 1) {
+        const candidateId = path[i]?.split(":")[0];
+        if (!candidateId || candidateId === "root") {
+          continue;
+        }
+        const index = contentIds.indexOf(candidateId);
+        if (index > -1) {
+          return index;
+        }
+      }
+      return -1;
+    },
+    [appStoreApi, contentIds]
+  );
+  const pinnedIndexes = useMemo7(() => {
+    const nextPinnedIndexes = /* @__PURE__ */ new Set();
+    [selectedId, draggedItemId, dragTargetParentId].forEach((targetId) => {
+      const currentIndex = resolveIndex(targetId);
+      if (currentIndex > -1) {
+        nextPinnedIndexes.add(currentIndex);
+      }
+    });
+    return Array.from(nextPinnedIndexes).sort((a, b) => a - b);
+  }, [dragTargetParentId, draggedItemId, resolveIndex, selectedId]);
+  const rangeExtractor = useCallback9(
+    (range) => {
+      const indexes = defaultRangeExtractor(range);
+      pinnedIndexes.forEach((index) => {
+        if (!indexes.includes(index)) {
+          indexes.push(index);
+        }
+      });
+      indexes.sort((a, b) => a - b);
+      return indexes;
+    },
+    [pinnedIndexes]
+  );
+  const activeOverscan = draggedItemId ? 12 : ROOT_ZONE_VIRTUALIZATION_OVERSCAN;
+  const virtualizer = useVirtualizer({
+    count: contentIds.length,
+    getItemKey: (index) => contentIds[index],
+    estimateSize: (index) => getEstimatedItemHeight(contentIds[index]),
+    getScrollElement: () => iframeWindow ?? null,
+    overscan: activeOverscan,
+    observeElementRect: (instance, cb) => iframeWindow ? observeWindowRect(instance, cb) : observeElementRect(instance, cb),
+    observeElementOffset: (instance, cb) => iframeWindow ? observeWindowOffset(instance, cb) : observeElementOffset(instance, cb),
+    scrollToFn: (offset, options, instance) => iframeWindow ? windowScroll(offset, options, instance) : elementScroll(offset, options, instance),
+    rangeExtractor,
+    initialOffset: () => iframeWindow ? iframeWindow.scrollY : 0
+  });
+  useEffect8(() => {
+    zoneStore.getState().registerRootVirtualizer(zoneCompound, {
+      resolveIndex: (targetId) => resolveIndex(targetId),
+      virtualizer
+    });
+    return () => {
+      zoneStore.getState().unregisterRootVirtualizer(zoneCompound);
+    };
+  }, [resolveIndex, virtualizer, zoneCompound, zoneStore]);
+  const observersRef = useRef7(/* @__PURE__ */ new Map());
+  const getMeasureRef = useCallback9((componentId) => {
+    const cachedRef = measureRefsRef.current.get(componentId);
+    if (cachedRef) {
+      return cachedRef;
+    }
+    const measureRef = (element) => {
+      const existingObserver = observersRef.current.get(componentId);
+      if (existingObserver) {
+        existingObserver.disconnect();
+        observersRef.current.delete(componentId);
+      }
+      if (!element) {
+        return;
+      }
+      const initialHeight = Math.ceil(element.getBoundingClientRect().height);
+      if (initialHeight > 0) {
+        cacheMeasuredItemHeight(componentId, initialHeight);
+      }
+      const observer = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const height = Math.ceil(element.getBoundingClientRect().height);
+          if (height > 0) {
+            const cachedHeight = getEstimatedItemHeight(componentId);
+            if (height !== cachedHeight) {
+              cacheMeasuredItemHeight(componentId, height);
+              virtualizer.measure();
+            }
+          }
+        }
+      });
+      observer.observe(element);
+      observersRef.current.set(componentId, observer);
+    };
+    measureRefsRef.current.set(componentId, measureRef);
+    return measureRef;
+  }, [virtualizer]);
+  useEffect8(() => {
+    const validIds = new Set(contentIds);
+    Array.from(measureRefsRef.current.keys()).forEach((componentId) => {
+      if (!validIds.has(componentId)) {
+        measureRefsRef.current.delete(componentId);
+        const observer = observersRef.current.get(componentId);
+        if (observer) {
+          observer.disconnect();
+          observersRef.current.delete(componentId);
+        }
+      }
+    });
+  }, [contentIds]);
+  useEffect8(() => {
+    return () => {
+      observersRef.current.forEach((observer) => observer.disconnect());
+      observersRef.current.clear();
+    };
+  }, []);
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const renderedItems = useMemo7(() => {
+    const items = [];
+    let previousEnd = 0;
+    let previousIndex = -1;
+    virtualItems.forEach((virtualItem) => {
+      if (!virtualItem) return;
+      const componentId = contentIds[virtualItem.index];
+      const gapSize = Math.max(virtualItem.start - previousEnd, 0);
+      if (gapSize > 0) {
+        items.push(
+          /* @__PURE__ */ jsx15(
+            "div",
+            {
+              style: { height: `${gapSize}px` }
+            },
+            `gap:${previousIndex}:${virtualItem.index}`
+          )
+        );
+      }
+      items.push(
+        renderItem({
+          componentId,
+          index: virtualItem.index,
+          measureRef: getMeasureRef(componentId)
+        })
+      );
+      previousEnd = virtualItem.end;
+      previousIndex = virtualItem.index;
+    });
+    const trailingGap = Math.max(totalSize - previousEnd, 0);
+    if (trailingGap > 0) {
+      items.push(
+        /* @__PURE__ */ jsx15(
+          "div",
+          {
+            style: { height: `${trailingGap}px` }
+          },
+          `gap:${previousIndex}:end`
+        )
+      );
+    }
+    return items;
+  }, [totalSize, virtualItems, getMeasureRef, contentIds, renderItem]);
+  return /* @__PURE__ */ jsx15(Fragment3, { children: renderedItems });
+};
+
+// components/DropZone/index.tsx
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+var getClassName5 = get_class_name_factory_default("DropZone", styles_module_default4);
+var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+var RENDER_DEBUG = false;
+var InsertPreview = ({
+  element,
+  label,
+  override
+}) => {
+  if (element) {
+    return (
+      // Safe to use this since the HTML is set by the user
+      /* @__PURE__ */ jsx16("div", { dangerouslySetInnerHTML: { __html: DOMPurify2.sanitize(element.outerHTML) } })
+    );
+  }
+  return /* @__PURE__ */ jsx16(DrawerItemInner, { name: label, children: override });
+};
+var DropZoneEditPure = (props) => /* @__PURE__ */ jsx16(DropZoneEdit, { ...props });
+var DropZoneChild = ({
+  zoneCompound,
+  componentId,
+  index,
+  dragAxis,
+  collisionAxis,
+  inDroppableZone,
+  itemRef
+}) => {
+  const metadata = useAppStore((s) => s.metadata);
+  const ctx = useContext5(dropZoneContext);
+  const { depth = 1 } = ctx ?? {};
+  const zoneStore = useContext5(ZoneStoreContext);
+  const nodeProps = useAppStore(
+    useShallow3((s) => {
+      return s.state.indexes.nodes[componentId]?.flatData.props;
+    })
+  );
+  const nodeType = useAppStore(
+    (s) => s.state.indexes.nodes[componentId]?.data.type
+  );
+  const nodeReadOnly = useAppStore(
+    useShallow3((s) => s.state.indexes.nodes[componentId]?.data.readOnly)
+  );
+  const appStore = useAppStoreApi();
+  const item = useMemo8(() => {
+    if (nodeProps) {
+      const expanded = expandNode({
+        type: nodeType,
+        props: nodeProps
+      });
+      return expanded;
+    }
+    const preview = zoneStore.getState().previewIndex[zoneCompound];
+    if (componentId === preview?.props.id) {
+      return {
+        type: preview.componentType,
+        props: preview.props,
+        previewType: preview.type,
+        element: preview.element
+      };
+    }
+    return null;
+  }, [componentId, zoneCompound, nodeType, nodeProps, zoneStore]);
+  const componentConfig = useAppStore(
+    (s) => item?.type ? s.config.components[item.type] : null
+  );
+  const credbuildProps = useMemo8(
+    () => ({
+      renderDropZone: DropZoneEditPure,
+      isEditing: true,
+      dragRef: null,
+      metadata: { ...metadata, ...componentConfig?.metadata }
+    }),
+    [metadata, componentConfig?.metadata]
+  );
+  const overrides = useAppStore((s) => s.overrides);
+  const isLoading = useAppStore(
+    (s) => s.componentState[componentId]?.loadingCount > 0
+  );
+  const isSelected = useAppStore(
+    (s) => s.selectedItem?.props.id === componentId || false
+  );
+  let label = componentConfig?.label ?? item?.type.toString() ?? "Component";
+  const defaultsProps = useMemo8(
+    () => ({
+      ...componentConfig?.defaultProps,
+      ...item?.props,
+      credbuild: credbuildProps,
+      editMode: true
+      // DEPRECATED
+    }),
+    [componentConfig?.defaultProps, item?.props, credbuildProps]
+  );
+  const defaultedNode = useMemo8(
+    () => ({ type: item?.type ?? nodeType, props: defaultsProps }),
+    [item?.type, nodeType, defaultsProps]
+  );
+  const config = useAppStore((s) => s.config);
+  const plugins = useAppStore((s) => s.plugins);
+  const userFieldTransforms = useAppStore((s) => s.fieldTransforms);
+  const combinedFieldTransforms = useMemo8(
+    () => ({
+      ...getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ jsx16(ContextSlotRender, { componentId, zone: slotProps.zone })),
+      ...getInlineTextTransform(),
+      ...getRichTextTransform(),
+      ...plugins.reduce(
+        (acc, plugin) => ({ ...acc, ...plugin.fieldTransforms }),
+        {}
+      ),
+      ...userFieldTransforms
+    }),
+    [plugins, userFieldTransforms, componentId]
+  );
+  const transformedProps = useFieldTransformsTracked(
+    config,
+    defaultedNode,
+    combinedFieldTransforms,
+    nodeReadOnly,
+    isLoading
+  );
+  if (!item) return;
+  const Render = componentConfig ? componentConfig.render : () => /* @__PURE__ */ jsxs6("div", { style: { padding: 48, textAlign: "center" }, children: [
+    "No configuration for ",
+    item.type
+  ] });
+  let componentType = item.type;
+  const isInserting = "previewType" in item ? item.previewType === "insert" : false;
+  return /* @__PURE__ */ jsx16(
+    DraggableComponent,
+    {
+      id: componentId,
+      componentType,
+      zoneCompound,
+      depth: depth + 1,
+      index,
+      isLoading,
+      isSelected,
+      label,
+      autoDragAxis: dragAxis,
+      userDragAxis: collisionAxis,
+      inDroppableZone,
+      itemRef,
+      children: (dragRef) => {
+        if (componentConfig?.inline && !isInserting) {
+          return /* @__PURE__ */ jsx16(
+            MemoizeComponent,
+            {
+              Component: Render,
+              componentProps: {
+                ...transformedProps,
+                credbuild: { ...transformedProps.credbuild, dragRef }
+              }
+            }
+          );
+        }
+        return /* @__PURE__ */ jsx16("div", { ref: dragRef, children: isInserting ? /* @__PURE__ */ jsx16(
+          InsertPreview,
+          {
+            label,
+            override: overrides.componentItem ?? overrides.drawerItem,
+            element: "element" in item && item.element ? item.element : void 0
+          }
+        ) : /* @__PURE__ */ jsx16(
+          MemoizeComponent,
+          {
+            Component: Render,
+            componentProps: transformedProps
+          }
+        ) });
+      }
+    }
+  );
+};
+var DropZoneChildMemo = memo4(DropZoneChild);
+var DropZoneEdit = forwardRef2(
+  function DropZoneEditInternal({
+    zone,
+    allow,
+    disallow,
+    style,
+    className,
+    minEmptyHeight: userMinEmptyHeight = "128px",
+    collisionAxis,
+    as
+  }, userRef) {
+    const ctx = useContext5(dropZoneContext);
+    const appStoreApi = useAppStoreApi();
+    const {
+      // These all need setting via context
+      areaId,
+      depth = 0,
+      registerLocalZone,
+      unregisterLocalZone
+    } = ctx ?? {};
+    const path = useAppStore(
+      useShallow3((s) => areaId ? s.state.indexes.nodes[areaId]?.path : null)
+    );
+    let zoneCompound = rootDroppableId;
+    if (areaId) {
+      if (zone !== rootDroppableId) {
+        zoneCompound = `${areaId}:${zone}`;
+      }
+    }
+    const isRootZone = zoneCompound === rootDroppableId || zone === rootDroppableId || areaId === "root";
+    const inNextDeepestArea = useContextStore(
+      ZoneStoreContext,
+      (s) => s.nextAreaDepthIndex[areaId || ""]
+    );
+    const zoneContentIds = useAppStore(
+      useShallow3((s) => {
+        return s.state.indexes.zones[zoneCompound]?.contentIds;
+      })
+    );
+    const zoneType = useAppStore(
+      useShallow3((s) => {
+        return s.state.indexes.zones[zoneCompound]?.type;
+      })
+    );
+    useEffect9(() => {
+      if (!zoneType || zoneType === "dropzone") {
+        if (ctx?.registerZone) {
+          ctx?.registerZone(zoneCompound);
+        }
+      }
+    }, [zoneType, appStoreApi, ctx, zoneCompound]);
+    useEffect9(() => {
+      if (zoneType === "dropzone") {
+        if (zoneCompound !== rootDroppableId) {
+          console.warn(
+            "DropZones have been deprecated in favor of slot fields and will be removed in a future version of CredBuild. Please see the migration guide: https://www.credbuild.com/docs/guides/migrations/dropzones-to-slots"
+          );
+        }
+      }
+    }, [zoneType, zoneCompound]);
+    const contentIds = useMemo8(() => {
+      return zoneContentIds || [];
+    }, [zoneContentIds]);
+    const ref = useRef8(null);
+    const acceptsTarget = useCallback10(
+      (componentType) => {
+        if (!componentType) {
+          return true;
+        }
+        if (disallow) {
+          const defaultedAllow = allow || [];
+          const filteredDisallow = (disallow || []).filter(
+            (item) => defaultedAllow.indexOf(item) === -1
+          );
+          if (filteredDisallow.indexOf(componentType) !== -1) {
+            return false;
+          }
+        } else if (allow) {
+          if (allow.indexOf(componentType) === -1) {
+            return false;
+          }
+        }
+        return true;
+      },
+      [allow, disallow]
+    );
+    const targetAccepted = useContextStore(ZoneStoreContext, (s) => {
+      const draggedComponentType = s.draggedItem?.data.componentType;
+      return acceptsTarget(draggedComponentType);
+    });
+    const hoveringOverArea = inNextDeepestArea || isRootZone;
+    const isEnabled = useContextStore(ZoneStoreContext, (s) => {
+      let _isEnabled = true;
+      const isDeepestZone = s.zoneDepthIndex[zoneCompound] ?? false;
+      _isEnabled = isDeepestZone;
+      if (_isEnabled) {
+        _isEnabled = targetAccepted;
+      }
+      return _isEnabled;
+    });
+    useEffect9(() => {
+      if (registerLocalZone) {
+        registerLocalZone(zoneCompound, targetAccepted || isEnabled);
+      }
+      return () => {
+        if (unregisterLocalZone) {
+          unregisterLocalZone(zoneCompound);
+        }
+      };
+    }, [targetAccepted, isEnabled, zoneCompound, registerLocalZone, unregisterLocalZone]);
+    const [contentIdsWithPreview, preview] = useContentIdsWithPreview(
+      contentIds,
+      zoneCompound
+    );
+    const isDropEnabled = isEnabled && (preview ? contentIdsWithPreview.length === 1 : contentIdsWithPreview.length === 0);
+    const zoneStore = useContext5(ZoneStoreContext);
+    useEffect9(() => {
+      const { enabledIndex } = zoneStore.getState();
+      zoneStore.setState({
+        enabledIndex: { ...enabledIndex, [zoneCompound]: isEnabled }
+      });
+    }, [isEnabled, zoneStore, zoneCompound]);
+    const droppableConfig = {
+      id: zoneCompound,
+      collisionPriority: isEnabled ? depth : 0,
+      disabled: !isDropEnabled,
+      collisionDetector: pointerIntersection,
+      type: "dropzone",
+      data: {
+        areaId,
+        depth,
+        isDroppableTarget: targetAccepted,
+        path: path || []
+      }
+    };
+    const { ref: dropRef } = useDroppable2(droppableConfig);
+    const isAreaSelected = useAppStore(
+      (s) => s?.selectedItem && areaId === s?.selectedItem.props.id
+    );
+    const [dragAxis] = useDragAxis(ref, collisionAxis);
+    const [minEmptyHeight, isAnimating] = useMinEmptyHeight({
+      zoneCompound,
+      userMinEmptyHeight,
+      ref
+    });
+    const setRefs = useCallback10(
+      (node) => {
+        assignRefs([ref, dropRef, userRef], node);
+      },
+      [dropRef, userRef]
+    );
+    const _experimentalVirtualization = useAppStore(
+      (s) => s._experimentalVirtualization
+    );
+    const El = as ?? "div";
+    const isRootAreaZone = (areaId ?? rootAreaId) === rootAreaId && depth === 0;
+    const shouldVirtualizeItems = _experimentalVirtualization && isRootAreaZone;
+    return /* @__PURE__ */ jsx16(
+      El,
+      {
+        className: `${getClassName5({
+          isRootZone,
+          hoveringOverArea,
+          isEnabled,
+          isAreaSelected,
+          hasChildren: contentIds.length > 0,
+          isAnimating
+        })}${className ? ` ${className}` : ""}`,
+        ref: setRefs,
+        "data-testid": `dropzone:${zoneCompound}`,
+        "data-credbuild-dropzone": zoneCompound,
+        style: {
+          ...style,
+          "--min-empty-height": minEmptyHeight,
+          backgroundColor: RENDER_DEBUG ? getRandomColor() : style?.backgroundColor
+        },
+        children: shouldVirtualizeItems ? /* @__PURE__ */ jsx16(
+          VirtualizedDropZone,
+          {
+            contentIds: contentIdsWithPreview,
+            zoneCompound,
+            renderItem: (props) => /* @__PURE__ */ jsx16(
+              DropZoneChildMemo,
+              {
+                zoneCompound,
+                componentId: props.componentId,
+                dragAxis,
+                index: props.index,
+                collisionAxis,
+                inDroppableZone: targetAccepted,
+                itemRef: props.measureRef
+              },
+              props.componentId
+            )
+          }
+        ) : contentIdsWithPreview.map((componentId, i) => /* @__PURE__ */ jsx16(
+          DropZoneChildMemo,
+          {
+            zoneCompound,
+            componentId,
+            dragAxis,
+            index: i,
+            collisionAxis,
+            inDroppableZone: targetAccepted
+          },
+          componentId
+        ))
+      }
+    );
+  }
+);
+var DropZoneRenderItem = memo4(({
+  config,
+  item,
+  metadata
+}) => {
+  const Component = config.components[item.type];
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx16(SlotRenderPure, { ...slotProps, config, metadata }));
+  const nextContextValue = useMemo8(
+    () => ({
+      areaId: props.id,
+      depth: 1
+    }),
+    [props]
+  );
+  const richtextProps = useRichtextProps(Component.fields, props);
+  return /* @__PURE__ */ jsx16(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx16(
+    Component.render,
+    {
+      ...props,
+      ...richtextProps,
+      credbuild: {
+        ...props.credbuild,
+        renderDropZone: DropZoneRenderPure,
+        metadata: { ...metadata, ...Component.metadata }
+      }
+    }
+  ) }, props.id);
+});
+var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx16(DropZoneRender, { ...props });
+var DropZoneRender = forwardRef2(
+  function DropZoneRenderInternal({ className, style, zone, as }, ref) {
+    const ctx = useContext5(dropZoneContext);
+    const { areaId = "root" } = ctx || {};
+    const { config, data, metadata } = useContext5(renderContext);
+    let zoneCompound = `${areaId}:${zone}`;
+    const content = useMemo8(() => {
+      if (zoneCompound !== rootDroppableId) {
+        return setupZone(data, zoneCompound).zones[zoneCompound];
+      }
+      return data?.content || [];
+    }, [data, zoneCompound]);
+    useEffect9(() => {
+      if (!content) {
+        if (ctx?.registerZone) {
+          ctx?.registerZone(zoneCompound);
+        }
+      }
+    }, [content, ctx, zoneCompound]);
+    const El = as ?? "div";
+    if (!data || !config) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx16(El, { className, style, ref, children: content.map((item) => {
+      const Component = config.components[item.type];
+      if (Component) {
+        return /* @__PURE__ */ jsx16(
+          DropZoneRenderItem,
+          {
+            config,
+            item,
+            metadata
+          },
+          item.props.id
+        );
+      }
+      return null;
+    }) });
+  }
+);
+var DropZonePure = (props) => /* @__PURE__ */ jsx16(DropZone, { ...props });
+var DropZone = forwardRef2(
+  function DropZone2(props, ref) {
+    const ctx = useContext5(dropZoneContext);
+    if (ctx?.mode === "edit") {
+      return /* @__PURE__ */ jsx16(Fragment4, { children: /* @__PURE__ */ jsx16(DropZoneEdit, { ...props, ref }) });
+    }
+    return /* @__PURE__ */ jsx16(Fragment4, { children: /* @__PURE__ */ jsx16(DropZoneRender, { ...props, ref }) });
+  }
+);
+
+// lib/migrate.ts
+var migrations = [
+  // Migrate root to root.props
+  (data) => {
+    const rootProps = data.root.props || data.root;
+    if (Object.keys(data.root).length > 0 && !data.root.props) {
+      console.warn(
+        "Migration applied: Root props moved from `root` to `root.props`."
+      );
+      return {
+        ...data,
+        root: {
+          props: {
+            ...rootProps
+          }
+        }
+      };
+    }
+    return data;
+  },
+  // Migrate zones to slots
+  (data, config, migrationOptions) => {
+    if (!config) return data;
+    console.log("Migrating DropZones to slots...");
+    const updatedItems = {};
+    const appState = { ...defaultAppState, data };
+    const { indexes } = walkAppState(appState, config);
+    const deletedCompounds = [];
+    walkAppState(appState, config, (content, zoneCompound, zoneType) => {
+      if (zoneType === "dropzone") {
+        const [id, slotName] = zoneCompound.split(":");
+        const nodeData = indexes.nodes[id].data;
+        const componentType = nodeData.type;
+        const configForComponent = id === "root" ? config.root : config.components[componentType];
+        if (configForComponent?.fields?.[slotName]?.type === "slot") {
+          updatedItems[id] = {
+            ...nodeData,
+            props: {
+              ...nodeData.props,
+              ...updatedItems[id]?.props,
+              [slotName]: content
+            }
+          };
+          deletedCompounds.push(zoneCompound);
+        }
+        return content;
+      }
+      return content;
+    });
+    const updated = walkAppState(
+      appState,
+      config,
+      (content) => content,
+      (item) => {
+        return updatedItems[item.props.id] ?? item;
+      }
+    );
+    deletedCompounds.forEach((zoneCompound) => {
+      const [_, propName] = zoneCompound.split(":");
+      console.log(
+        `\u2713 Success: Migrated "${zoneCompound}" from DropZone to slot field "${propName}"`
+      );
+      delete updated.data.zones?.[zoneCompound];
+    });
+    if (migrationOptions?.migrateDynamicZonesForComponent) {
+      const unmigratedZonesGrouped = {};
+      Object.keys(updated.data.zones ?? {}).forEach((zoneCompound) => {
+        const [componentId, propName] = zoneCompound.split(":");
+        const content = updated.data.zones?.[zoneCompound];
+        if (!content) {
+          return;
+        }
+        if (!unmigratedZonesGrouped[componentId]) {
+          unmigratedZonesGrouped[componentId] = {};
+        }
+        if (!unmigratedZonesGrouped[componentId][propName]) {
+          unmigratedZonesGrouped[componentId][propName] = content;
+        }
+      });
+      Object.keys(unmigratedZonesGrouped).forEach((componentId) => {
+        updated.data = walkTree(updated.data, config, (content) => {
+          return content.map((child) => {
+            if (child.props.id !== componentId) {
+              return child;
+            }
+            const migrateFn = migrationOptions?.migrateDynamicZonesForComponent?.[child.type];
+            if (!migrateFn) {
+              return child;
+            }
+            const zones = unmigratedZonesGrouped[componentId];
+            const migratedProps = migrateFn(child.props, zones);
+            Object.keys(zones).forEach((propName) => {
+              const zoneCompound = `${componentId}:${propName}`;
+              console.log(`\u2713 Success: Migrated "${zoneCompound}" DropZone`);
+              delete updated.data.zones?.[zoneCompound];
+            });
+            return {
+              ...child,
+              props: migratedProps
+            };
+          });
+        });
+      });
+    }
+    Object.keys(updated.data.zones ?? {}).forEach((zoneCompound) => {
+      const [_, propName] = zoneCompound.split(":");
+      throw new Error(
+        `Could not migrate DropZone "${zoneCompound}" to slot field. No slot exists with the name "${propName}".`
+      );
+    });
+    delete updated.data.zones;
+    return updated.data;
+  }
+];
+function migrate(data, config, migrationOptions) {
+  return migrations?.reduce(
+    (acc, migration) => migration(acc, config, migrationOptions),
+    data
+  );
+}
+
+// lib/data/default-data.ts
+var defaultData = (data) => ({
+  ...data,
+  root: data.root || {},
+  content: data.content || []
+});
+
+// lib/transform-props.ts
+function transformProps(data, propTransforms, config = { components: {} }) {
+  const mapItem = (item) => {
+    if (propTransforms[item.type]) {
+      return {
+        ...item,
+        props: {
+          id: item.props.id,
+          ...propTransforms[item.type](item.props)
+        }
+      };
+    }
+    return item;
+  };
+  const defaultedData = defaultData(data);
+  const rootProps = defaultedData.root.props || defaultedData.root;
+  let newRoot = { ...defaultedData.root };
+  if (propTransforms["root"]) {
+    newRoot.props = propTransforms["root"](rootProps);
+  }
+  const dataWithUpdatedRoot = { ...defaultedData, root: newRoot };
+  const updatedData = walkTree(
+    dataWithUpdatedRoot,
+    config,
+    (content) => content.map(mapItem)
+  );
+  if (!defaultedData.root.props) {
+    updatedData.root = updatedData.root.props;
+  }
+  return updatedData;
+}
+
+// lib/group-zones-by-component.ts
+var groupZonesByComponent = (data) => {
+  const zoneEntries = Object.entries(data.zones ?? {});
+  return zoneEntries.reduce((acc, [zoneCompound, zoneContent]) => {
+    const [componentId, zoneName] = getZoneId(zoneCompound);
+    if (!componentId.length || !zoneName.length) return acc;
+    if (!acc[componentId]) {
+      acc[componentId] = [];
+    }
+    acc[componentId].push({ zoneCompound, content: zoneContent });
+    return acc;
+  }, {});
+};
+
+// lib/resolve-all-data.ts
+async function resolveAllData(data, config, metadata = {}, onResolveStart, onResolveEnd) {
+  const defaultedData = defaultData(data);
+  const zonesByComponent = groupZonesByComponent(defaultedData);
+  let resolvedZones = {};
+  const resolveNode = async (_node, parent) => {
+    const node = toComponent(_node);
+    onResolveStart?.(node);
+    const resolved = (await resolveComponentData(
+      node,
+      config,
+      metadata,
+      () => {
+      },
+      () => {
+      },
+      "force",
+      parent
+    )).node;
+    const resolvedAsComponent = toComponent(resolved);
+    const resolvedDeepPromise = mapFields(
+      resolved,
+      {
+        slot: ({ value }) => processContent(value, resolvedAsComponent)
+      },
+      config
+    );
+    let resolveZonePromises = [];
+    if (zonesByComponent[resolvedAsComponent.props.id]) {
+      resolveZonePromises = zonesByComponent[resolvedAsComponent.props.id].map(
+        async ({ zoneCompound, content }) => {
+          resolvedZones[zoneCompound] = await processContent(
+            content,
+            resolvedAsComponent
+          );
+        }
+      );
+    }
+    const resolvedDeep = await resolvedDeepPromise;
+    await Promise.all(resolveZonePromises);
+    onResolveEnd?.(toComponent(resolvedDeep));
+    return resolvedDeep;
+  };
+  const processContent = async (content, parent) => {
+    return Promise.all(content.map((item) => resolveNode(item, parent)));
+  };
+  const result = defaultData({});
+  result.root = await resolveNode(defaultedData.root, null);
+  result.content = await processContent(
+    defaultedData.content,
+    toComponent(result.root)
+  );
+  result.zones = resolvedZones;
+  return result;
+}
+
+export {
+  SliderField,
+  ResponsiveSliderField,
+  ColorPickerField,
+  dragListenerContext,
+  Drawer,
+  ZoneStoreContext,
+  ZoneStoreProvider,
+  DropZoneProvider,
+  renderContext,
+  useSlots,
+  useRichtextProps,
+  SlotRenderPure,
+  SlotRender,
+  registerOverlayPortal,
+  getSelectorForId,
+  getFrame,
+  DropZoneEditPure,
+  DropZoneRenderPure,
+  DropZonePure,
+  DropZone,
+  migrate,
+  transformProps,
+  resolveAllData
+};