@ws-ui/http-handlers-editor 1.11.3-rc2 → 1.11.3-rc3

package/dist/index.es.js

@@ -1,36 +1,37 @@
-import { jsx as e, jsxs as o, Fragment as G } from "react/jsx-runtime";
+import { jsx as e, jsxs as o, Fragment as F } from "react/jsx-runtime";
 import { useSensors as he, useSensor as X, PointerSensor as me, KeyboardSensor as ge, DndContext as xe, closestCenter as fe, DragOverlay as ye } from "@dnd-kit/core";
 import { useSortable as be, sortableKeyboardCoordinates as ve, SortableContext as Ne, verticalListSortingStrategy as we, arrayMove as Ee } from "@dnd-kit/sortable";
-import { FdWarningDanger as j, FdRegex as Ce, FdUnRegex as De, FdDuplicate as te, FdPen as Te, FdTrash as He, FdCloseNaked as q, FdInfoCircle as ne, FdCheckCircle as Re, FdClose as Pe, FdDragHandle as Se, FdDown as K, FdEmpty as J, FdCode as Ie, FdPlus as Y } from "@ws-ui/icons";
-import { useAppDispatch as B, switchEditor as ke, useAppSelector as W, selectCatalog as re, openModal as ae, selectTabByPath as Ae, setContent as _e, ReduxProvider as Le, getStore as Fe } from "@ws-ui/store";
-import { createContext as Oe, useReducer as $e, useEffect as O, useContext as je, useState as _, Fragment as se, useMemo as Ge } from "react";
-import { generate as V } from "short-uuid";
-import { z as A } from "zod";
-import { ToolbarIcon as qe, Tooltip as E, ModalColor as le, ModalType as ie, useHotkeys as Be, ControlledSwitch as Ue, HTTP_HANDLERS_TAB_PATH as ze } from "@ws-ui/shared";
-import { CSS as Me } from "@dnd-kit/utilities";
-import { Combobox as S, Transition as oe } from "@headlessui/react";
+import { FdWarningDanger as q, FdRegex as Ce, FdUnRegex as De, FdDuplicate as te, FdPen as Te, FdTrash as He, FdCloseNaked as M, FdInfoCircle as ne, FdCheckCircle as Re, FdClose as Se, FdDragHandle as Pe, FdDown as J, FdEmpty as W, FdCode as Ie, FdPlus as Y } from "@ws-ui/icons";
+import { useAppDispatch as G, switchEditor as Ae, useAppSelector as B, selectCatalog as re, openModal as ae, selectTabByPath as ke, setContent as _e, selectModals as Le, editModal as Oe, closeModal as Fe, ReduxProvider as $e, getStore as je } from "@ws-ui/store";
+import { createContext as Ge, useReducer as qe, useEffect as $, useContext as Me, useState as _, Fragment as se, useMemo as Be } from "react";
+import { generate as K } from "short-uuid";
+import { z as k } from "zod";
+import { ToolbarIcon as Ue, Tooltip as E, ModalColor as le, ModalType as ie, useHotkeys as ze, ControlledSwitch as Ve, Modal as Ke, HTTP_HANDLERS_TAB_PATH as Je } from "@ws-ui/shared";
+import { CSS as We } from "@dnd-kit/utilities";
+import { Combobox as P, Transition as oe } from "@headlessui/react";
 import C from "classnames";
-import { useMultipleSelection as F, useCombobox as L } from "downshift";
-import { omit as de, isEqual as Ve } from "lodash";
-import { Subject as Ke } from "rxjs";
+import { useMultipleSelection as O, useCombobox as L } from "downshift";
+import { omit as de, isEqual as Qe } from "lodash";
+import { Subject as Xe } from "rxjs";
 import Z from "randexp";
-const Je = ({
+import { HTTP_HANDLERS_EDITOR_SCOPE_CLASS as Ye } from "./common.es.js";
+const Ze = ({
   label: t,
   Icon: a,
   tab: r,
   editor: i,
-  onBeforeClick: c
+  onBeforeClick: d
 }) => {
-  const x = B();
+  const x = G();
   return /* @__PURE__ */ e(
-    qe,
+    Ue,
     {
       label: t,
       Icon: a,
       as: "button",
       onClick: () => {
-        c == null || c(), x(
-          ke({
+        d == null || d(), x(
+          Ae({
             tab: r,
             editor: i
           })
@@ -38,7 +39,7 @@ const Je = ({
       }
     }
   );
-}, ce = Oe(void 0), $ = new Ke(), We = (t, a) => {
+}, ce = Ge(void 0), j = new Xe(), et = (t, a) => {
   switch (a.type) {
     case "UPDATE_HANDLERS":
       return {
@@ -55,7 +56,7 @@ const Je = ({
         ).some(Boolean) && r.verbs.length === 0)
           return {
             ...t,
-            content: t.content.filter((c) => c.id !== r.id),
+            content: t.content.filter((d) => d.id !== r.id),
             editing: a.payload
           };
       }
@@ -65,7 +66,7 @@ const Je = ({
       };
     }
     case "ADD_HANDLER": {
-      const r = V();
+      const r = K();
       return {
         ...t,
         content: [...t.content, { ...a.payload, id: r }],
@@ -101,7 +102,7 @@ const Je = ({
         ...t,
         content: [
           ...t.content,
-          { ...r, id: V(), isExpanded: !0 }
+          { ...r, id: K(), isExpanded: !0 }
         ]
       } : t;
     }
@@ -117,7 +118,7 @@ const Je = ({
       return {
         ...t,
         content: a.payload.map((r) => {
-          const i = t.content.find((c) => c.id === r.id);
+          const i = t.content.find((d) => d.id === r.id);
           return i ? {
             ...r,
             ...i
@@ -127,7 +128,7 @@ const Je = ({
     default:
       throw new Error("Unknown action type");
   }
-}, Qe = ({
+}, tt = ({
   children: t,
   content: a
 }) => {
@@ -135,41 +136,41 @@ const Je = ({
     content: a,
     editing: null,
     newlyCreatedHandlerID: null
-  }, [i, c] = $e(We, r);
-  return O(() => {
-    c({
+  }, [i, d] = qe(et, r);
+  return $(() => {
+    d({
       type: "SYNC_DATA",
       payload: a
     });
-  }, [a]), /* @__PURE__ */ e(ce.Provider, { value: { state: i, dispatch: c }, children: t });
+  }, [a]), /* @__PURE__ */ e(ce.Provider, { value: { state: i, dispatch: d }, children: t });
 }, Q = () => {
-  const t = je(ce);
+  const t = Me(ce);
   if (!t)
     throw new Error("useHTTPHandlers must be used within a HandlerProvider");
   return t;
-}, Xe = ({ initialSelectedItems: t, onChange: a, touched: r, onBlur: i }) => {
-  const c = ["GET", "POST", "PUT", "DELETE"];
+}, nt = ({ initialSelectedItems: t, onChange: a, touched: r, onBlur: i }) => {
+  const d = ["GET", "POST", "PUT", "DELETE"];
   function x(h, u) {
     const N = u.toLowerCase();
-    return c.filter(function(s) {
+    return d.filter(function(s) {
       return !h.includes(s) && s.toLowerCase().includes(N);
     });
   }
-  const [f, g] = _(""), [d, n] = _(t);
-  O(() => {
+  const [f, g] = _(""), [c, n] = _(t);
+  $(() => {
     n(t);
   }, [t]);
-  const l = Ge(
-    () => x(d, f),
-    [d, f]
-  ), { getSelectedItemProps: p, getDropdownProps: b, removeSelectedItem: v } = F({
-    selectedItems: d,
+  const l = Be(
+    () => x(c, f),
+    [c, f]
+  ), { getSelectedItemProps: p, getDropdownProps: b, removeSelectedItem: v } = O({
+    selectedItems: c,
     onStateChange({ selectedItems: h = [], type: u }) {
       switch (u) {
-        case F.stateChangeTypes.SelectedItemKeyDownBackspace:
-        case F.stateChangeTypes.SelectedItemKeyDownDelete:
-        case F.stateChangeTypes.DropdownKeyDownBackspace:
-        case F.stateChangeTypes.FunctionRemoveSelectedItem:
+        case O.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case O.stateChangeTypes.SelectedItemKeyDownDelete:
+        case O.stateChangeTypes.DropdownKeyDownBackspace:
+        case O.stateChangeTypes.FunctionRemoveSelectedItem:
           n(h);
           break;
       }
@@ -192,8 +193,8 @@ const Je = ({
     selectedItem: null,
     inputValue: f,
     stateReducer(h, u) {
-      const { changes: N, type: P } = u;
-      switch (P) {
+      const { changes: N, type: S } = u;
+      switch (S) {
         case L.stateChangeTypes.InputKeyDownEnter:
         case L.stateChangeTypes.ItemClick:
           return {
@@ -216,7 +217,7 @@ const Je = ({
         case L.stateChangeTypes.InputKeyDownEnter:
         case L.stateChangeTypes.ItemClick:
         case L.stateChangeTypes.InputBlur:
-          N && (n([...d, N]), g(""));
+          N && (n([...c, N]), g(""));
           break;
         case L.stateChangeTypes.InputChange:
           g(h);
@@ -224,9 +225,9 @@ const Je = ({
       }
     }
   });
-  return O(() => {
-    a(d);
-  }, [d]), /* @__PURE__ */ o("div", { className: "relative flex-1", children: [
+  return $(() => {
+    a(c);
+  }, [c]), /* @__PURE__ */ o("div", { className: "relative flex-1", children: [
     /* @__PURE__ */ o(
       "div",
       {
@@ -234,13 +235,13 @@ const Je = ({
           "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
+            "ring-1 ring-red-400 overflow-visible": c.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(
+          c.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: c.length === 0 && "At least one HTTP verb is required" }),
+          c.map(
             function(u, N) {
               return /* @__PURE__ */ o(
                 "span",
@@ -248,7 +249,7 @@ const Je = ({
                   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)
+                      "bg-red-400": !d.includes(u)
                     }
                   ),
                   ...p({
@@ -260,11 +261,11 @@ const Je = ({
                     /* @__PURE__ */ e(
                       "span",
                       {
-                        onClick: (P) => {
-                          P.stopPropagation(), v(u);
+                        onClick: (S) => {
+                          S.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, {})
+                        children: /* @__PURE__ */ e(M, {})
                       }
                     )
                   ]
@@ -283,7 +284,7 @@ const Je = ({
                 )
               ),
               className: "flex-grow border-none bg-transparent px-1 py-1 text-xs outline-none",
-              placeholder: d.length === 0 ? "Select HTTP verbs" : "",
+              placeholder: c.length === 0 ? "Select HTTP verbs" : "",
               size: 1
             }
           ),
@@ -293,7 +294,7 @@ const Je = ({
               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" })
+              children: /* @__PURE__ */ e(J, { className: "h-3 w-3 text-gray-50", "aria-hidden": "true" })
             }
           )
         ]
@@ -320,16 +321,16 @@ const Je = ({
       }
     )
   ] });
-}, Ye = ({
+}, rt = ({
   value: t,
   options: a,
   errorMessage: r = "",
   onChange: i,
-  onBlur: c
+  onBlur: d
 }) => {
-  const [x, f] = _(""), g = a.find((n) => n.name === t), d = x === "" ? a : a.filter((n) => n.name.toLowerCase().includes(x.toLowerCase()));
+  const [x, f] = _(""), g = a.find((n) => n.name === t), c = x === "" ? a : a.filter((n) => n.name.toLowerCase().includes(x.toLowerCase()));
   return /* @__PURE__ */ e(
-    S,
+    P,
     {
       value: { name: t },
       onChange: (n) => i(n.name),
@@ -347,7 +348,7 @@ const Je = ({
             ),
             children: [
               /* @__PURE__ */ e(
-                S.Input,
+                P.Input,
                 {
                   className: C(
                     "bg-grey-300 text-s w-full border-none py-1 px-2 focus:outline-none rounded",
@@ -358,12 +359,12 @@ const Je = ({
                   displayValue: (l) => l.name,
                   onChange: (l) => f(l.target.value),
                   style: { caretColor: "white" },
-                  onBlur: c
+                  onBlur: d
                 }
               ),
               /* @__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: [
+                t ? /* @__PURE__ */ o(F, { children: [
                   /* @__PURE__ */ e(
                     "button",
                     {
@@ -371,7 +372,7 @@ const Je = ({
                         f(""), i("");
                       },
                       children: /* @__PURE__ */ e(
-                        q,
+                        M,
                         {
                           className: "text-grey-50 h-3 w-3",
                           "aria-hidden": "true"
@@ -381,7 +382,7 @@ const Je = ({
                   ),
                   /* @__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(P.Button, { children: /* @__PURE__ */ e(J, { className: "text-grey-50 h-3 w-3", "aria-hidden": "true" }) })
               ] })
             ]
           }
@@ -394,15 +395,15 @@ const Je = ({
             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" }),
+            children: /* @__PURE__ */ e(P.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: c.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(W, { className: "inline h-4 w-4" }),
               " Nothing found."
-            ] }) : d.map((l, p) => /* @__PURE__ */ e(
-              S.Option,
+            ] }) : c.map((l, p) => /* @__PURE__ */ e(
+              P.Option,
               {
                 className: ({ active: b }) => `relative cursor-default select-none ${b ? "bg-primary-hover" : ""}`,
                 value: l,
-                children: ({ selected: b }) => /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
+                children: ({ selected: b }) => /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(
                   "span",
                   {
                     className: `block truncate p-2 py-1 ${b ? "bg-primary-dark font-medium text-white" : "font-normal"}`,
@@ -418,15 +419,15 @@ const Je = ({
     },
     t
   );
-}, Ze = ({
+}, at = ({
   value: t,
   options: a,
   onChange: r,
   errorMessage: i,
-  onBlur: c
+  onBlur: d
 }) => {
-  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: [
+  const [x, f] = _(""), g = a.find((l) => l.name === t), c = g && g.exposed, n = x === "" ? a : a.filter((l) => l.name.toLowerCase().includes(x.toLowerCase()));
+  return /* @__PURE__ */ e(P, { value: { name: t }, onChange: (l) => r(l.name), children: ({ open: l }) => /* @__PURE__ */ o("div", { className: "relative", children: [
     /* @__PURE__ */ o(
       "div",
       {
@@ -434,26 +435,26 @@ const Je = ({
           "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-yellow-500": c,
             "ring-1 ring-primary-dark rounded-b-none": l,
             "overflow-visible": !l && i
           }
         ),
         children: [
           /* @__PURE__ */ e(
-            S.Input,
+            P.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
+                  "!text-yellow-500": c
                 }
               ),
               style: { caretColor: "white" },
               displayValue: (p) => p.name,
               onChange: (p) => f(p.target.value),
-              onBlur: c
+              onBlur: d
             }
           ),
           !l && i && /* @__PURE__ */ e(
@@ -461,13 +462,13 @@ const Je = ({
             {
               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 }
+                { "!text-yellow-500 ring-yellow-500 bg-white": c }
               ),
               children: i
             }
           ),
           /* @__PURE__ */ o("span", { className: "inset-y-0 right-0 flex items-center gap-1 pr-2", children: [
-            t ? /* @__PURE__ */ o(G, { children: [
+            t ? /* @__PURE__ */ o(F, { children: [
               /* @__PURE__ */ e(
                 "button",
                 {
@@ -475,7 +476,7 @@ const Je = ({
                     f(""), r("");
                   },
                   children: /* @__PURE__ */ e(
-                    q,
+                    M,
                     {
                       className: "text-grey-50 h-3 w-3",
                       "aria-hidden": "true"
@@ -485,7 +486,7 @@ const Je = ({
               ),
               /* @__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(P.Button, { children: /* @__PURE__ */ e(J, { className: "text-grey-50 h-3 w-3", "aria-hidden": "true" }) })
           ] })
         ]
       }
@@ -498,17 +499,17 @@ const Je = ({
         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,
+        children: /* @__PURE__ */ e(P.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(
+          P.Option,
           {
             className: ({ active: v }) => `relative cursor-default select-none ${v ? "bg-primary-hover" : ""}`,
             value: p,
-            children: ({ selected: v }) => /* @__PURE__ */ e(G, { children: /* @__PURE__ */ o(
+            children: ({ selected: v }) => /* @__PURE__ */ e(F, { 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" }),
+                  p.exposed && /* @__PURE__ */ e(q, { className: "text-yellow-500" }),
                   /* @__PURE__ */ e("span", { className: "flex-1 truncate", title: p.name, children: p.name })
                 ]
               }
@@ -516,13 +517,13 @@ const Je = ({
           },
           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" }),
+          /* @__PURE__ */ e(W, { className: "inline h-4 w-4" }),
           " Nothing found."
         ] }) })
       }
     )
   ] }) });
-}, pe = ({ listeners: t, attributes: a }) => /* @__PURE__ */ e("button", { ...a, ...t, children: /* @__PURE__ */ e(Se, {}) }), ue = (t) => {
+}, pe = ({ listeners: t, attributes: a }) => /* @__PURE__ */ e("button", { ...a, ...t, children: /* @__PURE__ */ e(Pe, {}) }), ue = (t) => {
   var r;
   if (!t) return "";
   let a;
@@ -533,45 +534,45 @@ const Je = ({
     a = "";
   }
   return `Requests matching regex will be handled example: ${a}`;
-}, et = ({
+}, st = ({
   id: t,
   class: a,
   method: r,
   pattern: i,
-  verbs: c,
+  verbs: d,
   regexPattern: x,
   asRegex: f,
   listeners: g,
-  attributes: d
+  attributes: c
 }) => {
-  var P;
+  var S;
   const [n, l] = _({
     className: a,
     method: r,
     pattern: i,
-    verbs: c,
+    verbs: d,
     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 })), {
+  }), p = B(re), b = Object.values((p == null ? void 0 : p.singletons) || {}), v = (S = b.find((s) => s.name === n.className)) == null ? void 0 : S.methods.map(({ name: s, exposed: m }) => ({ name: s, exposed: m })), {
     dispatch: y,
     state: { newlyCreatedHandlerID: w }
-  } = Q(), I = B();
+  } = Q(), I = G();
   function D() {
-    const { className: s, method: m, asRegex: k, regexPattern: U, pattern: z, verbs: M } = n;
-    return !!(s && m && (k ? U : !z.endsWith("/")) && M.length);
+    const { className: s, method: m, asRegex: A, regexPattern: U, pattern: z, verbs: V } = n;
+    return !!(s && m && (A ? U : !z.endsWith("/")) && V.length);
   }
   function T() {
     if (D()) {
-      const { className: s, method: m, asRegex: k, regexPattern: U, pattern: z, verbs: M } = n;
+      const { className: s, method: m, asRegex: A, regexPattern: U, pattern: z, verbs: V } = n;
       y({
         type: "UPDATE_HANDLER",
         id: t,
         payload: {
           class: s,
           method: m,
-          verbs: M,
-          asRegex: k,
-          ...k ? { regexPattern: U } : { pattern: z }
+          verbs: V,
+          asRegex: A,
+          ...A ? { regexPattern: U } : { pattern: z }
         }
       }), y({ type: "SET_EDITING_HANDLER", payload: null });
     }
@@ -582,14 +583,14 @@ const Je = ({
       method: r,
       pattern: i,
       regexPattern: x,
-      verbs: c
+      verbs: d
     }, m = de(n, ["id", "isExpanded"]);
     if (!D()) {
       y({ type: "DELETE_HANDLER", id: `${w}` }), y({ type: "SET_EDITING_HANDLER", payload: null });
       return;
     }
-    if (!Ve(s, m)) {
-      const { confirmed: k } = await I(
+    if (!Qe(s, m)) {
+      const { confirmed: A } = await I(
         ae({
           title: "Cancel Changes",
           type: ie.CONFIRM,
@@ -598,13 +599,13 @@ const Je = ({
           icon: "FdWarningDanger"
         })
       ).unwrap();
-      if (k) {
+      if (A) {
         w === t && y({ type: "DELETE_HANDLER", id: t }), y({ type: "SET_EDITING_HANDLER", payload: null });
         return;
       }
     }
   };
-  Be(
+  ze(
     "esc",
     () => {
       setTimeout(() => {
@@ -612,8 +613,8 @@ const Je = ({
       }, 100);
     },
     []
-  ), O(() => {
-    $.subscribe((s) => {
+  ), $(() => {
+    j.subscribe((s) => {
       s === t && T();
     });
   }, [n, t]);
@@ -643,12 +644,12 @@ const Je = ({
         pe,
         {
           listeners: g,
-          attributes: d
+          attributes: c
         },
         "grab-handle"
       ),
       /* @__PURE__ */ e(
-        Ye,
+        rt,
         {
           value: n.className,
           onChange: (s) => {
@@ -662,7 +663,7 @@ const Je = ({
       )
     ] }),
     /* @__PURE__ */ e("div", { className: "w-60 flex-shrink-0", children: /* @__PURE__ */ e(
-      Ze,
+      at,
       {
         value: n.method,
         onChange: (s) => {
@@ -716,7 +717,7 @@ const Je = ({
           },
           className: "absolute inset-y-0 right-6 flex items-center gap-2 pr-2",
           children: /* @__PURE__ */ e(
-            q,
+            M,
             {
               className: "text-grey-200 h-3 w-3",
               "aria-hidden": "true"
@@ -735,12 +736,12 @@ const Je = ({
       )
     ] }),
     /* @__PURE__ */ e("div", { className: "w-20 px-2 flex justify-center", children: /* @__PURE__ */ e(
-      Ue,
+      Ve,
       {
         value: !!n.asRegex,
         onChange: (s) => {
           const m = s ? { regexPattern: i, asRegex: s } : { pattern: x, asRegex: s };
-          l((k) => ({ ...k, ...m }));
+          l((A) => ({ ...A, ...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`,
@@ -756,7 +757,7 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
     ) }),
     /* @__PURE__ */ o("div", { className: "flex flex-1 items-center", children: [
       /* @__PURE__ */ e(
-        Xe,
+        nt,
         {
           initialSelectedItems: n.verbs || [],
           onChange: (s) => {
@@ -794,7 +795,7 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
           {
             className: "hover:bg-primary-hover rounded p-1 text-gray-100 hover:text-white active:outline-none",
             onClick: H,
-            children: /* @__PURE__ */ e(Pe, {})
+            children: /* @__PURE__ */ e(Se, {})
           }
         ) })
       ] })
@@ -805,41 +806,41 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
   class: a,
   method: r,
   pattern: i,
-  verbs: c,
+  verbs: d,
   isExpanded: x,
   regexPattern: f,
   asRegex: g
 }) => {
-  var P;
-  const { attributes: d, listeners: n, setNodeRef: l, transform: p, transition: b } = be({ id: t }), v = {
-    transform: Me.Transform.toString(p),
+  var S;
+  const { attributes: c, listeners: n, setNodeRef: l, transform: p, transition: b } = be({ id: t }), v = {
+    transform: We.Transform.toString(p),
     transition: b
   }, {
     dispatch: y,
     state: { editing: w }
-  } = Q(), I = 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(
+  } = Q(), I = G(), D = g ? f : i, T = B(re), H = Object.values((T == null ? void 0 : T.singletons) || {}), R = (S = H == null ? void 0 : H.find((s) => s.name === a)) == null ? void 0 : S.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(
-    et,
+    st,
     {
       id: t,
       class: a,
       method: r,
       pattern: i,
-      verbs: c,
+      verbs: d,
       isExpanded: x,
       regexPattern: f,
       asRegex: g,
       listeners: n,
-      attributes: d
+      attributes: c
     }
   ) : /* @__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 });
+        j.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: [
@@ -847,7 +848,7 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
             pe,
             {
               listeners: n,
-              attributes: d
+              attributes: c
             },
             "grab-handle"
           ),
@@ -864,7 +865,7 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
                   {
                     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" }) })
+                    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(q, { className: "inline h-4 w-4 pb-0.5 text-red-400" }) })
                   }
                 ),
                 " ",
@@ -887,7 +888,7 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
                 {
                   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" }) })
+                  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(q, { className: "inline h-4 w-4 pb-0.5 text-red-400" }) })
                 }
               ),
               " ",
@@ -896,7 +897,7 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
                 {
                   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" }) })
+                  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(q, { className: "inline h-4 w-4 pb-0.5 text-yellow-500" }) })
                 }
               ),
               " ",
@@ -913,7 +914,7 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
         ) : /* @__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(Ce, {}) : /* @__PURE__ */ e(De, {}) }),
         /* @__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__ */ e("div", { className: "text-s  w-full", children: d.length ? d.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",
@@ -928,7 +929,7 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
               {
                 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 });
+                  j.next(w), y({ type: "SET_EDITING_HANDLER", payload: t });
                 },
                 children: /* @__PURE__ */ e(Te, {})
               }
@@ -957,24 +958,24 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
       ]
     }
   ) });
-}, tt = 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()
-}), nt = A.array(tt), rt = ({ path: t }) => {
-  const a = W(Ae(t)), {
+}, lt = k.object({
+  class: k.string().optional(),
+  method: k.string().optional(),
+  verbs: k.string().optional(),
+  id: k.string().optional(),
+  pattern: k.string().optional(),
+  regexPattern: k.string().optional()
+}), it = k.array(lt), ot = ({ path: t }) => {
+  const a = B(ke(t)), {
     dispatch: r,
-    state: { content: i, editing: c }
+    state: { content: i, editing: d }
   } = Q(), x = he(
     X(me),
     X(ge, {
       coordinateGetter: ve
     })
-  ), [f, g] = _(null), d = i.find((l) => l.id === f), n = B();
-  return O(() => {
+  ), [f, g] = _(null), c = i.find((l) => l.id === f), n = G();
+  return $(() => {
     const l = JSON.stringify(
       i.map(
         ({ isExpanded: b, asRegex: v, pattern: y, regexPattern: w, ...I }) => {
@@ -999,7 +1000,7 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
   }, [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(
-        Je,
+        Ze,
         {
           label: "Switch to text Editor",
           Icon: Ie,
@@ -1026,9 +1027,9 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
           /* @__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,
+              disabled: !!d,
               onClick: () => {
-                $.next(c), r({
+                j.next(d), r({
                   type: "ADD_HANDLER",
                   payload: {
                     class: "",
@@ -1073,12 +1074,12 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
                 children: i.map(({ id: l, ...p }) => /* @__PURE__ */ e(ee, { id: l, ...p }, l))
               }
             ),
-            /* @__PURE__ */ e(ye, { children: f && d ? /* @__PURE__ */ e("div", { className: "opacity-10", children: /* @__PURE__ */ e(ee, { ...d }) }) : null })
+            /* @__PURE__ */ e(ye, { children: f && c ? /* @__PURE__ */ e("div", { className: "opacity-10", children: /* @__PURE__ */ e(ee, { ...c }) }) : 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__ */ e("div", { children: /* @__PURE__ */ e(W, { 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", {}),
@@ -1088,7 +1089,7 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
         "button",
         {
           onClick: () => {
-            $.next(c), r({
+            j.next(d), r({
               type: "ADD_HANDLER",
               payload: {
                 class: "",
@@ -1109,40 +1110,58 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
       ) })
     ] }) })
   ] });
-}, at = ({ content: t, path: a }) => {
+}, dt = ({ content: t, path: a }) => {
   const [r, i] = _(null);
-  function c(d) {
+  function d(c) {
     let n;
     try {
-      n = JSON.parse(d);
+      n = JSON.parse(c);
     } catch {
       i("HTTP Handler JSON is invalid"), n = [];
     }
     return n;
   }
-  const x = typeof t == "string" ? c(t) : t;
-  if (!nt.safeParse(x).success || r)
+  const x = typeof t == "string" ? d(t) : t;
+  if (!it.safeParse(x).success || r)
     throw new Error("Invalid JSON");
-  const g = x.map((d) => {
+  const g = x.map((c) => {
     var l;
-    const n = !!d.regexPattern;
+    const n = !!c.regexPattern;
     return {
-      ...d,
-      id: d.id ?? V(),
-      verbs: (l = d.verbs) == null ? void 0 : l.split(",").map((p) => p.toLocaleUpperCase()).filter(Boolean),
+      ...c,
+      id: c.id ?? K(),
+      verbs: (l = c.verbs) == null ? void 0 : l.split(",").map((p) => p.toLocaleUpperCase()).filter(Boolean),
       asRegex: n
     };
   });
-  return /* @__PURE__ */ e(Qe, { content: g, children: /* @__PURE__ */ e(rt, { path: a }) });
-}, wt = (t) => /* @__PURE__ */ e(Le, { store: Fe(), children: /* @__PURE__ */ e("div", { className: "h-screen bg-grey-900", children: /* @__PURE__ */ e(
-  at,
-  {
-    path: ze,
-    ...t
-  }
-) }) });
+  return /* @__PURE__ */ e(tt, { content: g, children: /* @__PURE__ */ e(ot, { path: a }) });
+}, ct = () => document.querySelector(`.${Ye}`) || document.body, pt = () => {
+  const t = B(Le), a = G();
+  return /* @__PURE__ */ e(F, { children: t.map((r, i) => /* @__PURE__ */ e(
+    Ke,
+    {
+      hasOverlay: i === 0,
+      ...r,
+      onClose: (d) => a(Fe(d)),
+      onEdit: (d) => a(Oe(d)),
+      container: ct()
+    },
+    r.id
+  )) });
+}, Pt = ({ content: t = [], ...a }) => /* @__PURE__ */ o($e, { store: je(), children: [
+  /* @__PURE__ */ e("div", { className: "h-screen bg-grey-900", children: /* @__PURE__ */ e(
+    dt,
+    {
+      path: Je,
+      content: t,
+      ...a
+    }
+  ) }),
+  /* @__PURE__ */ e(pt, {})
+] });
 export {
-  at as HTTPHandlersEditor,
-  wt as Standalone
+  dt as HTTPHandlersEditor,
+  Ye as HTTP_HANDLERS_EDITOR_SCOPE_CLASS,
+  Pt as Standalone
 };
 //# sourceMappingURL=index.es.js.map