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

package/dist/index.es.js

@@ -1,37 +1,36 @@
-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 { 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 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 Je } from "lodash";
-import { Subject as We } 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 Qe = ({
+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(
-    $e,
+    Ue,
     {
       label: t,
       Icon: a,
       as: "button",
       onClick: () => {
-        c == null || c(), x(
+        d == null || d(), x(
           Ae({
             tab: r,
             editor: i
@@ -40,7 +39,7 @@ const Qe = ({
       }
     }
   );
-}, ce = Ge(void 0), $ = new We(), Xe = (t, a) => {
+}, ce = Ge(void 0), j = new Xe(), et = (t, a) => {
   switch (a.type) {
     case "UPDATE_HANDLERS":
       return {
@@ -57,7 +56,7 @@ const Qe = ({
         ).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
           };
       }
@@ -67,7 +66,7 @@ const Qe = ({
       };
     }
     case "ADD_HANDLER": {
-      const r = V();
+      const r = K();
       return {
         ...t,
         content: [...t.content, { ...a.payload, id: r }],
@@ -103,7 +102,7 @@ const Qe = ({
         ...t,
         content: [
           ...t.content,
-          { ...r, id: V(), isExpanded: !0 }
+          { ...r, id: K(), isExpanded: !0 }
         ]
       } : t;
     }
@@ -119,7 +118,7 @@ const Qe = ({
       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
@@ -129,7 +128,7 @@ const Qe = ({
     default:
       throw new Error("Unknown action type");
   }
-}, Ye = ({
+}, tt = ({
   children: t,
   content: a
 }) => {
@@ -137,41 +136,41 @@ const Qe = ({
     content: a,
     editing: null,
     newlyCreatedHandlerID: null
-  }, [i, c] = qe(Xe, 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 = Be(ce);
+  const t = Me(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"];
+}, 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 = Ue(
-    () => 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;
       }
@@ -179,7 +178,7 @@ const Qe = ({
   }), {
     isOpen: y,
     getToggleButtonProps: w,
-    getMenuProps: k,
+    getMenuProps: I,
     getInputProps: D,
     highlightedIndex: T,
     getItemProps: H,
@@ -194,8 +193,8 @@ const Qe = ({
     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 {
@@ -218,7 +217,7 @@ const Qe = ({
         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);
@@ -226,9 +225,9 @@ const Qe = ({
       }
     }
   });
-  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",
       {
@@ -236,13 +235,13 @@ const Qe = ({
           "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",
@@ -250,7 +249,7 @@ const Qe = ({
                   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({
@@ -262,11 +261,11 @@ const Qe = ({
                     /* @__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, {})
                       }
                     )
                   ]
@@ -285,7 +284,7 @@ const Qe = ({
                 )
               ),
               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
             }
           ),
@@ -295,7 +294,7 @@ const Qe = ({
               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" })
             }
           )
         ]
@@ -305,7 +304,7 @@ const Qe = ({
       "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(),
+        ...I(),
         children: y && l.map((h, u) => /* @__PURE__ */ e(
           "li",
           {
@@ -322,16 +321,16 @@ const Qe = ({
       }
     )
   ] });
-}, et = ({
+}, 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),
@@ -349,7 +348,7 @@ const Qe = ({
             ),
             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",
@@ -360,12 +359,12 @@ const Qe = ({
                   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",
                     {
@@ -373,7 +372,7 @@ const Qe = ({
                         f(""), i("");
                       },
                       children: /* @__PURE__ */ e(
-                        q,
+                        M,
                         {
                           className: "text-grey-50 h-3 w-3",
                           "aria-hidden": "true"
@@ -383,28 +382,28 @@ const Qe = ({
                   ),
                   /* @__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" }) })
               ] })
             ]
           }
         ),
         /* @__PURE__ */ e(
-          le,
+          oe,
           {
             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" }),
+            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"}`,
@@ -420,15 +419,15 @@ const Qe = ({
     },
     t
   );
-}, tt = ({
+}, 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",
       {
@@ -436,26 +435,26 @@ const Qe = ({
           "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(
@@ -463,13 +462,13 @@ const Qe = ({
             {
               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",
                 {
@@ -477,7 +476,7 @@ const Qe = ({
                     f(""), r("");
                   },
                   children: /* @__PURE__ */ e(
-                    q,
+                    M,
                     {
                       className: "text-grey-50 h-3 w-3",
                       "aria-hidden": "true"
@@ -487,30 +486,30 @@ const Qe = ({
               ),
               /* @__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" }) })
           ] })
         ]
       }
     ),
     /* @__PURE__ */ e(
-      le,
+      oe,
       {
         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,
+        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 })
                 ]
               }
@@ -518,13 +517,13 @@ const Qe = ({
           },
           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(ke, {}) }), 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;
@@ -535,45 +534,45 @@ const Qe = ({
     a = "";
   }
   return `Requests matching regex will be handled example: ${a}`;
-}, nt = ({
+}, 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(), k = B();
+  } = Q(), I = G();
   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);
+    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: I, 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: I,
-          ...I ? { regexPattern: U } : { pattern: z }
+          verbs: V,
+          asRegex: A,
+          ...A ? { regexPattern: U } : { pattern: z }
         }
       }), y({ type: "SET_EDITING_HANDLER", payload: null });
     }
@@ -584,29 +583,29 @@ const Qe = ({
       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 (!Je(s, m)) {
-      const { confirmed: I } = await k(
+    if (!Qe(s, m)) {
+      const { confirmed: A } = await I(
         ae({
           title: "Cancel Changes",
-          type: oe.CONFIRM,
-          color: ie.DANGER,
+          type: ie.CONFIRM,
+          color: le.DANGER,
           message: "Are you sure you want to cancel changes made to this Handler?",
           icon: "FdWarningDanger"
         })
       ).unwrap();
-      if (I) {
+      if (A) {
         w === t && y({ type: "DELETE_HANDLER", id: t }), y({ type: "SET_EDITING_HANDLER", payload: null });
         return;
       }
     }
   };
-  Me(
+  ze(
     "esc",
     () => {
       setTimeout(() => {
@@ -614,8 +613,8 @@ const Qe = ({
       }, 100);
     },
     []
-  ), O(() => {
-    $.subscribe((s) => {
+  ), $(() => {
+    j.subscribe((s) => {
       s === t && T();
     });
   }, [n, t]);
@@ -645,12 +644,12 @@ const Qe = ({
         pe,
         {
           listeners: g,
-          attributes: d
+          attributes: c
         },
         "grab-handle"
       ),
       /* @__PURE__ */ e(
-        et,
+        rt,
         {
           value: n.className,
           onChange: (s) => {
@@ -664,7 +663,7 @@ const Qe = ({
       )
     ] }),
     /* @__PURE__ */ e("div", { className: "w-60 flex-shrink-0", children: /* @__PURE__ */ e(
-      tt,
+      at,
       {
         value: n.method,
         onChange: (s) => {
@@ -718,7 +717,7 @@ const Qe = ({
           },
           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"
@@ -742,7 +741,7 @@ const Qe = ({
         value: !!n.asRegex,
         onChange: (s) => {
           const m = s ? { regexPattern: i, asRegex: s } : { pattern: x, asRegex: s };
-          l((I) => ({ ...I, ...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`,
@@ -758,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(
-        Ze,
+        nt,
         {
           initialSelectedItems: n.verbs || [],
           onChange: (s) => {
@@ -788,7 +787,7 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
               }
             ),
             onClick: T,
-            children: /* @__PURE__ */ e(Pe, {})
+            children: /* @__PURE__ */ e(Re, {})
           }
         ) }),
         /* @__PURE__ */ e(E, { label: "Cancel Changes", className: "px-1 py-3", children: /* @__PURE__ */ e(
@@ -807,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 } = ve({ id: t }), v = {
-    transform: ze.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(), 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(
+  } = 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(
-    nt,
+    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: [
@@ -849,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"
           ),
@@ -866,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" }) })
                   }
                 ),
                 " ",
@@ -889,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" }) })
                 }
               ),
               " ",
@@ -898,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,9 +912,9 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
             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__ */ 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",
@@ -930,9 +929,9 @@ 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(He, {})
+                children: /* @__PURE__ */ e(Te, {})
               }
             ) }),
             /* @__PURE__ */ e(E, { label: "Delete Handler", className: "px-1 py-3", placement: "top-end", children: /* @__PURE__ */ e(
@@ -940,18 +939,18 @@ 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: async () => {
-                  const { confirmed: s } = await k(
+                  const { confirmed: s } = await I(
                     ae({
                       title: "Delete Handler",
-                      type: oe.CONFIRM,
-                      color: ie.DANGER,
+                      type: ie.CONFIRM,
+                      color: le.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, {})
+                children: /* @__PURE__ */ e(He, {})
               }
             ) })
           ] })
@@ -959,32 +958,32 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
       ]
     }
   ) });
-}, 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)), {
+}, 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 }
-  } = Q(), x = me(
-    X(ge),
-    X(xe, {
-      coordinateGetter: Ne
+    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, ...k }) => {
+        ({ isExpanded: b, asRegex: v, pattern: y, regexPattern: w, ...I }) => {
           var T;
           const D = v ? { regexPattern: w } : { pattern: y };
           return {
-            ...k,
-            verbs: (T = k.verbs) == null ? void 0 : T.join(","),
+            ...I,
+            verbs: (T = I.verbs) == null ? void 0 : T.join(","),
             ...D
           };
         }
@@ -993,7 +992,7 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
       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({
+      _e({
         path: t,
         content: l
       })
@@ -1001,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(
-        Qe,
+        Ze,
         {
           label: "Switch to text Editor",
           Icon: Ie,
@@ -1028,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: "",
@@ -1049,10 +1048,10 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
         ] })
       ] }),
       /* @__PURE__ */ e("div", { className: "py-3", children: /* @__PURE__ */ o(
-        fe,
+        xe,
         {
           sensors: x,
-          collisionDetection: ye,
+          collisionDetection: fe,
           onDragStart: (l) => {
             g(l.active.id);
           },
@@ -1062,25 +1061,25 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
               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)
+                payload: Ee(i, v, y)
               });
             }
           },
           children: [
             /* @__PURE__ */ e(
-              we,
+              Ne,
               {
                 items: i,
-                strategy: Ee,
+                strategy: we,
                 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__ */ 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", {}),
@@ -1090,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: "",
@@ -1111,40 +1110,58 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
       ) })
     ] }) })
   ] });
-}, lt = ({ 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 (!at.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(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
-  }
-) }) });
+  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 {
-  lt as HTTPHandlersEditor,
-  Tt as Standalone
+  dt as HTTPHandlersEditor,
+  Ye as HTTP_HANDLERS_EDITOR_SCOPE_CLASS,
+  Pt as Standalone
 };
 //# sourceMappingURL=index.es.js.map