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

package/dist/index.es.js

@@ -1,44 +1,45 @@
-import { jsx as e, jsxs as o, Fragment as G } 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 { jsx as e, jsxs as o, Fragment as O } from "react/jsx-runtime";
+import { useSensors as fe, useSensor as Z, PointerSensor as ye, KeyboardSensor as ve, DndContext as be, closestCenter as Ne, DragOverlay as we } from "@dnd-kit/core";
+import { useSortable as Ee, sortableKeyboardCoordinates as Ce, SortableContext as Te, verticalListSortingStrategy as De, arrayMove as He } from "@dnd-kit/sortable";
+import { FdWarningDanger as q, FdRegex as Se, FdUnRegex as Pe, FdDuplicate as re, FdPen as Re, FdTrash as Ie, FdCloseNaked as B, FdInfoCircle as ae, FdCheckCircle as Ae, FdClose as ke, FdDragHandle as _e, FdDown as Q, FdEmpty as X, FdCode as Le, FdPlus as ee } from "@ws-ui/icons";
+import { useAppDispatch as $, switchEditor as Oe, useAppSelector as M, selectCatalog as se, openModal as le, selectTabByPath as ie, setContent as oe, selectModals as Fe, editModal as $e, closeModal as je, ReduxProvider as Ge, getStore as Me } from "@ws-ui/store";
+import { createContext as qe, useReducer as Be, useEffect as F, useContext as Ue, useState as _, Fragment as de, useMemo as ze } from "react";
+import { generate as W } from "short-uuid";
+import { z as k } from "zod";
+import { ToolbarIcon as Je, Tooltip as E, ModalColor as ce, ModalType as pe, useHotkeys as Ke, ControlledSwitch as We, Modal as Ve, TipsProvider as Qe, HTTP_HANDLERS_TAB_PATH as K, useDidMountEffect as Xe } from "@ws-ui/shared";
+import { CSS as Ye } from "@dnd-kit/utilities";
+import { Combobox as R, Transition as ue } 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 Z from "randexp";
-const Je = ({
+import { useMultipleSelection as j, useCombobox as L } from "downshift";
+import { omit as he, isEqual as V } from "lodash";
+import { Subject as Ze } from "rxjs";
+import te from "randexp";
+import { HTTP_HANDLERS_EDITOR_SCOPE_CLASS as et } from "./common.es.js";
+const tt = ({
   label: t,
   Icon: a,
-  tab: r,
-  editor: i,
-  onBeforeClick: c
+  tab: n,
+  editor: s,
+  onBeforeClick: d
 }) => {
-  const x = B();
+  const p = $();
   return /* @__PURE__ */ e(
-    qe,
+    Je,
     {
       label: t,
       Icon: a,
       as: "button",
       onClick: () => {
-        c == null || c(), x(
-          ke({
-            tab: r,
-            editor: i
+        d == null || d(), p(
+          Oe({
+            tab: n,
+            editor: s
           })
         );
       }
     }
   );
-}, ce = Oe(void 0), $ = new Ke(), We = (t, a) => {
+}, me = qe(void 0), G = new Ze(), nt = (t, a) => {
   switch (a.type) {
     case "UPDATE_HANDLERS":
       return {
@@ -47,15 +48,15 @@ const Je = ({
       };
     case "SET_EDITING_HANDLER": {
       if (a.payload && a.payload !== t.editing) {
-        const r = t.content.find(
-          (i) => i.id === t.editing
+        const n = t.content.find(
+          (s) => s.id === t.editing
         );
-        if (r && !Object.values(
-          de(r, ["id", "verbs", "asRegex", "isExpanded"])
-        ).some(Boolean) && r.verbs.length === 0)
+        if (n && !Object.values(
+          he(n, ["id", "verbs", "asRegex", "isExpanded"])
+        ).some(Boolean) && n.verbs.length === 0)
           return {
             ...t,
-            content: t.content.filter((c) => c.id !== r.id),
+            content: t.content.filter((d) => d.id !== n.id),
             editing: a.payload
           };
       }
@@ -65,112 +66,112 @@ const Je = ({
       };
     }
     case "ADD_HANDLER": {
-      const r = V();
+      const n = W();
       return {
         ...t,
-        content: [...t.content, { ...a.payload, id: r }],
-        editing: r,
-        newlyCreatedHandlerID: r
+        content: [...t.content, { ...a.payload, id: n }],
+        editing: n,
+        newlyCreatedHandlerID: n
       };
     }
     case "UPDATE_HANDLER":
       return {
         ...t,
         content: t.content.map(
-          (r) => r.id === a.id ? { ...r, ...a.payload } : r
+          (n) => n.id === a.id ? { ...n, ...a.payload } : n
         ),
         newlyCreatedHandlerID: null
       };
     case "DELETE_HANDLER":
       return {
         ...t,
-        content: t.content.filter((r) => r.id !== a.id)
+        content: t.content.filter((n) => n.id !== a.id)
       };
     case "TOGGLE_EXPANDED":
       return {
         ...t,
         content: t.content.map(
-          (r) => r.id === a.id ? { ...r, isExpanded: !r.isExpanded } : r
+          (n) => n.id === a.id ? { ...n, isExpanded: !n.isExpanded } : n
         )
       };
     case "DUPLICATE_HANDLER": {
-      const r = t.content.find(
-        (i) => i.id === a.id
+      const n = t.content.find(
+        (s) => s.id === a.id
       );
-      return r ? {
+      return n ? {
         ...t,
         content: [
           ...t.content,
-          { ...r, id: V(), isExpanded: !0 }
+          { ...n, id: W(), isExpanded: !0 }
         ]
       } : t;
     }
     case "TOGGLE_ALL_EXPANDED":
       return {
         ...t,
-        content: t.content.map((r) => ({
-          ...r,
+        content: t.content.map((n) => ({
+          ...n,
           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;
+        content: a.payload.map((n) => {
+          const s = t.content.find((d) => d.id === n.id);
+          return s ? {
+            ...n,
+            ...s
+          } : n;
         })
       };
     default:
       throw new Error("Unknown action type");
   }
-}, Qe = ({
+}, rt = ({
   children: t,
   content: a
 }) => {
-  const r = {
+  const n = {
     content: a,
     editing: null,
     newlyCreatedHandlerID: null
-  }, [i, c] = $e(We, r);
-  return O(() => {
-    c({
+  }, [s, d] = Be(nt, n);
+  return F(() => {
+    d({
       type: "SYNC_DATA",
       payload: a
     });
-  }, [a]), /* @__PURE__ */ e(ce.Provider, { value: { state: i, dispatch: c }, children: t });
-}, Q = () => {
-  const t = je(ce);
+  }, [a]), /* @__PURE__ */ e(me.Provider, { value: { state: s, dispatch: d }, children: t });
+}, Y = () => {
+  const t = Ue(me);
   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"];
-  function x(h, u) {
-    const N = u.toLowerCase();
-    return c.filter(function(s) {
-      return !h.includes(s) && s.toLowerCase().includes(N);
+}, at = ({ initialSelectedItems: t, onChange: a, touched: n, onBlur: s }) => {
+  const d = ["GET", "POST", "PUT", "DELETE"];
+  function p(g, h) {
+    const N = h.toLowerCase();
+    return d.filter(function(l) {
+      return !g.includes(l) && l.toLowerCase().includes(N);
     });
   }
-  const [f, g] = _(""), [d, n] = _(t);
-  O(() => {
-    n(t);
+  const [m, f] = _(""), [c, r] = _(t);
+  F(() => {
+    r(t);
   }, [t]);
-  const l = Ge(
-    () => 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);
+  const i = ze(
+    () => p(c, m),
+    [c, m]
+  ), { getSelectedItemProps: u, getDropdownProps: v, removeSelectedItem: b } = j({
+    selectedItems: c,
+    onStateChange({ selectedItems: g = [], type: h }) {
+      switch (h) {
+        case j.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case j.stateChangeTypes.SelectedItemKeyDownDelete:
+        case j.stateChangeTypes.DropdownKeyDownBackspace:
+        case j.stateChangeTypes.FunctionRemoveSelectedItem:
+          r(g);
           break;
       }
     }
@@ -178,21 +179,21 @@ const Je = ({
     isOpen: y,
     getToggleButtonProps: w,
     getMenuProps: I,
-    getInputProps: D,
-    highlightedIndex: T,
+    getInputProps: T,
+    highlightedIndex: D,
     getItemProps: H,
-    selectedItem: R
+    selectedItem: S
   } = L({
-    items: l,
-    itemToString(h) {
-      return h || "";
+    items: i,
+    itemToString(g) {
+      return g || "";
     },
     defaultHighlightedIndex: 0,
     // after selection, highlight the first item.
     selectedItem: null,
-    inputValue: f,
-    stateReducer(h, u) {
-      const { changes: N, type: P } = u;
+    inputValue: m,
+    stateReducer(g, h) {
+      const { changes: N, type: P } = h;
       switch (P) {
         case L.stateChangeTypes.InputKeyDownEnter:
         case L.stateChangeTypes.ItemClick:
@@ -208,82 +209,82 @@ const Je = ({
       }
     },
     onStateChange({
-      inputValue: h = "",
-      type: u,
+      inputValue: g = "",
+      type: h,
       selectedItem: N
     }) {
-      switch (u) {
+      switch (h) {
         case L.stateChangeTypes.InputKeyDownEnter:
         case L.stateChangeTypes.ItemClick:
         case L.stateChangeTypes.InputBlur:
-          N && (n([...d, N]), g(""));
+          N && (r([...c, N]), f(""));
           break;
         case L.stateChangeTypes.InputChange:
-          g(h);
+          f(g);
           break;
       }
     }
   });
-  return O(() => {
-    a(d);
-  }, [d]), /* @__PURE__ */ o("div", { className: "relative flex-1", children: [
+  return F(() => {
+    a(c);
+  }, [c]), /* @__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
+            "ring-1 ring-primary-dark rounded-b-none": y && i.length,
+            "ring-1 ring-red-400 overflow-visible": c.length === 0 && n
           }
         ),
-        onBlur: i,
+        onBlur: s,
         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) {
+          c.length === 0 && !y && 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: c.length === 0 && "At least one HTTP verb is required" }),
+          c.map(
+            function(h, 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)
+                      "bg-red-400": !d.includes(h)
                     }
                   ),
-                  ...p({
-                    selectedItem: u,
+                  ...u({
+                    selectedItem: h,
                     index: N
                   }),
                   children: [
-                    u,
+                    h,
                     /* @__PURE__ */ e(
                       "span",
                       {
                         onClick: (P) => {
-                          P.stopPropagation(), v(u);
+                          P.stopPropagation(), b(h);
                         },
                         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(B, {})
                       }
                     )
                   ]
                 },
-                `selected-item-${N}-${u}`
+                `selected-item-${N}-${h}`
               );
             }
           ),
           /* @__PURE__ */ e(
             "input",
             {
-              ...D(
-                b(
+              ...T(
+                v(
                   { 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" : "",
+              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(Q, { className: "h-3 w-3 text-gray-50", "aria-hidden": "true" })
             }
           )
         ]
@@ -302,76 +303,76 @@ const Je = ({
     /* @__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"}`,
+        className: `ring-primary-dark bg-grey-900 text-s absolute z-10 w-full rounded-b ring-1 p-1 text-white ${!(y && i.length) && "hidden"}`,
         ...I(),
-        children: y && l.map((h, u) => /* @__PURE__ */ e(
+        children: y && i.map((g, h) => /* @__PURE__ */ e(
           "li",
           {
             className: C(
-              T === u && "bg-primary-hover",
-              R === h && "font-bold",
+              D === h && "bg-primary-hover",
+              S === g && "font-bold",
               "flex flex-col p-1 shadow-sm"
             ),
-            ...H({ item: h, index: u }),
-            children: /* @__PURE__ */ e("span", { children: h })
+            ...H({ item: g, index: h }),
+            children: /* @__PURE__ */ e("span", { children: g })
           },
-          `${h}${u}`
+          `${g}${h}`
         ))
       }
     )
   ] });
-}, Ye = ({
+}, st = ({
   value: t,
   options: a,
-  errorMessage: r = "",
-  onChange: i,
-  onBlur: c
+  errorMessage: n = "",
+  onChange: s,
+  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 [p, m] = _(""), f = a.find((r) => r.name === t), c = p === "" ? a : a.filter((r) => r.name.toLowerCase().includes(p.toLowerCase()));
   return /* @__PURE__ */ e(
-    S,
+    R,
     {
       value: { name: t },
-      onChange: (n) => i(n.name),
-      children: ({ open: n }) => /* @__PURE__ */ o("div", { className: "relative w-full", children: [
+      onChange: (r) => s(r.name),
+      children: ({ open: r }) => /* @__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
+                "ring-1 ring-red-400": !f && t || n,
+                "ring-1 ring-primary-dark rounded-b-none": r,
+                "overflow-visible": !f && !r && n
               }
             ),
             children: [
               /* @__PURE__ */ e(
-                S.Input,
+                R.Input,
                 {
                   className: C(
                     "bg-grey-300 text-s w-full border-none py-1 px-2 focus:outline-none rounded",
                     {
-                      "!text-red-400": !g
+                      "!text-red-400": !f
                     }
                   ),
-                  displayValue: (l) => l.name,
-                  onChange: (l) => f(l.target.value),
+                  displayValue: (i) => i.name,
+                  onChange: (i) => m(i.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: [
+                !f && !r && 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 }),
+                t ? /* @__PURE__ */ o(O, { children: [
                   /* @__PURE__ */ e(
                     "button",
                     {
                       onClick: () => {
-                        f(""), i("");
+                        m(""), s("");
                       },
                       children: /* @__PURE__ */ e(
-                        q,
+                        B,
                         {
                           className: "text-grey-50 h-3 w-3",
                           "aria-hidden": "true"
@@ -381,36 +382,36 @@ 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(R.Button, { children: /* @__PURE__ */ e(Q, { className: "text-grey-50 h-3 w-3", "aria-hidden": "true" }) })
               ] })
             ]
           }
         ),
         /* @__PURE__ */ e(
-          oe,
+          ue,
           {
-            as: se,
+            as: de,
             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" }),
+            afterLeave: () => m(""),
+            children: /* @__PURE__ */ e(R.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(X, { className: "inline h-4 w-4" }),
               " Nothing found."
-            ] }) : d.map((l, p) => /* @__PURE__ */ e(
-              S.Option,
+            ] }) : c.map((i, u) => /* @__PURE__ */ e(
+              R.Option,
               {
-                className: ({ active: b }) => `relative cursor-default select-none ${b ? "bg-primary-hover" : ""}`,
-                value: l,
-                children: ({ selected: b }) => /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
+                className: ({ active: v }) => `relative cursor-default select-none ${v ? "bg-primary-hover" : ""}`,
+                value: i,
+                children: ({ selected: v }) => /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(
                   "span",
                   {
-                    className: `block truncate p-2 py-1 ${b ? "bg-primary-dark font-medium text-white" : "font-normal"}`,
-                    children: l.name
+                    className: `block truncate p-2 py-1 ${v ? "bg-primary-dark font-medium text-white" : "font-normal"}`,
+                    children: i.name
                   }
                 ) })
               },
-              p
+              u
             )) })
           }
         )
@@ -418,64 +419,64 @@ const Je = ({
     },
     t
   );
-}, Ze = ({
+}, lt = ({
   value: t,
   options: a,
-  onChange: r,
-  errorMessage: i,
-  onBlur: c
+  onChange: n,
+  errorMessage: s,
+  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 [p, m] = _(""), f = a.find((i) => i.name === t), c = f && f.exposed, r = p === "" ? a : a.filter((i) => i.name.toLowerCase().includes(p.toLowerCase()));
+  return /* @__PURE__ */ e(R, { value: { name: t }, onChange: (i) => n(i.name), children: ({ open: i }) => /* @__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
+            "ring-1 ring-red-400": s,
+            "ring-1 ring-yellow-500": c,
+            "ring-1 ring-primary-dark rounded-b-none": i,
+            "overflow-visible": !i && s
           }
         ),
         children: [
           /* @__PURE__ */ e(
-            S.Input,
+            R.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-red-400": s,
+                  "!text-yellow-500": c
                 }
               ),
               style: { caretColor: "white" },
-              displayValue: (p) => p.name,
-              onChange: (p) => f(p.target.value),
-              onBlur: c
+              displayValue: (u) => u.name,
+              onChange: (u) => m(u.target.value),
+              onBlur: d
             }
           ),
-          !l && i && /* @__PURE__ */ e(
+          !i && s && /* @__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 }
+                { "!text-yellow-500 ring-yellow-500 bg-white": c }
               ),
-              children: i
+              children: s
             }
           ),
           /* @__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(O, { children: [
               /* @__PURE__ */ e(
                 "button",
                 {
                   onClick: () => {
-                    f(""), r("");
+                    m(""), n("");
                   },
                   children: /* @__PURE__ */ e(
-                    q,
+                    B,
                     {
                       className: "text-grey-50 h-3 w-3",
                       "aria-hidden": "true"
@@ -485,126 +486,126 @@ 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(R.Button, { children: /* @__PURE__ */ e(Q, { className: "text-grey-50 h-3 w-3", "aria-hidden": "true" }) })
           ] })
         ]
       }
     ),
     /* @__PURE__ */ e(
-      oe,
+      ue,
       {
-        as: se,
+        as: de,
         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,
+        afterLeave: () => m(""),
+        children: /* @__PURE__ */ e(R.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: r.length ? r.map((u, v) => /* @__PURE__ */ e(
+          R.Option,
           {
-            className: ({ active: v }) => `relative cursor-default select-none ${v ? "bg-primary-hover" : ""}`,
-            value: p,
-            children: ({ selected: v }) => /* @__PURE__ */ e(G, { children: /* @__PURE__ */ o(
+            className: ({ active: b }) => `relative cursor-default select-none ${b ? "bg-primary-hover" : ""}`,
+            value: u,
+            children: ({ selected: b }) => /* @__PURE__ */ e(O, { 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"}`,
+                className: `text-s flex items-center gap-2 truncate p-2 py-1 ${b ? "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 })
+                  u.exposed && /* @__PURE__ */ e(q, { className: "text-yellow-500" }),
+                  /* @__PURE__ */ e("span", { className: "flex-1 truncate", title: u.name, children: u.name })
                 ]
               }
             ) })
           },
-          b
+          v
         )) : /* @__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(X, { className: "inline h-4 w-4" }),
           " Nothing found."
         ] }) })
       }
     )
   ] }) });
-}, pe = ({ listeners: t, attributes: a }) => /* @__PURE__ */ e("button", { ...a, ...t, children: /* @__PURE__ */ e(Se, {}) }), ue = (t) => {
-  var r;
+}, ge = ({ listeners: t, attributes: a }) => /* @__PURE__ */ e("button", { ...a, ...t, children: /* @__PURE__ */ e(_e, {}) }), xe = (t) => {
+  var n;
   if (!t) return "";
   let a;
-  Z.prototype.max = 8;
+  te.prototype.max = 8;
   try {
-    a = (r = new Z(t)) == null ? void 0 : r.gen();
+    a = (n = new te(t)) == null ? void 0 : n.gen();
   } catch {
     a = "";
   }
   return `Requests matching regex will be handled example: ${a}`;
-}, et = ({
+}, it = ({
   id: t,
   class: a,
-  method: r,
-  pattern: i,
-  verbs: c,
-  regexPattern: x,
-  asRegex: f,
-  listeners: g,
-  attributes: d
+  method: n,
+  pattern: s,
+  verbs: d,
+  regexPattern: p,
+  asRegex: m,
+  listeners: f,
+  attributes: c
 }) => {
   var P;
-  const [n, l] = _({
+  const [r, i] = _({
     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 })), {
+    method: n,
+    pattern: s,
+    verbs: d,
+    asRegex: m,
+    regexPattern: p
+  }), u = M(se), v = Object.values((u == null ? void 0 : u.singletons) || {}), b = (P = v.find((l) => l.name === r.className)) == null ? void 0 : P.methods.map(({ name: l, exposed: x }) => ({ name: l, exposed: x })), {
     dispatch: y,
     state: { newlyCreatedHandlerID: w }
-  } = Q(), I = B();
-  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);
-  }
+  } = Y(), I = $();
   function T() {
-    if (D()) {
-      const { className: s, method: m, asRegex: k, regexPattern: U, pattern: z, verbs: M } = n;
+    const { className: l, method: x, asRegex: A, regexPattern: U, pattern: z, verbs: J } = r;
+    return !!(l && x && (A ? U : !z.endsWith("/")) && J.length);
+  }
+  function D() {
+    if (T()) {
+      const { className: l, method: x, asRegex: A, regexPattern: U, pattern: z, verbs: J } = r;
       y({
         type: "UPDATE_HANDLER",
         id: t,
         payload: {
-          class: s,
-          method: m,
-          verbs: M,
-          asRegex: k,
-          ...k ? { regexPattern: U } : { pattern: z }
+          class: l,
+          method: x,
+          verbs: J,
+          asRegex: A,
+          ...A ? { regexPattern: U } : { pattern: z }
         }
       }), y({ type: "SET_EDITING_HANDLER", payload: null });
     }
   }
   const H = async () => {
-    const s = {
+    const l = {
       className: a,
-      method: r,
-      pattern: i,
-      regexPattern: x,
-      verbs: c
-    }, m = de(n, ["id", "isExpanded"]);
-    if (!D()) {
+      method: n,
+      pattern: s,
+      regexPattern: p,
+      verbs: d
+    }, x = he(r, ["id", "isExpanded"]);
+    if (!T()) {
       y({ type: "DELETE_HANDLER", id: `${w}` }), y({ type: "SET_EDITING_HANDLER", payload: null });
       return;
     }
-    if (!Ve(s, m)) {
-      const { confirmed: k } = await I(
-        ae({
+    if (!V(l, x)) {
+      const { confirmed: A } = await I(
+        le({
           title: "Cancel Changes",
-          type: ie.CONFIRM,
-          color: le.DANGER,
+          type: pe.CONFIRM,
+          color: ce.DANGER,
           message: "Are you sure you want to cancel changes made to this Handler?",
           icon: "FdWarningDanger"
         })
       ).unwrap();
-      if (k) {
+      if (A) {
         w === t && y({ type: "DELETE_HANDLER", id: t }), y({ type: "SET_EDITING_HANDLER", payload: null });
         return;
       }
     }
   };
-  Be(
+  Ke(
     "esc",
     () => {
       setTimeout(() => {
@@ -612,74 +613,74 @@ const Je = ({
       }, 100);
     },
     []
-  ), O(() => {
-    $.subscribe((s) => {
-      s === t && T();
+  ), F(() => {
+    G.subscribe((l) => {
+      l === t && D();
     });
-  }, [n, t]);
-  const [R, h] = _({ className: !1, method: !1, pattern: !1, verbs: !1 }), u = () => {
-    if (R.method && !n.method)
+  }, [r, t]);
+  const [S, g] = _({ className: !1, method: !1, pattern: !1, verbs: !1 }), h = () => {
+    if (S.method && !r.method)
       return "Method is required";
-    if (v) {
-      const s = v == null ? void 0 : v.find(
-        (m) => m.name === n.method
+    if (b) {
+      const l = b == null ? void 0 : b.find(
+        (x) => x.name === r.method
       );
-      if (n.method && !s)
-        return `The method "${n.method}" doesn't exist.`;
-      if (s && s.exposed)
-        return `Method "${n.method}" is already exposed`;
+      if (r.method && !l)
+        return `The method "${r.method}" doesn't exist.`;
+      if (l && l.exposed)
+        return `Method "${r.method}" is already exposed`;
     }
   }, N = () => {
-    if (R.pattern) {
-      if (n.asRegex && !n.regexPattern)
+    if (S.pattern) {
+      if (r.asRegex && !r.regexPattern)
         return "Pattern is required";
-      if (!n.asRegex && n.pattern.endsWith("/"))
+      if (!r.asRegex && r.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,
+        ge,
         {
-          listeners: g,
-          attributes: d
+          listeners: f,
+          attributes: c
         },
         "grab-handle"
       ),
       /* @__PURE__ */ e(
-        Ye,
+        st,
         {
-          value: n.className,
-          onChange: (s) => {
-            l((m) => ({ ...m, className: s }));
+          value: r.className,
+          onChange: (l) => {
+            i((x) => ({ ...x, className: l }));
           },
-          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
+          onBlur: () => g((l) => ({ ...l, className: !0 })),
+          options: v,
+          errorMessage: S.className && !r.className ? "Class name is required" : r.className !== "" && !v.find((l) => l.name === r.className) ? `The singleton "${r.className}" doesn't exist.` : void 0
         },
         a
       )
     ] }),
     /* @__PURE__ */ e("div", { className: "w-60 flex-shrink-0", children: /* @__PURE__ */ e(
-      Ze,
+      lt,
       {
-        value: n.method,
-        onChange: (s) => {
-          l((m) => ({ ...m, method: s }));
+        value: r.method,
+        onChange: (l) => {
+          i((x) => ({ ...x, method: l }));
         },
-        options: v || [],
-        errorMessage: u(),
-        onBlur: () => h((s) => ({ ...s, method: !0 }))
+        options: b || [],
+        errorMessage: h(),
+        onBlur: () => g((l) => ({ ...l, 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` : "",
+          label: r.asRegex ? xe(r.regexPattern) : r.pattern && !r.pattern.endsWith("/") ? `Requests starting with /${r.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: "/" }),
+            !r.asRegex && /* @__PURE__ */ e("span", { className: "absolute text-s inset-y-0 left-1 flex items-center gap-2", children: "/" }),
             /* @__PURE__ */ e(
               "input",
               {
@@ -687,36 +688,36 @@ const Je = ({
                 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
+                    "focus:ring-red-400 ring-1 ring-red-400": S.pattern && r.asRegex && !r.regexPattern
                   }
                 ),
-                value: n.asRegex ? n.regexPattern : n.pattern,
-                onChange: (s) => {
-                  l((m) => ({
-                    ...m,
-                    [n.asRegex ? "regexPattern" : "pattern"]: s.target.value
+                value: r.asRegex ? r.regexPattern : r.pattern,
+                onChange: (l) => {
+                  i((x) => ({
+                    ...x,
+                    [r.asRegex ? "regexPattern" : "pattern"]: l.target.value
                   }));
                 },
-                onBlur: () => h((s) => ({ ...s, pattern: !0 })),
-                placeholder: n.asRegex ? "Required" : ""
+                onBlur: () => g((l) => ({ ...l, pattern: !0 })),
+                placeholder: r.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(
+      (m ? p : s) && /* @__PURE__ */ e(
         "button",
         {
-          onClick: (s) => {
-            s.stopPropagation(), l((m) => ({
-              ...m,
-              [n.asRegex ? "regexPattern" : "pattern"]: ""
+          onClick: (l) => {
+            l.stopPropagation(), i((x) => ({
+              ...x,
+              [r.asRegex ? "regexPattern" : "pattern"]: ""
             }));
           },
           className: "absolute inset-y-0 right-6 flex items-center gap-2 pr-2",
           children: /* @__PURE__ */ e(
-            q,
+            B,
             {
               className: "text-grey-200 h-3 w-3",
               "aria-hidden": "true"
@@ -727,28 +728,28 @@ const Je = ({
       /* @__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 / 
+          label: r.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" }) })
+          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(ae, { className: "inline h-4 w-4 text-gray-100" }) })
         }
       )
     ] }),
     /* @__PURE__ */ e("div", { className: "w-20 px-2 flex justify-center", children: /* @__PURE__ */ e(
-      Ue,
+      We,
       {
-        value: !!n.asRegex,
-        onChange: (s) => {
-          const m = s ? { regexPattern: i, asRegex: s } : { pattern: x, asRegex: s };
-          l((k) => ({ ...k, ...m }));
+        value: !!r.asRegex,
+        onChange: (l) => {
+          const x = l ? { regexPattern: s, asRegex: l } : { pattern: p, asRegex: l };
+          i((A) => ({ ...A, ...x }));
         },
-        className: `${n.asRegex ? "bg-primary-dark" : "bg-grey-300"}
+        className: `${r.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"}
+            className: `${r.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`
           }
         )
@@ -756,14 +757,14 @@ 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,
+        at,
         {
-          initialSelectedItems: n.verbs || [],
-          onChange: (s) => {
-            l((m) => ({ ...m, verbs: s }));
+          initialSelectedItems: r.verbs || [],
+          onChange: (l) => {
+            i((x) => ({ ...x, verbs: l }));
           },
-          touched: R.verbs,
-          onBlur: () => h((s) => ({ ...s, verbs: !0 }))
+          touched: S.verbs,
+          onBlur: () => g((l) => ({ ...l, verbs: !0 }))
         }
       ),
       /* @__PURE__ */ o("div", { className: "flex items-center gap-0.5 px-2", children: [
@@ -773,7 +774,7 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
             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, {})
+            children: /* @__PURE__ */ e(re, {})
           }
         ) }),
         /* @__PURE__ */ e(E, { label: "Confirm Changes", className: "px-1 py-3", children: /* @__PURE__ */ e(
@@ -782,11 +783,11 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
             className: C(
               "hover:bg-primary-hover rounded p-1 text-gray-100 hover:text-white active:outline-none",
               {
-                "opacity-50 cursor-not-allowed": !D()
+                "opacity-50 cursor-not-allowed": !T()
               }
             ),
-            onClick: T,
-            children: /* @__PURE__ */ e(Re, {})
+            onClick: D,
+            children: /* @__PURE__ */ e(Ae, {})
           }
         ) }),
         /* @__PURE__ */ e(E, { label: "Cancel Changes", className: "px-1 py-3", children: /* @__PURE__ */ e(
@@ -794,60 +795,60 @@ 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(ke, {})
           }
         ) })
       ] })
     ] })
   ] });
-}, ee = ({
+}, ne = ({
   id: t,
   class: a,
-  method: r,
-  pattern: i,
-  verbs: c,
-  isExpanded: x,
-  regexPattern: f,
-  asRegex: g
+  method: n,
+  pattern: s,
+  verbs: d,
+  isExpanded: p,
+  regexPattern: m,
+  asRegex: f
 }) => {
   var P;
-  const { attributes: d, listeners: n, setNodeRef: l, transform: p, transition: b } = be({ id: t }), v = {
-    transform: Me.Transform.toString(p),
-    transition: b
+  const { attributes: c, listeners: r, setNodeRef: i, transform: u, transition: v } = Ee({ id: t }), b = {
+    transform: Ye.Transform.toString(u),
+    transition: v
   }, {
     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(
-    (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,
+  } = Y(), I = $(), T = f ? m : s, D = M(se), H = Object.values((D == null ? void 0 : D.singletons) || {}), S = (P = H == null ? void 0 : H.find((l) => l.name === a)) == null ? void 0 : P.methods.map(({ name: l, exposed: x }) => ({ name: l, exposed: x })), g = H == null ? void 0 : H.find(
+    (l) => l.name === a
+  ), h = S == null ? void 0 : S.find((l) => l.name === n), N = h && h.exposed;
+  return /* @__PURE__ */ e("div", { className: "odd:bg-grey-500", ref: i, style: b, children: w === t ? /* @__PURE__ */ e(
+    it,
     {
       id: t,
       class: a,
-      method: r,
-      pattern: i,
-      verbs: c,
-      isExpanded: x,
-      regexPattern: f,
-      asRegex: g,
-      listeners: n,
-      attributes: d
+      method: n,
+      pattern: s,
+      verbs: d,
+      isExpanded: p,
+      regexPattern: m,
+      asRegex: f,
+      listeners: r,
+      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 });
+        G.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,
+            ge,
             {
-              listeners: n,
-              attributes: d
+              listeners: r,
+              attributes: c
             },
             "grab-handle"
           ),
@@ -856,15 +857,15 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
             {
               className: C(
                 "flex items-center gap-2",
-                !h && "text-red-400"
+                !g && "text-red-400"
               ),
               children: [
-                !h && /* @__PURE__ */ e(
+                !g && /* @__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" }) })
+                    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" }) })
                   }
                 ),
                 " ",
@@ -873,54 +874,54 @@ 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: "undefined" }) })
         ] }),
-        /* @__PURE__ */ e("div", { className: "w-60 flex-shrink-0 ", children: /* @__PURE__ */ e("div", { className: "text-s w-full", children: r ? /* @__PURE__ */ o(
+        /* @__PURE__ */ e("div", { className: "w-60 flex-shrink-0 ", children: /* @__PURE__ */ e("div", { className: "text-s w-full", children: n ? /* @__PURE__ */ o(
           "div",
           {
             className: C(
               "flex items-center gap-2",
-              !u && "text-red-400",
+              !h && "text-red-400",
               N && "text-yellow-400"
             ),
             children: [
-              !u && /* @__PURE__ */ e(
+              !h && /* @__PURE__ */ e(
                 E,
                 {
-                  label: `The method "${r}" doesn't exist.`,
+                  label: `The method "${n}" 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" }) })
                 }
               ),
               " ",
               N && /* @__PURE__ */ e(
                 E,
                 {
-                  label: `Method "${r}" is already exposed`,
+                  label: `Method "${n}" 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" }) })
                 }
               ),
               " ",
-              r
+              n
             ]
           }
         ) : /* @__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(
+        /* @__PURE__ */ e("div", { className: "text-s relative w-60 flex-shrink-0  ", children: T ? /* @__PURE__ */ e(
           E,
           {
-            label: g ? ue(D) : `Requests starting with /${D}/ will be handled`,
-            children: /* @__PURE__ */ e("span", { children: D })
+            label: f ? xe(T) : `Requests starting with /${T}/ will be handled`,
+            children: /* @__PURE__ */ e("span", { children: T })
           }
         ) : /* @__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__ */ e("div", { className: "px-5 w-20 flex justify-center text-grey-200", children: f ? /* @__PURE__ */ e(Se, {}) : /* @__PURE__ */ e(Pe, {}) }),
         /* @__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",
               {
                 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, {})
+                children: /* @__PURE__ */ e(re, {})
               }
             ) }),
             /* @__PURE__ */ e(E, { label: "Edit Handler", className: "px-1 py-3", children: /* @__PURE__ */ e(
@@ -928,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 });
+                  G.next(w), y({ type: "SET_EDITING_HANDLER", payload: t });
                 },
-                children: /* @__PURE__ */ e(Te, {})
+                children: /* @__PURE__ */ e(Re, {})
               }
             ) }),
             /* @__PURE__ */ e(E, { label: "Delete Handler", className: "px-1 py-3", placement: "top-end", children: /* @__PURE__ */ e(
@@ -938,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 I(
-                    ae({
+                  const { confirmed: l } = await I(
+                    le({
                       title: "Delete Handler",
-                      type: ie.CONFIRM,
-                      color: le.DANGER,
+                      type: pe.CONFIRM,
+                      color: ce.DANGER,
                       message: "Are you sure you want to remove this Handler?",
                       icon: "FdWarningDanger"
                     })
                   ).unwrap();
-                  s && y({ type: "DELETE_HANDLER", id: t });
+                  l && y({ type: "DELETE_HANDLER", id: t });
                 },
-                children: /* @__PURE__ */ e(He, {})
+                children: /* @__PURE__ */ e(Ie, {})
               }
             ) })
           ] })
@@ -957,52 +958,52 @@ 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)), {
-    dispatch: r,
-    state: { content: i, editing: c }
-  } = Q(), x = he(
-    X(me),
-    X(ge, {
-      coordinateGetter: ve
+}, ot = 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()
+}), dt = k.array(ot), ct = ({ path: t }) => {
+  const a = M(ie(t)), {
+    dispatch: n,
+    state: { content: s, editing: d }
+  } = Y(), p = fe(
+    Z(ye),
+    Z(ve, {
+      coordinateGetter: Ce
     })
-  ), [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, ...I }) => {
-          var T;
-          const D = v ? { regexPattern: w } : { pattern: y };
+  ), [m, f] = _(null), c = s.find((i) => i.id === m), r = $();
+  return F(() => {
+    const i = JSON.stringify(
+      s.map(
+        ({ isExpanded: v, asRegex: b, pattern: y, regexPattern: w, ...I }) => {
+          var D;
+          const T = b ? { regexPattern: w } : { pattern: y };
           return {
             ...I,
-            verbs: (T = I.verbs) == null ? void 0 : T.join(","),
-            ...D
+            verbs: (D = I.verbs) == null ? void 0 : D.join(","),
+            ...T
           };
         }
       ),
       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(
-      _e({
+    ), u = typeof (a == null ? void 0 : a.content) == "string" ? a.content : JSON.stringify(a == null ? void 0 : a.content, null, 2);
+    i !== u && r(
+      oe({
         path: t,
-        content: l
+        content: i
       })
     );
-  }, [i]), /* @__PURE__ */ o("div", { className: "bg-grey-700 flex h-full w-full flex-col  text-white", children: [
+  }, [s]), /* @__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,
+        tt,
         {
           label: "Switch to text Editor",
-          Icon: Ie,
+          Icon: Le,
           tab: a,
           editor: {
             config: { language: "json" },
@@ -1011,11 +1012,11 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
         }
       ),
       /* @__PURE__ */ o("p", { className: "text-grey-100 text-s flex items-center gap-1", children: [
-        /* @__PURE__ */ e(ne, { className: "inline text-base text-white" }),
+        /* @__PURE__ */ e(ae, { 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__ */ e("div", { className: "mt-1 flex flex-1 flex-col overflow-x-auto px-4", children: s.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" }),
@@ -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({
+                G.next(d), n({
                   type: "ADD_HANDLER",
                   payload: {
                     class: "",
@@ -1041,44 +1042,44 @@ 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 disabled:cursor-not-allowed disabled:opacity-30",
-              children: /* @__PURE__ */ e(Y, { className: "h-5 w-5" })
+              children: /* @__PURE__ */ e(ee, { className: "h-5 w-5" })
             }
           ) }) })
         ] })
       ] }),
       /* @__PURE__ */ e("div", { className: "py-3", children: /* @__PURE__ */ o(
-        xe,
+        be,
         {
-          sensors: x,
-          collisionDetection: fe,
-          onDragStart: (l) => {
-            g(l.active.id);
+          sensors: p,
+          collisionDetection: Ne,
+          onDragStart: (i) => {
+            f(i.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({
+          onDragEnd: (i) => {
+            const { active: u, over: v } = i;
+            if (f(null), !(!u || !v) && u.id !== (v == null ? void 0 : v.id)) {
+              const b = s.map((w) => w.id).indexOf(u.id), y = s.map((w) => w.id).indexOf(v.id);
+              n({
                 type: "UPDATE_HANDLERS",
-                payload: Ee(i, v, y)
+                payload: He(s, b, y)
               });
             }
           },
           children: [
             /* @__PURE__ */ e(
-              Ne,
+              Te,
               {
-                items: i,
-                strategy: we,
-                children: i.map(({ id: l, ...p }) => /* @__PURE__ */ e(ee, { id: l, ...p }, l))
+                items: s,
+                strategy: De,
+                children: s.map(({ id: i, ...u }) => /* @__PURE__ */ e(ne, { id: i, ...u }, i))
               }
             ),
-            /* @__PURE__ */ e(ye, { children: f && d ? /* @__PURE__ */ e("div", { className: "opacity-10", children: /* @__PURE__ */ e(ee, { ...d }) }) : null })
+            /* @__PURE__ */ e(we, { children: m && c ? /* @__PURE__ */ e("div", { className: "opacity-10", children: /* @__PURE__ */ e(ne, { ...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(X, { 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({
+            G.next(d), n({
               type: "ADD_HANDLER",
               payload: {
                 class: "",
@@ -1102,47 +1103,101 @@ pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0
           },
           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" }),
+            /* @__PURE__ */ e(ee, { className: "inline text-white h-4 w-4" }),
             " Add New Handler"
           ]
         }
       ) })
     ] }) })
   ] });
-}, at = ({ content: t, path: a }) => {
-  const [r, i] = _(null);
-  function c(d) {
-    let n;
+}, pt = ({ content: t, path: a }) => {
+  const [n, s] = _(null);
+  function d(c) {
+    let r;
     try {
-      n = JSON.parse(d);
+      r = JSON.parse(c);
     } catch {
-      i("HTTP Handler JSON is invalid"), n = [];
+      s("HTTP Handler JSON is invalid"), r = [];
     }
-    return n;
+    return r;
   }
-  const x = typeof t == "string" ? c(t) : t;
-  if (!nt.safeParse(x).success || r)
+  const p = typeof t == "string" ? d(t) : t;
+  if (!dt.safeParse(p).success || n)
     throw new Error("Invalid JSON");
-  const g = x.map((d) => {
-    var l;
-    const n = !!d.regexPattern;
+  const f = p.map((c) => {
+    var i;
+    const r = !!c.regexPattern;
     return {
-      ...d,
-      id: d.id ?? V(),
-      verbs: (l = d.verbs) == null ? void 0 : l.split(",").map((p) => p.toLocaleUpperCase()).filter(Boolean),
-      asRegex: n
+      ...c,
+      id: c.id ?? W(),
+      verbs: (i = c.verbs) == null ? void 0 : i.split(",").map((u) => u.toLocaleUpperCase()).filter(Boolean),
+      asRegex: r
     };
   });
-  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(rt, { content: f, children: /* @__PURE__ */ e(ct, { path: a }) });
+}, ut = () => document.querySelector(`.${et}`) || document.body, ht = () => {
+  const t = M(Fe), a = $();
+  return /* @__PURE__ */ e(O, { children: t.map((n, s) => /* @__PURE__ */ e(
+    Ve,
+    {
+      hasOverlay: s === 0,
+      ...n,
+      onClose: (d) => a(je(d)),
+      onEdit: (d) => a($e(d)),
+      container: ut()
+    },
+    n.id
+  )) });
+}, mt = ({
+  initialValue: t = [],
+  onChange: a,
+  ...n
+}) => {
+  const s = M(
+    ie(K),
+    (p, m) => V(p, m)
+  ), d = $();
+  return F(() => {
+    if (t)
+      try {
+        const p = typeof t == "string" ? JSON.parse(t) : t;
+        if (V(p, s == null ? void 0 : s.content))
+          return;
+        d(
+          oe({
+            path: K,
+            content: p
+          })
+        );
+      } catch (p) {
+        console.error(
+          "[HTTP Handlers Editor Standalone] Error while parsing the initial value:",
+          p
+        );
+      }
+  }, [t]), Xe(() => {
+    if (s != null && s.flags.touched && a)
+      try {
+        const p = JSON.stringify(s == null ? void 0 : s.content, null, 2);
+        a(p);
+      } catch (p) {
+        console.error("[HTTP Handlers Editor Standalone] Error on value stringify:", p);
+      }
+  }, [s == null ? void 0 : s.content]), /* @__PURE__ */ o(O, { children: [
+    /* @__PURE__ */ e("div", { className: "h-screen bg-grey-900", children: /* @__PURE__ */ e(
+      pt,
+      {
+        path: K,
+        content: t,
+        ...n
+      }
+    ) }),
+    /* @__PURE__ */ e(ht, {})
+  ] });
+}, kt = (t) => /* @__PURE__ */ e(Ge, { store: Me(), children: /* @__PURE__ */ e(Qe, { children: /* @__PURE__ */ e(mt, { ...t }) }) });
 export {
-  at as HTTPHandlersEditor,
-  wt as Standalone
+  pt as HTTPHandlersEditor,
+  et as HTTP_HANDLERS_EDITOR_SCOPE_CLASS,
+  kt as Standalone
 };
 //# sourceMappingURL=index.es.js.map