@ws-ui/http-handlers-editor 1.11.3-rc1

package/dist/index.es.js

@@ -0,0 +1,1150 @@
+import { jsx as e, jsxs as o, Fragment as G } from "react/jsx-runtime";
+import { ChakraProvider as he } from "@chakra-ui/react";
+import { useSensors as me, useSensor as X, PointerSensor as ge, KeyboardSensor as xe, DndContext as fe, closestCenter as ye, DragOverlay as be } from "@dnd-kit/core";
+import { useSortable as ve, sortableKeyboardCoordinates as Ne, SortableContext as we, verticalListSortingStrategy as Ee, arrayMove as Ce } from "@dnd-kit/sortable";
+import { FdWarningDanger as j, FdRegex as De, FdUnRegex as Te, FdDuplicate as te, FdPen as He, FdTrash as Re, FdCloseNaked as q, FdInfoCircle as ne, FdCheckCircle as Pe, FdClose as Se, FdDragHandle as ke, FdDown as K, FdEmpty as J, FdCode as Ie, FdPlus as Y } from "@ws-ui/icons";
+import { useAppDispatch as B, switchEditor as Ae, useAppSelector as W, selectCatalog as re, openModal as ae, selectTabByPath as _e, setContent as Le, ReduxProvider as Fe, getStore as Oe } from "@ws-ui/store";
+import { ToolbarIcon as $e, chakraTheme as je } from "@ws-ui/webform-editor";
+import { createContext as Ge, useReducer as qe, useEffect as O, useContext as Be, useState as _, Fragment as se, useMemo as Ue } from "react";
+import { generate as V } from "short-uuid";
+import { z as A } from "zod";
+import { CSS as ze } from "@dnd-kit/utilities";
+import { Combobox as S, Transition as le } from "@headlessui/react";
+import { Tooltip as E, ModalColor as ie, ModalType as oe, useHotkeys as Me, ControlledSwitch as Ve, HTTP_HANDLERS_TAB_PATH as Ke } from "@ws-ui/shared";
+import C from "classnames";
+import { useMultipleSelection as F, useCombobox as L } from "downshift";
+import { omit as de, isEqual as Je } from "lodash";
+import { Subject as We } from "rxjs";
+import Z from "randexp";
+const Qe = ({
+  label: t,
+  Icon: a,
+  tab: r,
+  editor: i,
+  onBeforeClick: c
+}) => {
+  const x = B();
+  return /* @__PURE__ */ e(
+    $e,
+    {
+      label: t,
+      Icon: a,
+      as: "button",
+      onClick: () => {
+        c == null || c(), x(
+          Ae({
+            tab: r,
+            editor: i
+          })
+        );
+      }
+    }
+  );
+}, ce = Ge(void 0), $ = new We(), Xe = (t, a) => {
+  switch (a.type) {
+    case "UPDATE_HANDLERS":
+      return {
+        ...t,
+        content: a.payload
+      };
+    case "SET_EDITING_HANDLER": {
+      if (a.payload && a.payload !== t.editing) {
+        const r = t.content.find(
+          (i) => i.id === t.editing
+        );
+        if (r && !Object.values(
+          de(r, ["id", "verbs", "asRegex", "isExpanded"])
+        ).some(Boolean) && r.verbs.length === 0)
+          return {
+            ...t,
+            content: t.content.filter((c) => c.id !== r.id),
+            editing: a.payload
+          };
+      }
+      return {
+        ...t,
+        editing: a.payload
+      };
+    }
+    case "ADD_HANDLER": {
+      const r = V();
+      return {
+        ...t,
+        content: [...t.content, { ...a.payload, id: r }],
+        editing: r,
+        newlyCreatedHandlerID: r
+      };
+    }
+    case "UPDATE_HANDLER":
+      return {
+        ...t,
+        content: t.content.map(
+          (r) => r.id === a.id ? { ...r, ...a.payload } : r
+        ),
+        newlyCreatedHandlerID: null
+      };
+    case "DELETE_HANDLER":
+      return {
+        ...t,
+        content: t.content.filter((r) => r.id !== a.id)
+      };
+    case "TOGGLE_EXPANDED":
+      return {
+        ...t,
+        content: t.content.map(
+          (r) => r.id === a.id ? { ...r, isExpanded: !r.isExpanded } : r
+        )
+      };
+    case "DUPLICATE_HANDLER": {
+      const r = t.content.find(
+        (i) => i.id === a.id
+      );
+      return r ? {
+        ...t,
+        content: [
+          ...t.content,
+          { ...r, id: V(), isExpanded: !0 }
+        ]
+      } : t;
+    }
+    case "TOGGLE_ALL_EXPANDED":
+      return {
+        ...t,
+        content: t.content.map((r) => ({
+          ...r,
+          isExpanded: a.payload
+        }))
+      };
+    case "SYNC_DATA":
+      return {
+        ...t,
+        content: a.payload.map((r) => {
+          const i = t.content.find((c) => c.id === r.id);
+          return i ? {
+            ...r,
+            ...i
+          } : r;
+        })
+      };
+    default:
+      throw new Error("Unknown action type");
+  }
+}, Ye = ({
+  children: t,
+  content: a
+}) => {
+  const r = {
+    content: a,
+    editing: null,
+    newlyCreatedHandlerID: null
+  }, [i, c] = qe(Xe, r);
+  return O(() => {
+    c({
+      type: "SYNC_DATA",
+      payload: a
+    });
+  }, [a]), /* @__PURE__ */ e(ce.Provider, { value: { state: i, dispatch: c }, children: t });
+}, Q = () => {
+  const t = Be(ce);
+  if (!t)
+    throw new Error("useHTTPHandlers must be used within a HandlerProvider");
+  return t;
+}, Ze = ({ initialSelectedItems: t, onChange: a, touched: r, onBlur: i }) => {
+  const c = ["GET", "POST", "PUT", "DELETE"];
+  function x(h, u) {
+    const N = u.toLowerCase();
+    return c.filter(function(s) {
+      return !h.includes(s) && s.toLowerCase().includes(N);
+    });
+  }
+  const [f, g] = _(""), [d, n] = _(t);
+  O(() => {
+    n(t);
+  }, [t]);
+  const l = Ue(
+    () => x(d, f),
+    [d, f]
+  ), { getSelectedItemProps: p, getDropdownProps: b, removeSelectedItem: v } = F({
+    selectedItems: d,
+    onStateChange({ selectedItems: h = [], type: u }) {
+      switch (u) {
+        case F.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case F.stateChangeTypes.SelectedItemKeyDownDelete:
+        case F.stateChangeTypes.DropdownKeyDownBackspace:
+        case F.stateChangeTypes.FunctionRemoveSelectedItem:
+          n(h);
+          break;
+      }
+    }
+  }), {
+    isOpen: y,
+    getToggleButtonProps: w,
+    getMenuProps: k,
+    getInputProps: D,
+    highlightedIndex: T,
+    getItemProps: H,
+    selectedItem: R
+  } = L({
+    items: l,
+    itemToString(h) {
+      return h || "";
+    },
+    defaultHighlightedIndex: 0,
+    // after selection, highlight the first item.
+    selectedItem: null,
+    inputValue: f,
+    stateReducer(h, u) {
+      const { changes: N, type: P } = u;
+      switch (P) {
+        case L.stateChangeTypes.InputKeyDownEnter:
+        case L.stateChangeTypes.ItemClick:
+          return {
+            ...N,
+            isOpen: !0,
+            // keep the menu open after selection.
+            highlightedIndex: 0
+            // with the first option highlighted.
+          };
+        default:
+          return N;
+      }
+    },
+    onStateChange({
+      inputValue: h = "",
+      type: u,
+      selectedItem: N
+    }) {
+      switch (u) {
+        case L.stateChangeTypes.InputKeyDownEnter:
+        case L.stateChangeTypes.ItemClick:
+        case L.stateChangeTypes.InputBlur:
+          N && (n([...d, N]), g(""));
+          break;
+        case L.stateChangeTypes.InputChange:
+          g(h);
+          break;
+      }
+    }
+  });
+  return O(() => {
+    a(d);
+  }, [d]), /* @__PURE__ */ o("div", { className: "relative flex-1", children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: C(
+          "bg-grey-300 focus-within:ring-1 focus-within:ring-primary-dark relative flex items-center w-full cursor-default overflow-hidden rounded p-px text-left focus:outline-none",
+          {
+            "ring-1 ring-primary-dark rounded-b-none": y && l.length,
+            "ring-1 ring-red-400 overflow-visible": d.length === 0 && r
+          }
+        ),
+        onBlur: i,
+        children: [
+          d.length === 0 && !y && r && /* @__PURE__ */ e("div", { className: "absolute inset-x-0 top-[25px] z-[1] rounded-b-sm bg-red-200 px-1 text-xs text-red-600 ring-1 ring-red-600", children: d.length === 0 && "At least one HTTP verb is required" }),
+          d.map(
+            function(u, N) {
+              return /* @__PURE__ */ o(
+                "span",
+                {
+                  className: C(
+                    "bg-grey-600 text-s mr-1 flex items-center rounded px-1 py-0.5 uppercase",
+                    {
+                      "bg-red-400": !c.includes(u)
+                    }
+                  ),
+                  ...p({
+                    selectedItem: u,
+                    index: N
+                  }),
+                  children: [
+                    u,
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        onClick: (P) => {
+                          P.stopPropagation(), v(u);
+                        },
+                        className: "hover:bg-primary-hover ml-2 inline-block cursor-pointer rounded p-0.5 text-gray-100 hover:text-white active:outline-none",
+                        children: /* @__PURE__ */ e(q, {})
+                      }
+                    )
+                  ]
+                },
+                `selected-item-${N}-${u}`
+              );
+            }
+          ),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ...D(
+                b(
+                  { preventKeyAction: y },
+                  { suppressRefError: !0 }
+                )
+              ),
+              className: "flex-grow border-none bg-transparent px-1 py-1 text-xs outline-none",
+              placeholder: d.length === 0 ? "Select HTTP verbs" : "",
+              size: 1
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              className: "absolute inset-y-0 right-0 flex items-center pr-2",
+              type: "button",
+              ...w(),
+              children: /* @__PURE__ */ e(K, { className: "h-3 w-3 text-gray-50", "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      "ul",
+      {
+        className: `ring-primary-dark bg-grey-900 text-s absolute z-10 w-full rounded-b ring-1 p-1 text-white ${!(y && l.length) && "hidden"}`,
+        ...k(),
+        children: y && l.map((h, u) => /* @__PURE__ */ e(
+          "li",
+          {
+            className: C(
+              T === u && "bg-primary-hover",
+              R === h && "font-bold",
+              "flex flex-col p-1 shadow-sm"
+            ),
+            ...H({ item: h, index: u }),
+            children: /* @__PURE__ */ e("span", { children: h })
+          },
+          `${h}${u}`
+        ))
+      }
+    )
+  ] });
+}, et = ({
+  value: t,
+  options: a,
+  errorMessage: r = "",
+  onChange: i,
+  onBlur: c
+}) => {
+  const [x, f] = _(""), g = a.find((n) => n.name === t), d = x === "" ? a : a.filter((n) => n.name.toLowerCase().includes(x.toLowerCase()));
+  return /* @__PURE__ */ e(
+    S,
+    {
+      value: { name: t },
+      onChange: (n) => i(n.name),
+      children: ({ open: n }) => /* @__PURE__ */ o("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: C(
+              "bg-grey-300 focus-within:ring-1 focus-within:ring-primary-dark relative w-full cursor-default overflow-hidden rounded text-left inline-flex",
+              {
+                "ring-1 ring-red-400": !g && t || r,
+                "ring-1 ring-primary-dark rounded-b-none": n,
+                "overflow-visible": !g && !n && r
+              }
+            ),
+            children: [
+              /* @__PURE__ */ e(
+                S.Input,
+                {
+                  className: C(
+                    "bg-grey-300 text-s w-full border-none py-1 px-2 focus:outline-none rounded",
+                    {
+                      "!text-red-400": !g
+                    }
+                  ),
+                  displayValue: (l) => l.name,
+                  onChange: (l) => f(l.target.value),
+                  style: { caretColor: "white" },
+                  onBlur: c
+                }
+              ),
+              /* @__PURE__ */ o("span", { className: "inset-y-0 right-0 flex items-center gap-1 pr-2", children: [
+                !g && !n && r && /* @__PURE__ */ e("div", { className: "absolute inset-x-0 top-[25px] z-[1] rounded-b-sm bg-red-200 px-1 text-xs text-red-600 ring-1 ring-red-600", children: r }),
+                t ? /* @__PURE__ */ o(G, { children: [
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      onClick: () => {
+                        f(""), i("");
+                      },
+                      children: /* @__PURE__ */ e(
+                        q,
+                        {
+                          className: "text-grey-50 h-3 w-3",
+                          "aria-hidden": "true"
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ e("span", { className: "bg-grey-50 h-3 w-[1px] rounded-full" })
+                ] }) : null,
+                /* @__PURE__ */ e(S.Button, { children: /* @__PURE__ */ e(K, { className: "text-grey-50 h-3 w-3", "aria-hidden": "true" }) })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          le,
+          {
+            as: se,
+            leave: "transition ease-in durati pb-0.5on-100",
+            leaveFrom: "opacity-100",
+            leaveTo: "opacity-0",
+            afterLeave: () => f(""),
+            children: /* @__PURE__ */ e(S.Options, { className: "bg-grey-900 text-s text-grey-100 sm:text-s absolute z-50 max-h-60 w-full overflow-auto rounded-b ring-1 ring-primary-dark p-1 focus:outline-none", children: d.length === 0 ? /* @__PURE__ */ o("div", { className: "text-s text-grey-200 relative cursor-default select-none px-0.5 py-0.5 ", children: [
+              /* @__PURE__ */ e(J, { className: "inline h-4 w-4" }),
+              " Nothing found."
+            ] }) : d.map((l, p) => /* @__PURE__ */ e(
+              S.Option,
+              {
+                className: ({ active: b }) => `relative cursor-default select-none ${b ? "bg-primary-hover" : ""}`,
+                value: l,
+                children: ({ selected: b }) => /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: `block truncate p-2 py-1 ${b ? "bg-primary-dark font-medium text-white" : "font-normal"}`,
+                    children: l.name
+                  }
+                ) })
+              },
+              p
+            )) })
+          }
+        )
+      ] })
+    },
+    t
+  );
+}, tt = ({
+  value: t,
+  options: a,
+  onChange: r,
+  errorMessage: i,
+  onBlur: c
+}) => {
+  const [x, f] = _(""), g = a.find((l) => l.name === t), d = g && g.exposed, n = x === "" ? a : a.filter((l) => l.name.toLowerCase().includes(x.toLowerCase()));
+  return /* @__PURE__ */ e(S, { value: { name: t }, onChange: (l) => r(l.name), children: ({ open: l }) => /* @__PURE__ */ o("div", { className: "relative", children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: C(
+          "bg-grey-300 focus-within:ring-1 focus-within:ring-primary-dark relative w-full cursor-default overflow-hidden rounded text-left inline-flex",
+          {
+            "ring-1 ring-red-400": i,
+            "ring-1 ring-yellow-500": d,
+            "ring-1 ring-primary-dark rounded-b-none": l,
+            "overflow-visible": !l && i
+          }
+        ),
+        children: [
+          /* @__PURE__ */ e(
+            S.Input,
+            {
+              className: C(
+                "bg-grey-300 text-s w-full border-none py-1 px-2 focus:outline-none truncate rounded",
+                {
+                  "!text-red-400": i,
+                  "!text-yellow-500": d
+                }
+              ),
+              style: { caretColor: "white" },
+              displayValue: (p) => p.name,
+              onChange: (p) => f(p.target.value),
+              onBlur: c
+            }
+          ),
+          !l && i && /* @__PURE__ */ e(
+            "div",
+            {
+              className: C(
+                "absolute inset-x-0 top-[25px] z-[1] rounded-b-sm bg-red-200 px-1 text-xs text-red-600 ring-1 ring-red-600",
+                { "!text-yellow-500 ring-yellow-500 bg-white": d }
+              ),
+              children: i
+            }
+          ),
+          /* @__PURE__ */ o("span", { className: "inset-y-0 right-0 flex items-center gap-1 pr-2", children: [
+            t ? /* @__PURE__ */ o(G, { children: [
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: () => {
+                    f(""), r("");
+                  },
+                  children: /* @__PURE__ */ e(
+                    q,
+                    {
+                      className: "text-grey-50 h-3 w-3",
+                      "aria-hidden": "true"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ e("span", { className: "bg-grey-50 h-3 w-[1px] rounded-full" })
+            ] }) : null,
+            /* @__PURE__ */ e(S.Button, { children: /* @__PURE__ */ e(K, { className: "text-grey-50 h-3 w-3", "aria-hidden": "true" }) })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      le,
+      {
+        as: se,
+        leave: "transition ease-in duration-100",
+        leaveFrom: "opacity-100",
+        leaveTo: "opacity-0",
+        afterLeave: () => f(""),
+        children: /* @__PURE__ */ e(S.Options, { className: "bg-grey-900 text-s text-grey-100 sm:text-s absolute z-50 max-h-60 w-full overflow-auto rounded-b ring-1 ring-primary-dark p-1 focus:outline-none", children: n.length ? n.map((p, b) => /* @__PURE__ */ e(
+          S.Option,
+          {
+            className: ({ active: v }) => `relative cursor-default select-none ${v ? "bg-primary-hover" : ""}`,
+            value: p,
+            children: ({ selected: v }) => /* @__PURE__ */ e(G, { children: /* @__PURE__ */ o(
+              "span",
+              {
+                className: `text-s flex items-center gap-2 truncate p-2 py-1 ${v ? "bg-primary-dark font-medium text-white" : "font-normal"}`,
+                children: [
+                  p.exposed && /* @__PURE__ */ e(j, { className: "text-yellow-500" }),
+                  /* @__PURE__ */ e("span", { className: "flex-1 truncate", title: p.name, children: p.name })
+                ]
+              }
+            ) })
+          },
+          b
+        )) : /* @__PURE__ */ o("div", { className: "text-s text-grey-200 relative cursor-default select-none px-0.5 py-0.5", children: [
+          /* @__PURE__ */ e(J, { className: "inline h-4 w-4" }),
+          " Nothing found."
+        ] }) })
+      }
+    )
+  ] }) });
+}, pe = ({ listeners: t, attributes: a }) => /* @__PURE__ */ e("button", { ...a, ...t, children: /* @__PURE__ */ e(ke, {}) }), ue = (t) => {
+  var r;
+  if (!t) return "";
+  let a;
+  Z.prototype.max = 8;
+  try {
+    a = (r = new Z(t)) == null ? void 0 : r.gen();
+  } catch {
+    a = "";
+  }
+  return `Requests matching regex will be handled example: ${a}`;
+}, nt = ({
+  id: t,
+  class: a,
+  method: r,
+  pattern: i,
+  verbs: c,
+  regexPattern: x,
+  asRegex: f,
+  listeners: g,
+  attributes: d
+}) => {
+  var P;
+  const [n, l] = _({
+    className: a,
+    method: r,
+    pattern: i,
+    verbs: c,
+    asRegex: f,
+    regexPattern: x
+  }), p = W(re), b = Object.values((p == null ? void 0 : p.singletons) || {}), v = (P = b.find((s) => s.name === n.className)) == null ? void 0 : P.methods.map(({ name: s, exposed: m }) => ({ name: s, exposed: m })), {
+    dispatch: y,
+    state: { newlyCreatedHandlerID: w }
+  } = Q(), k = B();
+  function D() {
+    const { className: s, method: m, asRegex: I, regexPattern: U, pattern: z, verbs: M } = n;
+    return !!(s && m && (I ? U : !z.endsWith("/")) && M.length);
+  }
+  function T() {
+    if (D()) {
+      const { className: s, method: m, asRegex: I, regexPattern: U, pattern: z, verbs: M } = n;
+      y({
+        type: "UPDATE_HANDLER",
+        id: t,
+        payload: {
+          class: s,
+          method: m,
+          verbs: M,
+          asRegex: I,
+          ...I ? { regexPattern: U } : { pattern: z }
+        }
+      }), y({ type: "SET_EDITING_HANDLER", payload: null });
+    }
+  }
+  const H = async () => {
+    const s = {
+      className: a,
+      method: r,
+      pattern: i,
+      regexPattern: x,
+      verbs: c
+    }, m = de(n, ["id", "isExpanded"]);
+    if (!D()) {
+      y({ type: "DELETE_HANDLER", id: `${w}` }), y({ type: "SET_EDITING_HANDLER", payload: null });
+      return;
+    }
+    if (!Je(s, m)) {
+      const { confirmed: I } = await k(
+        ae({
+          title: "Cancel Changes",
+          type: oe.CONFIRM,
+          color: ie.DANGER,
+          message: "Are you sure you want to cancel changes made to this Handler?",
+          icon: "FdWarningDanger"
+        })
+      ).unwrap();
+      if (I) {
+        w === t && y({ type: "DELETE_HANDLER", id: t }), y({ type: "SET_EDITING_HANDLER", payload: null });
+        return;
+      }
+    }
+  };
+  Me(
+    "esc",
+    () => {
+      setTimeout(() => {
+        H();
+      }, 100);
+    },
+    []
+  ), O(() => {
+    $.subscribe((s) => {
+      s === t && T();
+    });
+  }, [n, t]);
+  const [R, h] = _({ className: !1, method: !1, pattern: !1, verbs: !1 }), u = () => {
+    if (R.method && !n.method)
+      return "Method is required";
+    if (v) {
+      const s = v == null ? void 0 : v.find(
+        (m) => m.name === n.method
+      );
+      if (n.method && !s)
+        return `The method "${n.method}" doesn't exist.`;
+      if (s && s.exposed)
+        return `Method "${n.method}" is already exposed`;
+    }
+  }, N = () => {
+    if (R.pattern) {
+      if (n.asRegex && !n.regexPattern)
+        return "Pattern is required";
+      if (!n.asRegex && n.pattern.endsWith("/"))
+        return 'Pattern should not end with a "/"';
+    }
+  };
+  return /* @__PURE__ */ o("div", { className: "flex items-center gap-2 rounded-b py-2", children: [
+    /* @__PURE__ */ o("div", { className: "flex w-60 flex-shrink-0 items-center gap-1", children: [
+      /* @__PURE__ */ e(
+        pe,
+        {
+          listeners: g,
+          attributes: d
+        },
+        "grab-handle"
+      ),
+      /* @__PURE__ */ e(
+        et,
+        {
+          value: n.className,
+          onChange: (s) => {
+            l((m) => ({ ...m, className: s }));
+          },
+          onBlur: () => h((s) => ({ ...s, className: !0 })),
+          options: b,
+          errorMessage: R.className && !n.className ? "Class name is required" : n.className !== "" && !b.find((s) => s.name === n.className) ? `The singleton "${n.className}" doesn't exist.` : void 0
+        },
+        a
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "w-60 flex-shrink-0", children: /* @__PURE__ */ e(
+      tt,
+      {
+        value: n.method,
+        onChange: (s) => {
+          l((m) => ({ ...m, method: s }));
+        },
+        options: v || [],
+        errorMessage: u(),
+        onBlur: () => h((s) => ({ ...s, method: !0 }))
+      }
+    ) }),
+    /* @__PURE__ */ o("div", { className: "relative w-60 flex-shrink-0 flex items-center gap-1 overflow-visible", children: [
+      /* @__PURE__ */ e(
+        E,
+        {
+          label: n.asRegex ? ue(n.regexPattern) : n.pattern && !n.pattern.endsWith("/") ? `Requests starting with /${n.pattern}/ will be handled` : "",
+          children: /* @__PURE__ */ o("div", { className: "relative w-full", children: [
+            !n.asRegex && /* @__PURE__ */ e("span", { className: "absolute text-s inset-y-0 left-1 flex items-center gap-2", children: "/" }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "text",
+                className: C(
+                  "bg-grey-300 text-s block w-full rounded p-1 pl-3 focus:outline-none focus:ring-1 focus:ring-primary-dark",
+                  {
+                    "focus:ring-red-400 ring-1 ring-red-400": R.pattern && n.asRegex && !n.regexPattern
+                  }
+                ),
+                value: n.asRegex ? n.regexPattern : n.pattern,
+                onChange: (s) => {
+                  l((m) => ({
+                    ...m,
+                    [n.asRegex ? "regexPattern" : "pattern"]: s.target.value
+                  }));
+                },
+                onBlur: () => h((s) => ({ ...s, pattern: !0 })),
+                placeholder: n.asRegex ? "Required" : ""
+              }
+            ),
+            N() && /* @__PURE__ */ e("div", { className: "absolute inset-x-0 top-[25px] z-[1] rounded-b-sm bg-red-200 px-1 text-xs text-red-600 ring-1 ring-red-600", children: N() })
+          ] })
+        }
+      ),
+      (f ? x : i) && /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: (s) => {
+            s.stopPropagation(), l((m) => ({
+              ...m,
+              [n.asRegex ? "regexPattern" : "pattern"]: ""
+            }));
+          },
+          className: "absolute inset-y-0 right-6 flex items-center gap-2 pr-2",
+          children: /* @__PURE__ */ e(
+            q,
+            {
+              className: "text-grey-200 h-3 w-3",
+              "aria-hidden": "true"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        E,
+        {
+          label: n.asRegex ? "Requests matching this regex will be handled. Check the match with the __[Match regex command](https://developer.4d.com/docs/commands/match-regex)__" : `Prefixes are considered as regular expressions already containing starting and ending / 
+
+ __[documentation](https://developer.qodly.com/docs/studio/httpHandlers)__`,
+          children: /* @__PURE__ */ e("span", { className: "rounded hover:bg-gray-400/30 w-6 h-6 flex items-center content-center justify-center", children: /* @__PURE__ */ e(ne, { className: "inline h-4 w-4 text-gray-100" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "w-20 px-2 flex justify-center", children: /* @__PURE__ */ e(
+      Ve,
+      {
+        value: !!n.asRegex,
+        onChange: (s) => {
+          const m = s ? { regexPattern: i, asRegex: s } : { pattern: x, asRegex: s };
+          l((I) => ({ ...I, ...m }));
+        },
+        className: `${n.asRegex ? "bg-primary-dark" : "bg-grey-300"}
+relative inline-flex h-5 w-8 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`,
+        children: /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: `${n.asRegex ? "translate-x-3" : "translate-x-0"}
+pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0 transition duration-200 ease-in-out`
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ o("div", { className: "flex flex-1 items-center", children: [
+      /* @__PURE__ */ e(
+        Ze,
+        {
+          initialSelectedItems: n.verbs || [],
+          onChange: (s) => {
+            l((m) => ({ ...m, verbs: s }));
+          },
+          touched: R.verbs,
+          onBlur: () => h((s) => ({ ...s, verbs: !0 }))
+        }
+      ),
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-0.5 px-2", children: [
+        /* @__PURE__ */ e(E, { label: "Duplicate Handler", className: "px-1 py-3", children: /* @__PURE__ */ e(
+          "button",
+          {
+            className: C(
+              "hover:bg-primary-hover rounded p-1 text-gray-100 hover:text-white active:outline-none opacity-50 cursor-not-allowed"
+            ),
+            children: /* @__PURE__ */ e(te, {})
+          }
+        ) }),
+        /* @__PURE__ */ e(E, { label: "Confirm Changes", className: "px-1 py-3", children: /* @__PURE__ */ e(
+          "button",
+          {
+            className: C(
+              "hover:bg-primary-hover rounded p-1 text-gray-100 hover:text-white active:outline-none",
+              {
+                "opacity-50 cursor-not-allowed": !D()
+              }
+            ),
+            onClick: T,
+            children: /* @__PURE__ */ e(Pe, {})
+          }
+        ) }),
+        /* @__PURE__ */ e(E, { label: "Cancel Changes", className: "px-1 py-3", children: /* @__PURE__ */ e(
+          "button",
+          {
+            className: "hover:bg-primary-hover rounded p-1 text-gray-100 hover:text-white active:outline-none",
+            onClick: H,
+            children: /* @__PURE__ */ e(Se, {})
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+}, ee = ({
+  id: t,
+  class: a,
+  method: r,
+  pattern: i,
+  verbs: c,
+  isExpanded: x,
+  regexPattern: f,
+  asRegex: g
+}) => {
+  var P;
+  const { attributes: d, listeners: n, setNodeRef: l, transform: p, transition: b } = ve({ id: t }), v = {
+    transform: ze.Transform.toString(p),
+    transition: b
+  }, {
+    dispatch: y,
+    state: { editing: w }
+  } = Q(), k = B(), D = g ? f : i, T = W(re), H = Object.values((T == null ? void 0 : T.singletons) || {}), R = (P = H == null ? void 0 : H.find((s) => s.name === a)) == null ? void 0 : P.methods.map(({ name: s, exposed: m }) => ({ name: s, exposed: m })), h = H == null ? void 0 : H.find(
+    (s) => s.name === a
+  ), u = R == null ? void 0 : R.find((s) => s.name === r), N = u && u.exposed;
+  return /* @__PURE__ */ e("div", { className: "odd:bg-grey-500", ref: l, style: v, children: w === t ? /* @__PURE__ */ e(
+    nt,
+    {
+      id: t,
+      class: a,
+      method: r,
+      pattern: i,
+      verbs: c,
+      isExpanded: x,
+      regexPattern: f,
+      asRegex: g,
+      listeners: n,
+      attributes: d
+    }
+  ) : /* @__PURE__ */ o(
+    "div",
+    {
+      className: "flex items-center  gap-2 rounded-b py-2.5 text-grey-50",
+      onDoubleClick: () => {
+        $.next(w), y({ type: "SET_EDITING_HANDLER", payload: t });
+      },
+      children: [
+        /* @__PURE__ */ o("div", { className: "flex w-60 flex-shrink-0 items-center gap-1 ", children: [
+          /* @__PURE__ */ e(
+            pe,
+            {
+              listeners: n,
+              attributes: d
+            },
+            "grab-handle"
+          ),
+          /* @__PURE__ */ e("div", { className: "text-s w-full", children: a ? /* @__PURE__ */ o(
+            "div",
+            {
+              className: C(
+                "flex items-center gap-2",
+                !h && "text-red-400"
+              ),
+              children: [
+                !h && /* @__PURE__ */ e(
+                  E,
+                  {
+                    label: `The singleton "${a}" doesn't exist.`,
+                    className: "!bg-red-300 !text-red-400",
+                    children: /* @__PURE__ */ e("span", { className: "rounded p-0.5 hover:bg-red-400/30 pt-0.5 h-5 w-5 flex justify-center content-center", children: /* @__PURE__ */ e(j, { className: "inline h-4 w-4 pb-0.5 text-red-400" }) })
+                  }
+                ),
+                " ",
+                a
+              ]
+            }
+          ) : /* @__PURE__ */ e("span", { className: "text-grey-200 italic", children: "undefined" }) })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "w-60 flex-shrink-0 ", children: /* @__PURE__ */ e("div", { className: "text-s w-full", children: r ? /* @__PURE__ */ o(
+          "div",
+          {
+            className: C(
+              "flex items-center gap-2",
+              !u && "text-red-400",
+              N && "text-yellow-400"
+            ),
+            children: [
+              !u && /* @__PURE__ */ e(
+                E,
+                {
+                  label: `The method "${r}" doesn't exist.`,
+                  className: "!bg-red-300 !text-red-400",
+                  children: /* @__PURE__ */ e("span", { className: "rounded p-0.5 hover:bg-red-400/30 pt-0.5 h-5 w-5 flex justify-center content-center", children: /* @__PURE__ */ e(j, { className: "inline h-4 w-4 pb-0.5 text-red-400" }) })
+                }
+              ),
+              " ",
+              N && /* @__PURE__ */ e(
+                E,
+                {
+                  label: `Method "${r}" is already exposed`,
+                  className: "!bg-yellow-100 !text-yellow-500",
+                  children: /* @__PURE__ */ e("span", { className: "rounded p-0.5 hover:bg-red-400/30 pt-0.5 h-5 w-5 flex justify-center content-center", children: /* @__PURE__ */ e(j, { className: "inline h-4 w-4 pb-0.5 text-yellow-500" }) })
+                }
+              ),
+              " ",
+              r
+            ]
+          }
+        ) : /* @__PURE__ */ e("span", { className: "text-grey-200 italic", children: "undefined" }) }) }),
+        /* @__PURE__ */ e("div", { className: "text-s relative w-60 flex-shrink-0  ", children: D ? /* @__PURE__ */ e(
+          E,
+          {
+            label: g ? ue(D) : `Requests starting with /${D}/ will be handled`,
+            children: /* @__PURE__ */ e("span", { children: D })
+          }
+        ) : /* @__PURE__ */ e("span", { className: "text-grey-200 italic", children: "/" }) }),
+        /* @__PURE__ */ e("div", { className: "px-5 w-20 flex justify-center text-grey-200", children: g ? /* @__PURE__ */ e(De, {}) : /* @__PURE__ */ e(Te, {}) }),
+        /* @__PURE__ */ o("div", { className: "flex flex-1 items-center", children: [
+          /* @__PURE__ */ e("div", { className: "text-s  w-full", children: c.length ? c.join(",") : /* @__PURE__ */ e("span", { className: "text-grey-200 italic", children: "undefined" }) }),
+          /* @__PURE__ */ o("div", { className: "flex items-center gap-0.5 px-2", children: [
+            /* @__PURE__ */ e(E, { label: "Duplicate Handler", className: "px-1 py-3", children: /* @__PURE__ */ e(
+              "button",
+              {
+                className: "hover:bg-primary-hover rounded p-1 text-gray-100 hover:text-white active:outline-none",
+                onClick: () => y({ type: "DUPLICATE_HANDLER", id: t }),
+                children: /* @__PURE__ */ e(te, {})
+              }
+            ) }),
+            /* @__PURE__ */ e(E, { label: "Edit Handler", className: "px-1 py-3", children: /* @__PURE__ */ e(
+              "button",
+              {
+                className: "hover:bg-primary-hover rounded p-1 text-gray-100 hover:text-white active:outline-none",
+                onClick: () => {
+                  $.next(w), y({ type: "SET_EDITING_HANDLER", payload: t });
+                },
+                children: /* @__PURE__ */ e(He, {})
+              }
+            ) }),
+            /* @__PURE__ */ e(E, { label: "Delete Handler", className: "px-1 py-3", placement: "top-end", children: /* @__PURE__ */ e(
+              "button",
+              {
+                className: "hover:bg-primary-hover rounded p-1 text-gray-100 hover:text-white active:outline-none",
+                onClick: async () => {
+                  const { confirmed: s } = await k(
+                    ae({
+                      title: "Delete Handler",
+                      type: oe.CONFIRM,
+                      color: ie.DANGER,
+                      message: "Are you sure you want to remove this Handler?",
+                      icon: "FdWarningDanger"
+                    })
+                  ).unwrap();
+                  s && y({ type: "DELETE_HANDLER", id: t });
+                },
+                children: /* @__PURE__ */ e(Re, {})
+              }
+            ) })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}, rt = A.object({
+  class: A.string().optional(),
+  method: A.string().optional(),
+  verbs: A.string().optional(),
+  id: A.string().optional(),
+  pattern: A.string().optional(),
+  regexPattern: A.string().optional()
+}), at = A.array(rt), st = ({ path: t }) => {
+  const a = W(_e(t)), {
+    dispatch: r,
+    state: { content: i, editing: c }
+  } = Q(), x = me(
+    X(ge),
+    X(xe, {
+      coordinateGetter: Ne
+    })
+  ), [f, g] = _(null), d = i.find((l) => l.id === f), n = B();
+  return O(() => {
+    const l = JSON.stringify(
+      i.map(
+        ({ isExpanded: b, asRegex: v, pattern: y, regexPattern: w, ...k }) => {
+          var T;
+          const D = v ? { regexPattern: w } : { pattern: y };
+          return {
+            ...k,
+            verbs: (T = k.verbs) == null ? void 0 : T.join(","),
+            ...D
+          };
+        }
+      ),
+      null,
+      2
+    ), p = typeof (a == null ? void 0 : a.content) == "string" ? a.content : JSON.stringify(a == null ? void 0 : a.content, null, 2);
+    l !== p && n(
+      Le({
+        path: t,
+        content: l
+      })
+    );
+  }, [i]), /* @__PURE__ */ o("div", { className: "bg-grey-700 flex h-full w-full flex-col  text-white", children: [
+    /* @__PURE__ */ o("div", { className: "flex items-center justify-between border-b border-black p-2", children: [
+      a && /* @__PURE__ */ e(
+        Qe,
+        {
+          label: "Switch to text Editor",
+          Icon: Ie,
+          tab: a,
+          editor: {
+            config: { language: "json" },
+            key: "editors:code"
+          }
+        }
+      ),
+      /* @__PURE__ */ o("p", { className: "text-grey-100 text-s flex items-center gap-1", children: [
+        /* @__PURE__ */ e(ne, { className: "inline text-base text-white" }),
+        " HTTP handlers are evaluated in the order they are declared"
+      ] })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "mt-1 flex flex-1 flex-col overflow-x-auto px-4", children: i.length ? /* @__PURE__ */ o("div", { className: "flex h-full min-w-[1200px] flex-1 flex-col", children: [
+      /* @__PURE__ */ o("div", { className: "mb-3 flex items-center gap-2 border-b", children: [
+        /* @__PURE__ */ e("div", { className: "w-60 flex-shrink-0 text-xs", children: /* @__PURE__ */ e("span", { className: "pl-6", children: "Class" }) }),
+        /* @__PURE__ */ e("div", { className: "w-60 flex-shrink-0 text-xs", children: "Method" }),
+        /* @__PURE__ */ e("div", { className: "w-60 flex-shrink-0 text-xs", children: "Pattern" }),
+        /* @__PURE__ */ e("div", { className: "w-20 px-2 text-center text-xs", children: "As Regex" }),
+        /* @__PURE__ */ o("div", { className: "flex flex-1 items-center justify-between text-xs", children: [
+          /* @__PURE__ */ e("span", { children: "Verbs" }),
+          /* @__PURE__ */ e("div", { className: "flex items-center gap-2 text-2xl", children: /* @__PURE__ */ e(E, { label: "Add a new HTTP Handler", children: /* @__PURE__ */ e(
+            "button",
+            {
+              disabled: !!c,
+              onClick: () => {
+                $.next(c), r({
+                  type: "ADD_HANDLER",
+                  payload: {
+                    class: "",
+                    isExpanded: !0,
+                    method: "",
+                    pattern: "",
+                    verbs: [],
+                    regexPattern: ""
+                  }
+                });
+              },
+              className: "hover:bg-primary-hover rounded p-1 text-gray-100 hover:text-white active:outline-none disabled:cursor-not-allowed disabled:opacity-30",
+              children: /* @__PURE__ */ e(Y, { className: "h-5 w-5" })
+            }
+          ) }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "py-3", children: /* @__PURE__ */ o(
+        fe,
+        {
+          sensors: x,
+          collisionDetection: ye,
+          onDragStart: (l) => {
+            g(l.active.id);
+          },
+          onDragEnd: (l) => {
+            const { active: p, over: b } = l;
+            if (g(null), !(!p || !b) && p.id !== (b == null ? void 0 : b.id)) {
+              const v = i.map((w) => w.id).indexOf(p.id), y = i.map((w) => w.id).indexOf(b.id);
+              r({
+                type: "UPDATE_HANDLERS",
+                payload: Ce(i, v, y)
+              });
+            }
+          },
+          children: [
+            /* @__PURE__ */ e(
+              we,
+              {
+                items: i,
+                strategy: Ee,
+                children: i.map(({ id: l, ...p }) => /* @__PURE__ */ e(ee, { id: l, ...p }, l))
+              }
+            ),
+            /* @__PURE__ */ e(be, { children: f && d ? /* @__PURE__ */ e("div", { className: "opacity-10", children: /* @__PURE__ */ e(ee, { ...d }) }) : null })
+          ]
+        }
+      ) })
+    ] }) : /* @__PURE__ */ o("div", { className: "mt-6", children: [
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(J, { className: "text-grey-200 mx-auto h-9 w-9" }) }),
+      /* @__PURE__ */ o("div", { className: "text-s text-grey-200 mx-auto mt-3 max-w-sm text-center", children: [
+        "There are no http handlers configured yet ",
+        /* @__PURE__ */ e("br", {}),
+        "Please add a new one to add a new one."
+      ] }),
+      /* @__PURE__ */ e("div", { className: "mt-3 flex items-center justify-center", children: /* @__PURE__ */ o(
+        "button",
+        {
+          onClick: () => {
+            $.next(c), r({
+              type: "ADD_HANDLER",
+              payload: {
+                class: "",
+                isExpanded: !0,
+                method: "",
+                pattern: "",
+                verbs: [],
+                regexPattern: ""
+              }
+            });
+          },
+          className: "bg-primary-dark text-s rounded px-2 py-1 flex items-center gap-1",
+          children: [
+            /* @__PURE__ */ e(Y, { className: "inline text-white h-4 w-4" }),
+            " Add New Handler"
+          ]
+        }
+      ) })
+    ] }) })
+  ] });
+}, lt = ({ content: t, path: a }) => {
+  const [r, i] = _(null);
+  function c(d) {
+    let n;
+    try {
+      n = JSON.parse(d);
+    } catch {
+      i("HTTP Handler JSON is invalid"), n = [];
+    }
+    return n;
+  }
+  const x = typeof t == "string" ? c(t) : t;
+  if (!at.safeParse(x).success || r)
+    throw new Error("Invalid JSON");
+  const g = x.map((d) => {
+    var l;
+    const n = !!d.regexPattern;
+    return {
+      ...d,
+      id: d.id ?? V(),
+      verbs: (l = d.verbs) == null ? void 0 : l.split(",").map((p) => p.toLocaleUpperCase()).filter(Boolean),
+      asRegex: n
+    };
+  });
+  return /* @__PURE__ */ e(he, { theme: je, children: /* @__PURE__ */ e(Ye, { content: g, children: /* @__PURE__ */ e(st, { path: a }) }) });
+}, Tt = (t) => /* @__PURE__ */ e(Fe, { store: Oe(), children: /* @__PURE__ */ e("div", { className: "h-screen bg-grey-900", children: /* @__PURE__ */ e(
+  lt,
+  {
+    path: Ke,
+    ...t
+  }
+) }) });
+export {
+  lt as HTTPHandlersEditor,
+  Tt as Standalone
+};
+//# sourceMappingURL=index.es.js.map