@mieweb/forms-editor 0.1.0

package/dist/index.js

@@ -0,0 +1,1120 @@
+// src/QuestionnaireEditor.jsx
+import React14, { useEffect as useEffect3, useRef as useRef2 } from "react";
+
+// src/components/Header.jsx
+import React2, { useState } from "react";
+import { useFormStore, useFieldsArray, useUIApi, useUIStore } from "@mieweb/forms-engine";
+
+// src/components/DataViewer.jsx
+import React from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import yaml from "js-yaml";
+function DataViewer({
+  open,
+  onClose,
+  data,
+  title = "Data Viewer",
+  placement = "center",
+  // "center" | "bottom"
+  pretty = 2,
+  defaultMode = "yaml",
+  // "json" | "yaml"
+  fileBaseName = "form-data",
+  contentClassName = ""
+}) {
+  const isCenter = placement === "center";
+  const [mode, setMode] = React.useState(defaultMode === "yaml" ? "yaml" : "json");
+  const viewerText = React.useMemo(() => {
+    const indent = Math.max(2, pretty | 0);
+    try {
+      return mode === "yaml" ? yaml.dump(data ?? {}, {
+        indent,
+        lineWidth: 80,
+        noRefs: true,
+        forceQuotes: true,
+        skipInvalid: true
+      }) : JSON.stringify(data ?? {}, null, indent);
+    } catch {
+      return mode === "yaml" ? "# Failed to render YAML" : String(data);
+    }
+  }, [data, mode, pretty]);
+  const stop = (e) => e.stopPropagation();
+  const download = (e) => {
+    stop(e);
+    const isYaml = mode === "yaml";
+    const blob = new Blob([viewerText], { type: isYaml ? "text/yaml" : "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${fileBaseName}.${isYaml ? "yml" : "json"}`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  const copy = async (e) => {
+    stop(e);
+    try {
+      await navigator.clipboard.writeText(viewerText);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ React.createElement(AnimatePresence, null, open && /* @__PURE__ */ React.createElement(
+    motion.div,
+    {
+      className: "fixed inset-0 z-[60] flex items-center justify-center",
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      onMouseDown: onClose,
+      "aria-modal": "true",
+      role: "dialog"
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "w-full h-full flex items-end sm:items-center justify-center sm:max-w-4xl" }, /* @__PURE__ */ React.createElement(
+      motion.div,
+      {
+        onMouseDown: stop,
+        initial: { y: isCenter ? 20 : "100%", opacity: isCenter ? 0 : 1, scale: isCenter ? 0.98 : 1 },
+        animate: { y: 0, opacity: 1, scale: 1 },
+        exit: { y: isCenter ? 20 : "100%", opacity: isCenter ? 0 : 1, scale: isCenter ? 0.98 : 1 },
+        transition: { type: "spring", stiffness: 160, damping: 20 },
+        className: isCenter ? "w-full sm:max-w-2xl sm:rounded-2xl rounded-t-2xl bg-white shadow-lg border border-black/10 max-h-[80vh] overflow-hidden" : "w-full mx-auto bg-black/5 border border-black/15 px-6 py-4 rounded-2xl backdrop-blur-xl overflow-hidden"
+      },
+      /* @__PURE__ */ React.createElement("div", { className: `flex items-center justify-between ${isCenter ? "px-4 py-3 border-b border-black/10" : ""}` }, /* @__PURE__ */ React.createElement("h3", { className: "font-semibold" }, title, " (", mode.toUpperCase(), ")"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "inline-flex rounded-lg border border-black/10 overflow-hidden" }, /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          className: `px-3 py-1 text-sm ${mode === "yaml" ? "bg-black/6" : "bg-gray-200 hover:bg-black/5"}`,
+          "aria-pressed": mode === "yaml",
+          onClick: (e) => {
+            stop(e);
+            setMode("yaml");
+          }
+        },
+        "YAML"
+      ), /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          className: `px-3 py-1 text-sm ${mode === "json" ? "bg-black/6" : "bg-gray-200 hover:bg-black/5"}`,
+          "aria-pressed": mode === "json",
+          onClick: (e) => {
+            stop(e);
+            setMode("json");
+          }
+        },
+        "JSON"
+      )), /* @__PURE__ */ React.createElement("button", { className: "px-3 py-1 rounded-lg border border-black/10 hover:bg-black/5 text-sm", onClick: copy }, "Copy"), /* @__PURE__ */ React.createElement("button", { className: "px-3 py-1 rounded-lg border border-black/10 hover:bg-black/5 text-sm", onClick: download }, "Download"), /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          className: "px-3 py-1 rounded-lg border border-black/10 hover:bg-black/5 text-sm",
+          onClick: (e) => {
+            stop(e);
+            onClose == null ? void 0 : onClose();
+          }
+        },
+        "Close"
+      ))),
+      /* @__PURE__ */ React.createElement("div", { className: isCenter ? `p-4 overflow-auto max-h-[70vh] ${contentClassName}` : `mt-2 p-2 rounded-lg overflow-y-auto max-h-96 ${contentClassName}` }, /* @__PURE__ */ React.createElement("pre", { className: "whitespace-pre-wrap break-words text-sm text-gray-700" }, viewerText))
+    ))
+  ));
+}
+
+// src/components/Header.jsx
+function Header() {
+  const [showData, setShowData] = useState(false);
+  const replaceAll = useFormStore((s) => s.replaceAll);
+  const fieldsArray = useFieldsArray();
+  const ui = useUIApi();
+  const isPreview = ui.state.isPreview;
+  const importData = (data) => {
+    try {
+      const text = String(data).replace(/^\uFEFF/, "").trim();
+      const parsed = JSON.parse(text);
+      const arr = Array.isArray(parsed) ? parsed : parsed == null ? void 0 : parsed.fields;
+      if (!Array.isArray(arr)) throw new Error("Expected [] or { fields: [] }");
+      replaceAll(arr);
+      ui.selectedFieldId.clear();
+      ui.preview.set(false);
+    } catch (err) {
+      alert((err == null ? void 0 : err.message) || "Invalid JSON format");
+    }
+  };
+  const onPreview = () => {
+    ui.preview.set(true);
+    ui.selectedFieldId.clear();
+  };
+  const onEdit = () => {
+    ui.preview.set(false);
+  };
+  return /* @__PURE__ */ React2.createElement("header", { className: "sticky top-0 z-49 bg-transparent mx-auto" }, /* @__PURE__ */ React2.createElement("div", { className: "py-6 text-center" }, /* @__PURE__ */ React2.createElement("h1", { className: "text-3xl sm:text-4xl tracking-tight" }, "Questionnaire Builder"), /* @__PURE__ */ React2.createElement("p", { className: "mt-1 text-sm text-black/60" }, "Build dynamic questionnaires with JSON config and FHIR export")), /* @__PURE__ */ React2.createElement("div", { className: "max-w-6xl mx-auto px-4" }, /* @__PURE__ */ React2.createElement("div", { className: "grid grid-cols-2 rounded-xl border border-black/10 bg-white shadow-sm" }, /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      className: `py-3 rounded-xl text-sm font-medium ${!isPreview ? "bg-black/5" : ""}`,
+      onClick: onEdit
+    },
+    "Builder"
+  ), /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      className: `py-3 rounded-xl text-sm font-medium ${isPreview ? "bg-black/5" : ""}`,
+      onClick: onPreview
+    },
+    "Preview"
+  )), /* @__PURE__ */ React2.createElement("div", { className: "mt-4 flex flex-wrap gap-2 items-center justify-end" }, /* @__PURE__ */ React2.createElement("label", { className: "px-4 py-2 rounded-xl border border-black/15 bg-white hover:bg-black/5 cursor-pointer text-sm" }, "Import", /* @__PURE__ */ React2.createElement(
+    "input",
+    {
+      className: "hidden",
+      type: "file",
+      accept: ".json,application/json",
+      onChange: (e) => {
+        var _a;
+        const file = (_a = e.target.files) == null ? void 0 : _a[0];
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = (ev) => {
+          var _a2;
+          return importData(((_a2 = ev.target) == null ? void 0 : _a2.result) ?? "");
+        };
+        reader.readAsText(file);
+        e.target.value = "";
+      }
+    }
+  )), /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      className: "px-4 py-2 rounded-xl border border-black/15 bg-white hover:bg-black/5 text-sm",
+      onClick: () => setShowData(true)
+    },
+    "Data Viewer"
+  ))), /* @__PURE__ */ React2.createElement(
+    DataViewer,
+    {
+      open: showData,
+      onClose: () => setShowData(false),
+      data: fieldsArray,
+      title: "Form Data",
+      placement: "bottom",
+      contentClassName: "custom-scrollbar"
+    }
+  ));
+}
+
+// src/components/MobileToolBar.jsx
+import React3, { useState as useState2, useEffect, useRef } from "react";
+import { motion as motion2 } from "framer-motion";
+import { DATALOG_ICON, EYEEDIT_ICON, EYECLOSED_ICON, PLUSSQUARE_ICON, X_ICON } from "@mieweb/forms-engine";
+import { useFormStore as useFormStore2, useFieldsArray as useFieldsArray2, useUIApi as useUIApi2, fieldTypes } from "@mieweb/forms-engine";
+function MobileToolBar() {
+  const [isToolBarExpanded, setIsToolBarExpanded] = useState2(false);
+  const [isLogExpanded, setIsLogExpanded] = useState2(false);
+  const containerRef = useRef(null);
+  const addField = useFormStore2((s) => s.addField);
+  const fieldsArray = useFieldsArray2();
+  const ui = useUIApi2();
+  const isPreview = ui.state.isPreview;
+  const handleToolBarExpanded = () => {
+    setIsToolBarExpanded((v) => !v);
+    setIsLogExpanded(false);
+  };
+  const handleLogExpanded = () => {
+    setIsLogExpanded((v) => !v);
+    setIsToolBarExpanded(false);
+  };
+  const handlePreviewMode = () => {
+    ui.preview.toggle();
+    setIsToolBarExpanded(false);
+    setIsLogExpanded(false);
+  };
+  useEffect(() => {
+    if (!isToolBarExpanded || isLogExpanded) return;
+    const handleDocDown = (event) => {
+      const el = containerRef.current;
+      if (el && !el.contains(event.target)) {
+        setIsToolBarExpanded(false);
+        setIsLogExpanded(false);
+      }
+    };
+    document.addEventListener("pointerdown", handleDocDown);
+    return () => document.removeEventListener("pointerdown", handleDocDown);
+  }, [isToolBarExpanded, isLogExpanded]);
+  return /* @__PURE__ */ React3.createElement("div", { className: "MobileToolBar fixed bottom-0 left-0 w-full text-stone-900 shadow-lg z-10" }, /* @__PURE__ */ React3.createElement(
+    motion2.div,
+    {
+      initial: { y: "100%" },
+      animate: { y: "0%" },
+      transition: { duration: 0.8, ease: [0.25, 0.1, 0.25, 1] },
+      className: `flex ${!isPreview ? "justify-around" : "justify-center"} pb-5 max-w-xl sm:max-w-4xl mx-auto`
+    },
+    /* @__PURE__ */ React3.createElement(
+      motion2.button,
+      {
+        onClick: handlePreviewMode,
+        initial: { opacity: 1, scale: 1, x: "0%" },
+        animate: {
+          opacity: isToolBarExpanded || isLogExpanded ? 0 : 1,
+          scale: isToolBarExpanded || isLogExpanded ? 0 : 1,
+          x: !isPreview ? "0%" : "120%"
+        },
+        className: `relative cursor-pointer ${!isPreview ? "" : "mx-29"} bg-black/5 rounded-2xl p-3 backdrop-blur-xl`
+      },
+      !isPreview ? /* @__PURE__ */ React3.createElement(EYECLOSED_ICON, { className: "h-12 w-12" }) : /* @__PURE__ */ React3.createElement(EYEEDIT_ICON, { className: "h-12 w-12" })
+    ),
+    !isPreview && /* @__PURE__ */ React3.createElement(
+      motion2.button,
+      {
+        onClick: handleToolBarExpanded,
+        initial: { opacity: 1, scale: 1 },
+        animate: {
+          opacity: isToolBarExpanded || isLogExpanded ? 0 : 1,
+          scale: isToolBarExpanded || isLogExpanded ? 0 : 1
+        },
+        className: "relative cursor-pointer bg-black/5 rounded-2xl p-3 backdrop-blur-xl"
+      },
+      /* @__PURE__ */ React3.createElement(PLUSSQUARE_ICON, { className: "h-12 w-12" })
+    ),
+    /* @__PURE__ */ React3.createElement(
+      motion2.button,
+      {
+        onClick: handleLogExpanded,
+        initial: { opacity: 1, scale: 1, x: "0%" },
+        animate: {
+          opacity: isLogExpanded || isToolBarExpanded ? 0 : 1,
+          scale: isLogExpanded || isToolBarExpanded ? 0 : 1,
+          x: !isPreview ? "0%" : "-120%"
+        },
+        className: `relative cursor-pointer ${!isPreview ? "" : "mx-29"} bg-black/5 rounded-2xl p-3 backdrop-blur-xl`
+      },
+      /* @__PURE__ */ React3.createElement(DATALOG_ICON, { className: "h-12 w-12" })
+    )
+  ), /* @__PURE__ */ React3.createElement(
+    DataViewer,
+    {
+      open: isLogExpanded,
+      onClose: () => setIsLogExpanded(false),
+      data: fieldsArray,
+      title: "Form Data",
+      placement: "bottom",
+      contentClassName: "custom-scrollbar"
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    motion2.div,
+    {
+      ref: containerRef,
+      onPointerDown: (e) => e.stopPropagation(),
+      initial: { opacity: 0, y: "100%", scale: 0 },
+      animate: {
+        opacity: isToolBarExpanded ? 1 : 0,
+        y: isToolBarExpanded ? "0%" : "100%",
+        scale: isToolBarExpanded ? 1 : 0.6
+      },
+      transition: { type: "spring", stiffness: 150, damping: 20 },
+      className: "MobileToolBar-Modal fixed bottom-0 w-full mx-auto bg-black/5 border-black/15 border px-9 py-4 mb-2 rounded-2xl backdrop-blur-xl overflow-y-scroll"
+    },
+    /* @__PURE__ */ React3.createElement("div", { className: "grid grid-cols-1 gap-2" }, /* @__PURE__ */ React3.createElement("button", { className: "flex w-full justify-end", onClick: () => setIsToolBarExpanded(false) }, /* @__PURE__ */ React3.createElement(X_ICON, null)), Object.keys(fieldTypes).map((type) => /* @__PURE__ */ React3.createElement(
+      "button",
+      {
+        key: type,
+        className: "px-4 pl-6 py-2 text-black text-left rounded hover:bg-slate-50",
+        onClick: () => {
+          addField(type);
+          setIsToolBarExpanded(false);
+        }
+      },
+      "Add ",
+      fieldTypes[type].label
+    )))
+  ));
+}
+
+// src/components/desktopLayout/Layout.jsx
+import React13 from "react";
+
+// src/components/desktopLayout/toolPanel/ToolPanel.jsx
+import React4, { useMemo } from "react";
+import { fieldTypes as fieldTypes2, useFormStore as useFormStore3 } from "@mieweb/forms-engine";
+var TOOL_ITEMS = Object.entries(fieldTypes2).map(([type, cfg]) => ({
+  type,
+  label: cfg.label
+}));
+var ToolPanelImpl = ({ isPreview = false }) => {
+  if (isPreview) return null;
+  const addField = useFormStore3((s) => s.addField);
+  const handlers = useMemo(() => {
+    const m = {};
+    for (const { type } of TOOL_ITEMS) m[type] = () => addField(type);
+    return m;
+  }, [addField]);
+  return /* @__PURE__ */ React4.createElement("div", { className: "p-4 bg-white border border-gray-200 rounded-lg shadow-sm" }, /* @__PURE__ */ React4.createElement("h3", { className: "text-lg font-semibold mb-3" }, "Tools"), /* @__PURE__ */ React4.createElement("div", { className: "grid grid-cols-1 gap-2" }, TOOL_ITEMS.map(({ type, label }) => /* @__PURE__ */ React4.createElement(
+    "button",
+    {
+      key: type,
+      className: "px-3 py-2 text-left border border-black/10 rounded-md hover:bg-slate-50",
+      onClick: handlers[type]
+    },
+    "Add ",
+    label
+  ))));
+};
+var ToolPanel = React4.memo(ToolPanelImpl, (prev, next) => prev.isPreview === next.isPreview);
+var ToolPanel_default = ToolPanel;
+
+// src/components/desktopLayout/editPanel/EditPanel.jsx
+import React11 from "react";
+
+// src/components/desktopLayout/editPanel/types/NonSectionEditor.jsx
+import React8, { useCallback, useMemo as useMemo2 } from "react";
+
+// src/components/desktopLayout/editPanel/types/CommonEditor.jsx
+import React6 from "react";
+
+// src/components/desktopLayout/editPanel/types/DraftIdEditor.jsx
+import React5 from "react";
+function DraftIdEditor({
+  id = "",
+  label = "ID",
+  onCommit,
+  validate,
+  placeholder = "Enter unique ID\u2026",
+  className = ""
+}) {
+  const [draft, setDraft] = React5.useState(id ?? "");
+  const [err, setErr] = React5.useState("");
+  React5.useEffect(() => {
+    setDraft(id ?? "");
+    setErr("");
+  }, [id]);
+  const commit = React5.useCallback(() => {
+    const next = String(draft ?? "").trim();
+    if (!next) {
+      setErr("ID cannot be empty.");
+      setDraft(id ?? "");
+      return;
+    }
+    if (next === (id ?? "")) return;
+    if (typeof validate === "function") {
+      const msg = validate(next, id ?? "");
+      if (msg) {
+        setErr(msg);
+        return;
+      }
+    }
+    onCommit == null ? void 0 : onCommit(next);
+  }, [draft, id, onCommit, validate]);
+  return /* @__PURE__ */ React5.createElement("div", { className }, /* @__PURE__ */ React5.createElement("label", { className: "block text-sm mb-1" }, label), /* @__PURE__ */ React5.createElement(
+    "input",
+    {
+      className: "w-full px-3 py-2 border border-black/20 rounded",
+      value: draft,
+      onChange: (e) => {
+        if (err) setErr("");
+        setDraft(e.target.value);
+      },
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          commit();
+        }
+      },
+      placeholder
+    }
+  ), err ? /* @__PURE__ */ React5.createElement("p", { className: "text-xs text-red-600 mt-1" }, err) : null);
+}
+
+// src/components/desktopLayout/editPanel/types/CommonEditor.jsx
+function CommonEditor({ f, onUpdateField }) {
+  return /* @__PURE__ */ React6.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React6.createElement(
+    DraftIdEditor,
+    {
+      id: f.id ?? "",
+      onCommit: (next) => onUpdateField == null ? void 0 : onUpdateField("id", next)
+    }
+  ), /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement("label", { className: "block text-sm mb-1" }, "Label / Question"), /* @__PURE__ */ React6.createElement(
+    "input",
+    {
+      className: "w-full px-3 py-2 border border-black/20 rounded",
+      value: f.question || "",
+      onChange: (e) => onUpdateField("question", e.target.value),
+      placeholder: "Enter question text"
+    }
+  )), /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement("label", { className: "inline-flex items-center gap-2 text-sm" }, /* @__PURE__ */ React6.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: !!f.required,
+      onChange: (e) => onUpdateField("required", e.target.checked)
+    }
+  ), "Required")), /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement("label", { className: "block text-sm mb-1" }, "Sublabel (optional)"), /* @__PURE__ */ React6.createElement(
+    "textarea",
+    {
+      className: "w-full px-3 py-2 border border-black/20 rounded",
+      value: f.sublabel || "",
+      onChange: (e) => onUpdateField("sublabel", e.target.value),
+      placeholder: "Helper text / description"
+    }
+  )));
+}
+var CommonEditor_default = CommonEditor;
+
+// src/components/desktopLayout/editPanel/types/OptionListEditor.jsx
+import React7 from "react";
+
+// ../../node_modules/uuid/dist/esm/stringify.js
+var byteToHex = [];
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 256).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
+
+// ../../node_modules/uuid/dist/esm/rng.js
+import { randomFillSync } from "crypto";
+var rnds8Pool = new Uint8Array(256);
+var poolPtr = rnds8Pool.length;
+function rng() {
+  if (poolPtr > rnds8Pool.length - 16) {
+    randomFillSync(rnds8Pool);
+    poolPtr = 0;
+  }
+  return rnds8Pool.slice(poolPtr, poolPtr += 16);
+}
+
+// ../../node_modules/uuid/dist/esm/native.js
+import { randomUUID } from "crypto";
+var native_default = { randomUUID };
+
+// ../../node_modules/uuid/dist/esm/v4.js
+function v4(options, buf, offset) {
+  var _a;
+  if (native_default.randomUUID && !buf && !options) {
+    return native_default.randomUUID();
+  }
+  options = options || {};
+  const rnds = options.random ?? ((_a = options.rng) == null ? void 0 : _a.call(options)) ?? rng();
+  if (rnds.length < 16) {
+    throw new Error("Random bytes length must be >= 16");
+  }
+  rnds[6] = rnds[6] & 15 | 64;
+  rnds[8] = rnds[8] & 63 | 128;
+  if (buf) {
+    offset = offset || 0;
+    if (offset < 0 || offset + 16 > buf.length) {
+      throw new RangeError(`UUID byte range ${offset}:${offset + 15} is out of buffer bounds`);
+    }
+    for (let i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+    return buf;
+  }
+  return unsafeStringify(rnds);
+}
+var v4_default = v4;
+
+// src/components/desktopLayout/editPanel/types/OptionListEditor.jsx
+function OptionListEditor({ field, onUpdateField }) {
+  const opts = field.options || [];
+  const addOption = () => {
+    onUpdateField("options", [...opts, { id: v4_default(), value: "" }]);
+  };
+  const updateOption = (id, value) => {
+    onUpdateField(
+      "options",
+      opts.map((o) => o.id === id ? { ...o, value } : o)
+    );
+  };
+  const removeOption = (id) => {
+    onUpdateField(
+      "options",
+      opts.filter((o) => o.id !== id)
+    );
+  };
+  return /* @__PURE__ */ React7.createElement("div", { className: "mt-3" }, /* @__PURE__ */ React7.createElement("div", { className: "text-sm font-medium mb-1" }, "Options"), opts.map((opt) => /* @__PURE__ */ React7.createElement("div", { key: opt.id, className: "flex items-center gap-2 mb-2" }, /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      className: "flex-1 px-3 py-2 border border-black/20 rounded",
+      value: opt.value,
+      onChange: (e) => updateOption(opt.id, e.target.value),
+      placeholder: "Option text"
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      onClick: () => removeOption(opt.id),
+      className: "px-2 py-1 text-sm border border-black/20 rounded hover:bg-slate-50"
+    },
+    "Remove"
+  ))), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      onClick: addOption,
+      className: "mt-1 px-3 py-2 text-sm border border-black/20 rounded hover:bg-slate-50"
+    },
+    "+ Add Option"
+  ));
+}
+
+// src/components/desktopLayout/editPanel/types/NonSectionEditor.jsx
+import { useFormApi } from "@mieweb/forms-engine";
+function NonSectionEditor({ f }) {
+  const api = useFormApi(f.id);
+  const onUpdateField = useCallback(
+    (key, value) => api.field.update(key, value),
+    [api]
+  );
+  const isChoice = useMemo2(
+    () => ["radio", "check", "selection"].includes(f.fieldType),
+    [f.fieldType]
+  );
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("h3", { className: "text-lg font-semibold mb-3" }, "Edit"), /* @__PURE__ */ React8.createElement(CommonEditor_default, { f, onUpdateField }), f.fieldType === "input" && /* @__PURE__ */ React8.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React8.createElement("div", { className: "text-sm font-medium mb-1" }, "Default Answer"), /* @__PURE__ */ React8.createElement(
+    "input",
+    {
+      className: "w-full px-3 py-2 border border-black/20 rounded",
+      value: f.answer || "",
+      onChange: (e) => onUpdateField("answer", e.target.value),
+      placeholder: "Default value"
+    }
+  )), isChoice && /* @__PURE__ */ React8.createElement(OptionListEditor, { field: f, onUpdateField }));
+}
+var NonSectionEditor_default = NonSectionEditor;
+
+// src/components/desktopLayout/editPanel/types/SectionEditor.jsx
+import React9, { useState as useState3, useEffect as useEffect2, useMemo as useMemo3, useCallback as useCallback2 } from "react";
+import { fieldTypes as fieldTypes3, useFormStore as useFormStore4, useFormApi as useFormApi2 } from "@mieweb/forms-engine";
+function SectionEditor({ section, onActiveChildChange }) {
+  var _a, _b, _c;
+  const sectionApi = useFormApi2(section.id);
+  const children = Array.isArray(section.fields) ? section.fields : [];
+  const [activeChildId, setActiveChildId] = useState3(((_a = children[0]) == null ? void 0 : _a.id) || null);
+  useEffect2(() => {
+    var _a2;
+    setActiveChildId(((_a2 = children[0]) == null ? void 0 : _a2.id) || null);
+  }, [section.id]);
+  useEffect2(() => {
+    if (!children.length) {
+      if (activeChildId !== null) setActiveChildId(null);
+      return;
+    }
+    const stillExists = children.some((c) => c.id === activeChildId);
+    if (!stillExists) setActiveChildId(children[0].id);
+  }, [children, activeChildId]);
+  useEffect2(() => {
+    onActiveChildChange == null ? void 0 : onActiveChildChange(section.id, activeChildId || null);
+  }, [section.id, activeChildId, onActiveChildChange]);
+  const onUpdateSection = useCallback2(
+    (key, value) => sectionApi.field.update(key, value),
+    [sectionApi]
+  );
+  const activeChild = useMemo3(
+    () => children.find((c) => c.id === activeChildId) || null,
+    [children, activeChildId]
+  );
+  const onUpdateChild = useCallback2(
+    (key, value) => {
+      if (!activeChild) return;
+      if (key === "id") {
+        const next = String(value ?? "").trim();
+        if (!next) return;
+        useFormStore4.getState().updateField(
+          activeChild.id,
+          { id: next },
+          {
+            sectionId: section.id,
+            onIdChange: (newId, oldId) => {
+              setActiveChildId((curr) => curr === oldId ? newId : curr);
+            }
+          }
+        );
+        return;
+      }
+      useFormStore4.getState().updateField(
+        activeChild.id,
+        { [key]: value },
+        { sectionId: section.id }
+      );
+    },
+    [activeChild, section.id]
+  );
+  const onDeleteChild = useCallback2(() => {
+    if (!activeChild) return;
+    useFormStore4.getState().deleteField(activeChild.id, { sectionId: section.id });
+  }, [activeChild, section.id]);
+  const isChoiceChild = useMemo3(
+    () => activeChild && ["radio", "check", "selection"].includes(activeChild.fieldType),
+    [activeChild]
+  );
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("h3", { className: "text-lg font-semibold mb-3" }, "Edit Section"), /* @__PURE__ */ React9.createElement(
+    DraftIdEditor,
+    {
+      id: section.id,
+      onCommit: (next) => sectionApi.field.renameId(next)
+    }
+  ), /* @__PURE__ */ React9.createElement("div", { className: "mt-3" }, /* @__PURE__ */ React9.createElement("label", { className: "block text-sm mb-1" }, "Section Title"), /* @__PURE__ */ React9.createElement(
+    "input",
+    {
+      className: "w-full px-3 py-2 border border-black/20 rounded",
+      value: section.title || "",
+      onChange: (e) => onUpdateSection("title", e.target.value),
+      placeholder: "Section title"
+    }
+  )), /* @__PURE__ */ React9.createElement("div", { className: "mt-6" }, /* @__PURE__ */ React9.createElement("div", { className: "text-sm font-semibold mb-2" }, "Fields in this section"), children.length === 0 ? /* @__PURE__ */ React9.createElement("div", { className: "text-sm text-gray-500" }, "No fields yet. Use the section\u2019s mini toolbar to add fields.") : /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("div", { className: "flex flex-wrap gap-2 mb-3" }, children.map((c) => {
+    var _a2, _b2;
+    return /* @__PURE__ */ React9.createElement(
+      "button",
+      {
+        key: c.id,
+        className: [
+          "px-3 py-1.5 text-sm rounded border",
+          activeChildId === c.id ? "bg-black/5 border-black/20" : "bg-white border-black/10 hover:bg-slate-50"
+        ].join(" "),
+        onClick: () => setActiveChildId(c.id),
+        title: c.question || c.fieldType
+      },
+      ((_a2 = c.question) == null ? void 0 : _a2.trim()) || ((_b2 = fieldTypes3[c.fieldType]) == null ? void 0 : _b2.label) || "Field"
+    );
+  })), activeChild && /* @__PURE__ */ React9.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React9.createElement("div", { className: "text-sm font-semibold mb-2" }, "Editing: ", ((_b = activeChild.question) == null ? void 0 : _b.trim()) || ((_c = fieldTypes3[activeChild.fieldType]) == null ? void 0 : _c.label)), /* @__PURE__ */ React9.createElement(CommonEditor_default, { f: activeChild, onUpdateField: onUpdateChild }), activeChild.fieldType === "input" && /* @__PURE__ */ React9.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React9.createElement("div", { className: "text-sm font-medium mb-1" }, "Default Answer"), /* @__PURE__ */ React9.createElement(
+    "input",
+    {
+      className: "w-full px-3 py-2 border border-black/20 rounded",
+      value: activeChild.answer || "",
+      onChange: (e) => onUpdateChild("answer", e.target.value),
+      placeholder: "Default value"
+    }
+  )), isChoiceChild && /* @__PURE__ */ React9.createElement(OptionListEditor, { field: activeChild, onUpdateField: onUpdateChild }), /* @__PURE__ */ React9.createElement(
+    "button",
+    {
+      className: "mt-3 px-3 py-2 text-sm text-red-400 border rounded",
+      onClick: onDeleteChild
+    },
+    "Delete this field"
+  )))));
+}
+var SectionEditor_default = SectionEditor;
+
+// src/components/desktopLayout/editPanel/types/LogicEditor.jsx
+import React10 from "react";
+import { useUIApi as useUIApi3, useFormStore as useFormStore5 } from "@mieweb/forms-engine";
+function getOperatorsForFieldType(fieldType) {
+  switch (fieldType) {
+    case "input":
+      return ["equals", "contains"];
+    case "radio":
+    case "selection":
+      return ["equals"];
+    case "check":
+      return ["includes"];
+    default:
+      return ["equals"];
+  }
+}
+function normOption(opt) {
+  if (opt && typeof opt === "object") {
+    const id = opt.id ?? String(opt.value ?? "");
+    const value = String(opt.value ?? opt.label ?? opt.id ?? "");
+    return { id, value };
+  }
+  const s = String(opt ?? "");
+  return { id: s, value: s };
+}
+function LogicEditor() {
+  var _a, _b, _c;
+  const ui = useUIApi3();
+  const byId = useFormStore5((s) => s.byId);
+  const setEnableWhen = useFormStore5((s) => s.setEnableWhen);
+  const updateField = useFormStore5((s) => s.updateField);
+  const selectedId = ((_a = ui == null ? void 0 : ui.selectedFieldId) == null ? void 0 : _a.value) ?? null;
+  const rawParentId = ((_b = ui == null ? void 0 : ui.selectedChildId) == null ? void 0 : _b.ParentId) ?? null;
+  const rawChildId = ((_c = ui == null ? void 0 : ui.selectedChildId) == null ? void 0 : _c.ChildId) ?? null;
+  const selectedField = selectedId ? byId[selectedId] : null;
+  const isSectionCtx = (selectedField == null ? void 0 : selectedField.fieldType) === "section";
+  const sectionChildren = React10.useMemo(() => {
+    if (!isSectionCtx) return [];
+    const arr = Array.isArray(selectedField == null ? void 0 : selectedField.fields) ? selectedField.fields : [];
+    return arr;
+  }, [isSectionCtx, selectedField]);
+  const childValidForSection = React10.useMemo(() => {
+    if (!isSectionCtx || !rawChildId) return false;
+    return sectionChildren.some((c) => c.id === rawChildId);
+  }, [isSectionCtx, rawChildId, sectionChildren]);
+  const initialTarget = React10.useMemo(() => {
+    if (!isSectionCtx) return "";
+    if (childValidForSection) return `child:${rawChildId}`;
+    return "";
+  }, [isSectionCtx, childValidForSection, rawChildId]);
+  const [target, setTarget] = React10.useState(initialTarget);
+  React10.useEffect(() => {
+    setTarget(initialTarget);
+  }, [initialTarget]);
+  React10.useEffect(() => {
+    if (!isSectionCtx) return;
+    if (target && target.startsWith("child:")) {
+      const cid = target.slice(6);
+      ui.selectedChildId.set(selectedId, cid);
+    } else {
+      ui.selectedChildId.set(null, null);
+    }
+  }, [isSectionCtx, target, selectedId, ui]);
+  const isChildScope = Boolean(isSectionCtx && target && target.startsWith("child:"));
+  const effectiveChildId = isChildScope ? target.slice(6) : null;
+  const effectiveId = isChildScope ? effectiveChildId : selectedId;
+  const field = React10.useMemo(() => {
+    if (!effectiveId) return null;
+    if (isChildScope) {
+      return sectionChildren.find((c) => c.id === effectiveChildId) ?? null;
+    }
+    return byId[effectiveId] ?? null;
+  }, [byId, effectiveId, isChildScope, effectiveChildId, sectionChildren]);
+  const targets = React10.useMemo(() => {
+    var _a2, _b2, _c2;
+    const out = [];
+    for (const f of Object.values(byId)) {
+      if (!f) continue;
+      if (f.fieldType === "section" && Array.isArray(f.fields)) {
+        const sectTitle = ((_a2 = f.title) == null ? void 0 : _a2.trim()) || "Section";
+        f.fields.forEach((c) => {
+          var _a3;
+          out.push({
+            id: c.id,
+            parentId: f.id,
+            label: `${sectTitle} \u203A ${((_a3 = c.question) == null ? void 0 : _a3.trim()) || c.id}`,
+            fieldType: c.fieldType,
+            options: Array.isArray(c.options) ? c.options : []
+          });
+        });
+      } else {
+        out.push({
+          id: f.id,
+          parentId: null,
+          label: ((_b2 = f.question) == null ? void 0 : _b2.trim()) || ((_c2 = f.title) == null ? void 0 : _c2.trim()) || f.id,
+          fieldType: f.fieldType,
+          options: Array.isArray(f.options) ? f.options : []
+        });
+      }
+    }
+    return out;
+  }, [byId]);
+  const findTarget = React10.useCallback(
+    (tid) => targets.find((t) => t.id === tid) || null,
+    [targets]
+  );
+  const writeEnableWhen = React10.useCallback(
+    (next) => {
+      if (!effectiveId) return;
+      const normalized = next && Array.isArray(next.conditions) ? { logic: next.logic || "AND", conditions: next.conditions } : void 0;
+      if (isChildScope && selectedId) {
+        updateField(effectiveId, { enableWhen: normalized }, { sectionId: selectedId });
+      } else {
+        setEnableWhen(effectiveId, normalized);
+      }
+    },
+    [effectiveId, isChildScope, selectedId, setEnableWhen, updateField]
+  );
+  const ew = React10.useMemo(() => {
+    return (field == null ? void 0 : field.enableWhen) && Array.isArray(field.enableWhen.conditions) ? { logic: field.enableWhen.logic || "AND", conditions: field.enableWhen.conditions } : { logic: "AND", conditions: [] };
+  }, [field]);
+  const addCond = React10.useCallback(() => {
+    const next = {
+      logic: ew.logic || "AND",
+      conditions: [
+        ...Array.isArray(ew.conditions) ? ew.conditions : [],
+        { targetId: "", operator: "equals", value: "" }
+      ]
+    };
+    writeEnableWhen(next);
+  }, [ew, writeEnableWhen]);
+  const clear = React10.useCallback(() => writeEnableWhen(null), [writeEnableWhen]);
+  const removeCond = React10.useCallback(
+    (idx) => {
+      const base = Array.isArray(ew.conditions) ? ew.conditions : [];
+      const nextConds = base.filter((_, i) => i !== idx);
+      writeEnableWhen({ ...ew, conditions: nextConds });
+    },
+    [ew, writeEnableWhen]
+  );
+  const updateCond = React10.useCallback(
+    (idx, patch) => {
+      const base = Array.isArray(ew.conditions) ? ew.conditions : [];
+      const nextConds = [...base];
+      const curr = nextConds[idx] || { targetId: "", operator: "equals", value: "" };
+      const updated = { ...curr, ...patch };
+      if ("targetId" in patch) {
+        const meta = findTarget(updated.targetId);
+        const ops = getOperatorsForFieldType(meta == null ? void 0 : meta.fieldType);
+        if (!ops.includes(updated.operator)) updated.operator = ops[0] || "equals";
+        const opts = Array.isArray(meta == null ? void 0 : meta.options) ? meta.options.map(normOption) : [];
+        if (opts.length > 0) {
+          const valid = new Set(opts.map((o) => o.id));
+          if (!valid.has(updated.value)) updated.value = "";
+        }
+      }
+      nextConds[idx] = updated;
+      writeEnableWhen({ ...ew, conditions: nextConds });
+    },
+    [ew, findTarget, writeEnableWhen]
+  );
+  const filteredTargets = React10.useMemo(
+    () => targets.filter((t) => t.id !== effectiveId),
+    [targets, effectiveId]
+  );
+  const isDisabled = !field || !effectiveId;
+  return /* @__PURE__ */ React10.createElement("div", { className: "space-y-2" }, isSectionCtx && /* @__PURE__ */ React10.createElement("div", { className: "flex gap-2 items-center" }, /* @__PURE__ */ React10.createElement("label", { className: "text-sm" }, "Target:"), /* @__PURE__ */ React10.createElement(
+    "select",
+    {
+      className: "border p-1 rounded",
+      value: target,
+      onChange: (e) => setTarget(e.target.value)
+    },
+    /* @__PURE__ */ React10.createElement("option", { value: "" }, "Section (this)"),
+    sectionChildren.map((c) => {
+      var _a2, _b2;
+      return /* @__PURE__ */ React10.createElement("option", { key: c.id, value: `child:${c.id}` }, ((_a2 = c.question) == null ? void 0 : _a2.trim()) || ((_b2 = c.title) == null ? void 0 : _b2.trim()) || c.id);
+    })
+  )), /* @__PURE__ */ React10.createElement("div", { className: "flex gap-2 items-center" }, /* @__PURE__ */ React10.createElement("label", { className: "text-sm" }, "Logic:"), /* @__PURE__ */ React10.createElement(
+    "select",
+    {
+      value: ew.logic || "AND",
+      onChange: (e) => writeEnableWhen({ ...ew, logic: e.target.value }),
+      className: "border p-1 rounded",
+      disabled: isDisabled
+    },
+    /* @__PURE__ */ React10.createElement("option", { value: "AND" }, "AND"),
+    /* @__PURE__ */ React10.createElement("option", { value: "OR" }, "OR")
+  ), /* @__PURE__ */ React10.createElement("button", { type: "button", className: "px-2 py-1 border rounded", onClick: addCond, disabled: isDisabled }, "+ Condition"), /* @__PURE__ */ React10.createElement("button", { type: "button", className: "px-2 py-1 border rounded", onClick: clear, disabled: isDisabled }, "Clear")), (Array.isArray(ew.conditions) ? ew.conditions : []).map((c, i) => {
+    const meta = findTarget(c.targetId);
+    const allowedOps = getOperatorsForFieldType(meta == null ? void 0 : meta.fieldType);
+    const optList = Array.isArray(meta == null ? void 0 : meta.options) ? meta.options.map(normOption) : [];
+    const hasOptions = optList.length > 0;
+    return /* @__PURE__ */ React10.createElement("div", { key: i, className: "grid grid-cols-1 sm:grid-cols-7 gap-2 items-center opacity-100" }, /* @__PURE__ */ React10.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => removeCond(i),
+        className: "px-2 py-1 border rounded sm:col-span-1",
+        title: "Remove condition",
+        disabled: isDisabled
+      },
+      "\u2715"
+    ), /* @__PURE__ */ React10.createElement(
+      "select",
+      {
+        className: "border p-1 rounded sm:col-span-3",
+        value: c.targetId,
+        onChange: (e) => updateCond(i, { targetId: e.target.value }),
+        disabled: isDisabled
+      },
+      /* @__PURE__ */ React10.createElement("option", { value: "" }, "\u2014 Select field \u2014"),
+      filteredTargets.map((t) => /* @__PURE__ */ React10.createElement("option", { key: t.id, value: t.id }, t.label))
+    ), /* @__PURE__ */ React10.createElement(
+      "select",
+      {
+        className: "border p-1 rounded sm:col-span-1",
+        value: c.operator,
+        onChange: (e) => updateCond(i, { operator: e.target.value }),
+        disabled: isDisabled || !meta
+      },
+      (meta ? allowedOps : ["equals"]).map((op) => /* @__PURE__ */ React10.createElement("option", { key: op, value: op }, op))
+    ), hasOptions ? /* @__PURE__ */ React10.createElement(
+      "select",
+      {
+        className: "border p-1 rounded sm:col-span-2",
+        value: c.value,
+        onChange: (e) => updateCond(i, { value: e.target.value }),
+        disabled: isDisabled || !meta
+      },
+      /* @__PURE__ */ React10.createElement("option", { value: "" }, "\u2014 Select option \u2014"),
+      optList.map((opt) => /* @__PURE__ */ React10.createElement("option", { key: opt.id, value: opt.id }, opt.value))
+    ) : /* @__PURE__ */ React10.createElement(
+      "input",
+      {
+        className: "border p-1 rounded sm:col-span-2",
+        placeholder: "Enter value",
+        value: c.value,
+        onChange: (e) => updateCond(i, { value: e.target.value }),
+        disabled: isDisabled || !meta
+      }
+    ));
+  }));
+}
+
+// src/components/desktopLayout/editPanel/EditPanel.jsx
+import { useUIApi as useUIApi4, useFormStore as useFormStore6 } from "@mieweb/forms-engine";
+function EditPanel() {
+  const ui = useUIApi4();
+  const selectedField = useFormStore6(
+    React11.useCallback(
+      (s) => ui.selectedFieldId.value ? s.byId[ui.selectedFieldId.value] : null,
+      [ui.selectedFieldId.value]
+    )
+  );
+  const [tab, setTab] = React11.useState("EDIT");
+  const handleActiveChildChange = React11.useCallback(
+    (sectionId, childId) => {
+      ui.selectedChildId.set(sectionId, childId);
+    },
+    [ui.selectedChildId.set]
+  );
+  React11.useEffect(() => {
+    ui.selectedChildId.set(null, null);
+    setTab("EDIT");
+  }, [ui.selectedFieldId.value]);
+  if (ui.state.isPreview) return null;
+  const isNone = !selectedField;
+  const isSection = (selectedField == null ? void 0 : selectedField.fieldType) === "section";
+  return /* @__PURE__ */ React11.createElement(
+    "div",
+    {
+      className: `p-4 bg-white border border-gray-200 rounded-lg shadow-sm overflow-y-auto custom-scrollbar 
+        ${selectedField ? "" : "max-h-32"} max-h-[calc(100svh-19rem)] lg:max-h-[calc(100dvh-15rem)]`
+    },
+    /* @__PURE__ */ React11.createElement(
+      "div",
+      {
+        className: "sticky top-0 z-30 mb-4 inline-flex rounded-md border border-gray-200 overflow-hidden bg-white",
+        role: "tablist"
+      },
+      /* @__PURE__ */ React11.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => setTab("EDIT"),
+          "aria-selected": tab === "EDIT",
+          className: `px-3 py-1 text-sm ${tab === "EDIT" ? "bg-gray-100 font-semibold" : "bg-white"}`
+        },
+        "EDIT"
+      ),
+      /* @__PURE__ */ React11.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => setTab("LOGIC"),
+          "aria-selected": tab === "LOGIC",
+          className: `px-3 py-1 text-sm border-l border-gray-200 ${tab === "LOGIC" ? "bg-gray-100 font-semibold" : "bg-white"}`
+        },
+        "LOGIC"
+      )
+    ),
+    isNone && /* @__PURE__ */ React11.createElement("div", { className: "text-gray-600" }, /* @__PURE__ */ React11.createElement("h3", { className: "text-lg font-semibold mb-2" }, "Edit"), /* @__PURE__ */ React11.createElement("p", null, "Select a field in the center panel to edit its properties.")),
+    !isNone && tab === "EDIT" && /* @__PURE__ */ React11.createElement(React11.Fragment, null, !isSection && /* @__PURE__ */ React11.createElement(NonSectionEditor_default, { f: selectedField }), isSection && /* @__PURE__ */ React11.createElement(
+      SectionEditor_default,
+      {
+        section: selectedField,
+        onActiveChildChange: handleActiveChildChange
+      }
+    )),
+    !isNone && tab === "LOGIC" && /* @__PURE__ */ React11.createElement(LogicEditor, null)
+  );
+}
+
+// src/components/FormBuilderMain.jsx
+import React12, { useMemo as useMemo4 } from "react";
+import { fieldTypes as fieldTypes4, getFieldComponent, useFieldsArray as useFieldsArray3, useFormStore as useFormStore7, useUIApi as useUIApi5, isVisible } from "@mieweb/forms-engine";
+function FormBuilderMain() {
+  const ui = useUIApi5();
+  const fields = useFieldsArray3();
+  const allFlat = useMemo4(() => {
+    const out = [];
+    (fields || []).forEach((f) => {
+      out.push(f);
+      if ((f == null ? void 0 : f.fieldType) === "section" && Array.isArray(f.fields)) out.push(...f.fields);
+    });
+    return out;
+  }, [fields]);
+  const visibleIds = useMemo4(() => {
+    const list = ui.state.isPreview ? fields.filter((f) => isVisible(f, allFlat)) : fields;
+    return list.map((f) => f.id);
+  }, [ui.state.isPreview, fields, allFlat]);
+  return /* @__PURE__ */ React12.createElement(
+    "div",
+    {
+      className: "w-full max-w-4xl mx-auto rounded-lg overflow-y-auto max-h-[calc(100svh-19rem)] lg:max-h-[calc(100dvh-15rem)] custom-scrollbar pr-2",
+      onClick: () => !ui.state.isPreview && ui.selectedFieldId.clear()
+    },
+    visibleIds.length === 0 ? /* @__PURE__ */ React12.createElement(EmptyState, null) : visibleIds.map((id) => /* @__PURE__ */ React12.createElement(FieldRow, { key: id, id }))
+  );
+}
+var FieldRow = React12.memo(function FieldRow2({ id }) {
+  const field = useFormStore7(React12.useCallback((s) => s.byId[id], [id]));
+  if (!field) return null;
+  const FieldComponent = getFieldComponent(field.fieldType);
+  if (!FieldComponent) return null;
+  return /* @__PURE__ */ React12.createElement("div", { className: "mb-1.5", "data-field-type": field.fieldType, "data-field-id": field.id }, /* @__PURE__ */ React12.createElement(FieldComponent, { field }));
+});
+function EmptyState() {
+  return /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col items-center justify-center h-72 bg-gradient-to-br from-gray-50 to-gray-100 border-2 border-dashed border-blue-200 rounded-xl shadow-md text-center px-8 py-10" }, /* @__PURE__ */ React12.createElement("div", { className: "text-xl font-semibold text-gray-700 mb-2" }, "Start building your questionnaire"), /* @__PURE__ */ React12.createElement("div", { className: "text-base text-gray-500" }, "Add tools with ", /* @__PURE__ */ React12.createElement("span", { className: "font-semibold text-blue-500" }, "Tool Panel"), " on the left.", /* @__PURE__ */ React12.createElement("br", null), "Select fields to edit on the ", /* @__PURE__ */ React12.createElement("span", { className: "font-semibold text-blue-500" }, "Edit Panel"), " on the left."));
+}
+
+// src/components/desktopLayout/Layout.jsx
+import { useUIApi as useUIApi6 } from "@mieweb/forms-engine";
+function Layout({ selectedField }) {
+  const ui = useUIApi6();
+  const isPreview = ui.state.isPreview;
+  const isEditModalOpen = ui.state.isEditModalOpen;
+  const panelResetKey = ui.state.panelResetKey;
+  const editMode = !isPreview;
+  const cols = editMode ? "lg:grid-cols-[280px_minmax(0,1fr)_320px]" : "lg:grid-cols-[minmax(0,1fr)]";
+  return /* @__PURE__ */ React13.createElement("div", { className: "w-full max-w-6xl mx-auto px-4 h-fit rounded-lg mt-2" }, /* @__PURE__ */ React13.createElement("div", { className: `grid grid-cols-1 ${cols} gap-3 h-full items-start` }, editMode && /* @__PURE__ */ React13.createElement("div", { className: "hidden lg:block" }, /* @__PURE__ */ React13.createElement(ToolPanel_default, null)), /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement(FormBuilderMain, null)), editMode && /* @__PURE__ */ React13.createElement("div", { className: "hidden lg:block" }, /* @__PURE__ */ React13.createElement(EditPanel, { key: panelResetKey })), editMode && /* @__PURE__ */ React13.createElement("div", { className: "lg:hidden" }, isEditModalOpen && selectedField && /* @__PURE__ */ React13.createElement(
+    "div",
+    {
+      className: "fixed inset-0 top-5 z-50 flex items-center justify-center bg-transparent/30 backdrop-blur-sm p-4",
+      onClick: () => ui.modal.set(false)
+    },
+    /* @__PURE__ */ React13.createElement(
+      "div",
+      {
+        className: "w-full max-w-md mx-auto relative bg-white rounded-lg overflow-hidden",
+        onClick: (e) => e.stopPropagation()
+      },
+      /* @__PURE__ */ React13.createElement(
+        "button",
+        {
+          className: "absolute top-3 right-7 text-gray-500",
+          onClick: () => ui.modal.set(false)
+        },
+        /* @__PURE__ */ React13.createElement("span", { className: "text-3xl" }, "\xD7")
+      ),
+      /* @__PURE__ */ React13.createElement(EditPanel, { key: panelResetKey })
+    )
+  ))));
+}
+
+// src/QuestionnaireEditor.jsx
+import {
+  useFormStore as useFormStore8,
+  useFormApi as useFormApi3,
+  useUIApi as useUIApi7,
+  useFieldsArray as useFieldsArray4
+} from "@mieweb/forms-engine";
+function QuestionnaireEditor({
+  initialFields,
+  onChange,
+  className = "",
+  showHeader = true,
+  showMobileToolbar = true,
+  startInPreview = false
+}) {
+  const ui = useUIApi7();
+  const formStoreInitialized = useRef2(false);
+  useEffect3(() => {
+    if (formStoreInitialized.current) return;
+    if (Array.isArray(initialFields) && initialFields.length) {
+      useFormStore8.getState().replaceAll(initialFields);
+    }
+    ui.preview.set(!!startInPreview);
+    formStoreInitialized.current = true;
+  }, [initialFields, startInPreview, ui.preview]);
+  useEffect3(() => {
+    if (!onChange) return;
+    const unsub = useFormStore8.subscribe((s) => {
+      const arr = s.flatArray ? s.flatArray() : Object.values(s.byId);
+      onChange(arr);
+    });
+    return unsub;
+  }, [onChange]);
+  const selectedField = useFormStore8(
+    React14.useCallback(
+      (s) => ui.selectedFieldId.value ? s.byId[ui.selectedFieldId.value] : null,
+      [ui.selectedFieldId.value]
+    )
+  );
+  return /* @__PURE__ */ React14.createElement("div", { className: `qb-editor-root min-h-screen bg-gray-100 font-titillium ${className}` }, showHeader && /* @__PURE__ */ React14.createElement(Header, null), showMobileToolbar && /* @__PURE__ */ React14.createElement("div", { className: "lg:hidden" }, /* @__PURE__ */ React14.createElement(MobileToolBar, null)), /* @__PURE__ */ React14.createElement(Layout, { selectedField }));
+}
+export {
+  QuestionnaireEditor
+};