@shellui/core 0.0.11 → 0.0.12

package/dist/OverlayShell-CGjN4rTu.js

@@ -0,0 +1,642 @@
+import { jsx as r, jsxs as f, Fragment as S } from "react/jsx-runtime";
+import { shellui as h } from "@shellui/sdk";
+import { useState as C, useCallback as O, useEffect as T, createContext as A, useContext as I, forwardRef as L, Children as Z } from "react";
+import { toast as m, Toaster as G } from "sonner";
+import { useNavigate as X } from "react-router";
+import { useTranslation as q } from "react-i18next";
+import * as y from "@radix-ui/react-dialog";
+import { Z as E, c as D, a as J, r as K } from "./index-PsePV0Ng.js";
+import { Drawer as b } from "vaul";
+import { C as R } from "./ContentView-CZG-ro_B.js";
+const Q = (e) => {
+  if (!e || typeof e != "string")
+    return null;
+  try {
+    if (e.startsWith("http://") || e.startsWith("https://")) {
+      const o = new URL(e), a = typeof window < "u" ? window.location.origin : "";
+      return o.origin === a || o.hostname === "localhost" || o.hostname === "127.0.0.1" ? e : null;
+    }
+    if (e.startsWith("/") || e.startsWith("./") || !e.startsWith("//")) {
+      const o = typeof window < "u" ? window.location.origin : "", a = e.startsWith("/") ? e : `/${e}`;
+      return `${o}${a}`;
+    }
+    return null;
+  } catch (o) {
+    return console.error("Invalid URL:", e, o), null;
+  }
+}, W = A(void 0), z = () => {
+  const e = I(W);
+  if (!e)
+    throw new Error("useModal must be used within a ModalProvider");
+  return e;
+}, ee = ({ children: e }) => {
+  const [o, a] = C(!1), [i, n] = C(null), t = O((d) => {
+    const c = d ? Q(d) : null;
+    n(c), a(!0);
+  }, []), s = O(() => {
+    a(!1), setTimeout(() => n(null), 200);
+  }, []);
+  return T(() => {
+    const d = h.addMessageListener(
+      "SHELLUI_OPEN_MODAL",
+      (p) => {
+        const u = p.payload;
+        t(u.url);
+      }
+    ), c = h.addMessageListener("SHELLUI_CLOSE_MODAL", () => {
+      s();
+    });
+    return () => {
+      d(), c();
+    };
+  }, [t, s]), /* @__PURE__ */ r(W.Provider, { value: { isOpen: o, modalUrl: i, openModal: t, closeModal: s }, children: e });
+}, te = (e) => {
+  if (!e || typeof e != "string")
+    return null;
+  try {
+    if (e.startsWith("http://") || e.startsWith("https://"))
+      return new URL(e), e;
+    if (e.startsWith("/") || e.startsWith("./") || !e.startsWith("//")) {
+      const o = typeof window < "u" ? window.location.origin : "", a = e.startsWith("/") ? e : `/${e}`;
+      return `${o}${a}`;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}, P = "right", H = A(void 0), oe = () => {
+  const e = I(H);
+  if (!e)
+    throw new Error("useDrawer must be used within a DrawerProvider");
+  return e;
+}, re = ({ children: e }) => {
+  const { closeModal: o } = z(), [a, i] = C(!1), [n, t] = C(null), [s, d] = C(P), [c, p] = C(null), u = O(
+    (v) => {
+      o();
+      const l = v?.url, g = l ? te(l) : null;
+      t(g), d(v?.position ?? P), p(v?.size ?? null), i(!0);
+    },
+    [o]
+  ), x = O(() => {
+    i(!1);
+  }, []);
+  return T(() => {
+    const v = h.addMessageListener(
+      "SHELLUI_OPEN_DRAWER",
+      (g) => {
+        const k = g.payload;
+        u({ url: k.url, position: k.position, size: k.size });
+      }
+    ), l = h.addMessageListener("SHELLUI_CLOSE_DRAWER", () => {
+      x();
+    });
+    return () => {
+      v(), l();
+    };
+  }, [u, x]), /* @__PURE__ */ r(H.Provider, { value: { isOpen: a, drawerUrl: n, position: s, size: c, openDrawer: u, closeDrawer: x }, children: e });
+}, ae = A(void 0), ne = ({ children: e }) => {
+  const o = O((a) => {
+    const {
+      id: i,
+      title: n,
+      description: t,
+      type: s = "default",
+      duration: d,
+      position: c,
+      action: p,
+      cancel: u,
+      onDismiss: x,
+      onAutoClose: v
+    } = a, l = {
+      id: i,
+      duration: d,
+      position: c,
+      action: p ? {
+        label: p.label,
+        onClick: p.onClick
+      } : void 0,
+      cancel: u ? {
+        label: u.label,
+        onClick: u.onClick
+      } : void 0,
+      onDismiss: x,
+      onAutoClose: v
+    };
+    if (i) {
+      switch (s) {
+        case "success":
+          m.success(n || "Success", {
+            id: i,
+            description: t,
+            ...l
+          });
+          break;
+        case "error":
+          m.error(n || "Error", {
+            id: i,
+            description: t,
+            ...l
+          });
+          break;
+        case "warning":
+          m.warning(n || "Warning", {
+            id: i,
+            description: t,
+            ...l
+          });
+          break;
+        case "info":
+          m.info(n || "Info", {
+            id: i,
+            description: t,
+            ...l
+          });
+          break;
+        case "loading":
+          m.loading(n || "Loading...", {
+            id: i,
+            description: t,
+            ...l
+          });
+          break;
+        default:
+          m(n || "Notification", {
+            id: i,
+            description: t,
+            ...l
+          });
+          break;
+      }
+      return;
+    }
+    switch (s) {
+      case "success":
+        m.success(n || "Success", {
+          description: t,
+          ...l
+        });
+        break;
+      case "error":
+        m.error(n || "Error", {
+          description: t,
+          ...l
+        });
+        break;
+      case "warning":
+        m.warning(n || "Warning", {
+          description: t,
+          ...l
+        });
+        break;
+      case "info":
+        m.info(n || "Info", {
+          description: t,
+          ...l
+        });
+        break;
+      case "loading":
+        m.loading(n || "Loading...", {
+          description: t,
+          ...l
+        });
+        break;
+      default:
+        m(n || "Notification", {
+          description: t,
+          ...l
+        });
+        break;
+    }
+  }, []);
+  return T(() => {
+    const a = h.addMessageListener("SHELLUI_TOAST", (n) => {
+      const t = n.payload;
+      o({
+        ...t,
+        onDismiss: () => {
+          h.sendMessage({
+            type: "SHELLUI_TOAST_CLEAR",
+            payload: { id: t.id },
+            to: n.from
+          });
+        },
+        onAutoClose: () => {
+          h.sendMessage({
+            type: "SHELLUI_TOAST_CLEAR",
+            payload: { id: t.id },
+            to: n.from
+          });
+        },
+        action: t.action && (() => {
+          let s = !1;
+          return {
+            label: t.action?.label ?? void 0,
+            onClick: () => {
+              s || (s = !0, h.sendMessage({
+                type: "SHELLUI_TOAST_ACTION",
+                payload: { id: t.id },
+                to: n.from
+              }));
+            }
+          };
+        })(),
+        cancel: t.cancel && (() => {
+          let s = !1;
+          return {
+            label: t.cancel?.label ?? void 0,
+            onClick: () => {
+              s || (s = !0, h.sendMessage({
+                type: "SHELLUI_TOAST_CANCEL",
+                payload: { id: t.id },
+                to: n.from
+              }));
+            }
+          };
+        })()
+      });
+    }), i = h.addMessageListener(
+      "SHELLUI_TOAST_UPDATE",
+      (n) => {
+        const t = n.payload;
+        o({
+          ...t,
+          // Re-register action handlers so the button works after update
+          // These handlers send messages that trigger the callbackRegistry
+          action: t.action && (() => {
+            let s = !1;
+            return {
+              label: t.action?.label ?? void 0,
+              onClick: () => {
+                s || (s = !0, h.sendMessage({
+                  type: "SHELLUI_TOAST_ACTION",
+                  payload: { id: t.id },
+                  to: n.from
+                }));
+              }
+            };
+          })(),
+          cancel: t.cancel && (() => {
+            let s = !1;
+            return {
+              label: t.cancel?.label ?? void 0,
+              onClick: () => {
+                s || (s = !0, h.sendMessage({
+                  type: "SHELLUI_TOAST_CANCEL",
+                  payload: { id: t.id },
+                  to: n.from
+                }));
+              }
+            };
+          })()
+        });
+      }
+    );
+    return () => {
+      a(), i();
+    };
+  }, [o]), /* @__PURE__ */ r(ae.Provider, { value: { toast: o }, children: e });
+};
+function Oe({ children: e }) {
+  return /* @__PURE__ */ r(ee, { children: /* @__PURE__ */ r(re, { children: /* @__PURE__ */ r(ne, { children: e }) }) });
+}
+const se = y.Root, ie = y.Portal, $ = L(({ className: e, ...o }, a) => /* @__PURE__ */ r(
+  y.Overlay,
+  {
+    ref: a,
+    "data-dialog-overlay": !0,
+    className: D("fixed inset-0 bg-[hsl(var(--background)/0.8)] backdrop-blur-[1px]", e),
+    style: { zIndex: E.MODAL_OVERLAY },
+    ...o
+  }
+));
+$.displayName = y.Overlay.displayName;
+const j = L(
+  ({ className: e, children: o, onPointerDownOutside: a, hideCloseButton: i, ...n }, t) => {
+    const s = Z.count(o) > 2, d = O(
+      (c) => {
+        c?.target?.closest?.("[data-sonner-toaster]") && c.preventDefault(), a?.(c);
+      },
+      [a]
+    );
+    return /* @__PURE__ */ f(ie, { children: [
+      /* @__PURE__ */ r($, {}),
+      /* @__PURE__ */ f(
+        y.Content,
+        {
+          ref: t,
+          "data-dialog-content": !0,
+          "data-has-content": s,
+          className: D(
+            "fixed left-[50%] top-[50%] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-6 border bg-background px-6 pt-0 pb-0 shadow-lg sm:rounded-lg",
+            "data-[has-content=false]:gap-0 data-[has-content=false]:[&>[data-dialog-header]]:border-b-0 data-[has-content=false]:[&>[data-dialog-header]]:pb-0",
+            e
+          ),
+          style: { backgroundColor: "hsl(var(--background))", zIndex: E.MODAL_CONTENT },
+          onPointerDownOutside: d,
+          ...n,
+          children: [
+            o,
+            !i && /* @__PURE__ */ f(y.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground cursor-pointer", children: [
+              /* @__PURE__ */ f(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "24",
+                  height: "24",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "h-4 w-4",
+                  children: [
+                    /* @__PURE__ */ r("path", { d: "M18 6 6 18" }),
+                    /* @__PURE__ */ r("path", { d: "m6 6 12 12" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r("span", { className: "sr-only", children: "Close" })
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+);
+j.displayName = y.Content.displayName;
+const U = L(({ className: e, ...o }, a) => /* @__PURE__ */ r(
+  y.Title,
+  {
+    ref: a,
+    className: D("text-lg font-semibold leading-none tracking-tight", e),
+    ...o
+  }
+));
+U.displayName = y.Title.displayName;
+const M = L(({ className: e, ...o }, a) => /* @__PURE__ */ r(
+  y.Description,
+  {
+    ref: a,
+    className: D("text-sm text-muted-foreground", e),
+    ...o
+  }
+));
+M.displayName = y.Description.displayName;
+const B = ({
+  open: e,
+  onOpenChange: o,
+  direction: a = "right",
+  ...i
+}) => /* @__PURE__ */ r(
+  b.Root,
+  {
+    open: e,
+    onOpenChange: o,
+    direction: a,
+    ...i
+  }
+);
+B.displayName = "Drawer";
+const le = b.Trigger;
+le.displayName = "DrawerTrigger";
+const V = b.Portal;
+V.displayName = "DrawerPortal";
+const F = L(({ className: e, ...o }, a) => /* @__PURE__ */ r(
+  b.Overlay,
+  {
+    ref: a,
+    "data-drawer-overlay": !0,
+    className: D("fixed inset-0 bg-[hsl(var(--background)/0.8)] backdrop-blur-[1px]", e),
+    style: { zIndex: E.DRAWER_OVERLAY },
+    ...o
+  }
+));
+F.displayName = b.Overlay.displayName;
+const de = {
+  bottom: "fixed inset-x-0 bottom-0 mt-24 flex h-auto flex-col border border-border bg-background",
+  top: "fixed inset-x-0 top-0 mb-24 flex h-auto flex-col border border-border bg-background",
+  left: "fixed inset-y-0 left-0 mr-24 flex h-full w-auto flex-col border border-border bg-background",
+  right: "fixed inset-y-0 right-0 ml-24 flex h-full w-auto flex-col border border-border bg-background"
+}, Y = L(
+  ({ className: e, direction: o = "right", size: a, children: i, style: n, ...t }, s) => {
+    const d = o, c = d === "top" || d === "bottom", p = a?.trim() || (c ? "80vh" : "80vw"), u = c ? { height: p, maxHeight: p } : { width: p, maxWidth: p };
+    return /* @__PURE__ */ f(V, { children: [
+      /* @__PURE__ */ r(F, {}),
+      /* @__PURE__ */ f(
+        b.Content,
+        {
+          ref: s,
+          "data-drawer-content": !0,
+          className: D("outline-none", de[d], e),
+          style: {
+            backgroundColor: "hsl(var(--background))",
+            zIndex: E.DRAWER_CONTENT,
+            ...u,
+            ...n
+          },
+          ...t,
+          children: [
+            i,
+            /* @__PURE__ */ f(
+              b.Close,
+              {
+                className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground cursor-pointer",
+                "aria-label": "Close",
+                children: [
+                  /* @__PURE__ */ f(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "24",
+                      height: "24",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: "h-4 w-4",
+                      children: [
+                        /* @__PURE__ */ r("path", { d: "M18 6 6 18" }),
+                        /* @__PURE__ */ r("path", { d: "m6 6 12 12" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ r("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+Y.displayName = "DrawerContent";
+const ce = b.Close;
+ce.displayName = "DrawerClose";
+const ue = L(({ className: e, ...o }, a) => /* @__PURE__ */ r(
+  b.Title,
+  {
+    ref: a,
+    className: D("text-lg font-semibold leading-none tracking-tight", e),
+    ...o
+  }
+));
+ue.displayName = b.Title.displayName;
+const pe = L(({ className: e, ...o }, a) => /* @__PURE__ */ r(
+  b.Description,
+  {
+    ref: a,
+    className: D("text-sm text-muted-foreground", e),
+    ...o
+  }
+));
+pe.displayName = b.Description.displayName;
+const ge = ({ ...e }) => {
+  const { settings: o } = J();
+  return /* @__PURE__ */ r(
+    G,
+    {
+      position: "top-center",
+      theme: o.appearance.theme,
+      className: "toaster group",
+      style: {
+        zIndex: E.TOAST,
+        // Re-enable pointer events so toasts stay clickable when a Radix modal is open
+        // (Radix sets body.style.pointerEvents = 'none' and only the dialog content gets 'auto')
+        pointerEvents: "auto"
+      },
+      toastOptions: {
+        classNames: {
+          toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
+        }
+      },
+      ...e
+    }
+  );
+};
+function ke({ navigationItems: e, children: o }) {
+  const a = X(), { isOpen: i, modalUrl: n, closeModal: t } = z(), {
+    isOpen: s,
+    drawerUrl: d,
+    position: c,
+    size: p,
+    closeDrawer: u
+  } = oe(), { t: x, i18n: v } = q("common"), l = v.language || "en";
+  return T(() => {
+    const g = h.addMessageListener("SHELLUI_OPEN_MODAL", () => {
+      u();
+    });
+    return () => g();
+  }, [u]), T(() => {
+    const g = h.addMessageListener("SHELLUI_NAVIGATE", (k) => {
+      const w = k.payload?.url;
+      if (typeof w != "string" || !w.trim()) return;
+      let N;
+      if (w.startsWith("http://") || w.startsWith("https://"))
+        try {
+          N = new URL(w).pathname;
+        } catch {
+          N = w.startsWith("/") ? w : `/${w}`;
+        }
+      else
+        N = w.startsWith("/") ? w : `/${w}`;
+      t(), u(), N === "/" || N === "" || e.some(
+        (_) => N === `/${_.path}` || N.startsWith(`/${_.path}/`)
+      ) ? a(N || "/") : h.toast({
+        type: "error",
+        title: x("navigationError") ?? "Navigation error",
+        description: x("navigationNotAllowed") ?? "This URL is not configured in the app navigation."
+      });
+    });
+    return () => g();
+  }, [a, t, u, e, x]), /* @__PURE__ */ f(S, { children: [
+    o,
+    /* @__PURE__ */ r(
+      se,
+      {
+        open: i,
+        onOpenChange: t,
+        children: /* @__PURE__ */ r(j, { className: "max-w-4xl w-full h-[80vh] max-h-[680px] flex flex-col p-0 overflow-hidden", children: n ? /* @__PURE__ */ f(S, { children: [
+          /* @__PURE__ */ r(U, { className: "sr-only", children: K(
+            e.find((g) => g.url === n)?.label,
+            l
+          ) }),
+          /* @__PURE__ */ r(M, { className: "sr-only", children: x("modalContent") ?? "Modal content" }),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: "flex-1",
+              style: { minHeight: 0 },
+              children: /* @__PURE__ */ r(
+                R,
+                {
+                  url: n,
+                  pathPrefix: "settings",
+                  ignoreMessages: !0,
+                  navItem: e.find((g) => g.url === n)
+                }
+              )
+            }
+          )
+        ] }) : /* @__PURE__ */ f(S, { children: [
+          /* @__PURE__ */ r(U, { className: "sr-only", children: "Error: Modal URL is undefined" }),
+          /* @__PURE__ */ r(M, { className: "sr-only", children: "The openModal function was called without a valid URL parameter." }),
+          /* @__PURE__ */ r("div", { className: "flex-1 p-4", children: /* @__PURE__ */ f("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-4", children: [
+            /* @__PURE__ */ r("h3", { className: "font-semibold text-destructive mb-2", children: "Error: Modal URL is undefined" }),
+            /* @__PURE__ */ f("p", { className: "text-sm text-muted-foreground", children: [
+              "The ",
+              /* @__PURE__ */ r("code", { className: "text-xs bg-background px-1 py-0.5 rounded", children: "openModal" }),
+              " ",
+              "function was called without a valid URL parameter. Please ensure you provide a URL when opening the modal."
+            ] })
+          ] }) })
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ r(
+      B,
+      {
+        open: s,
+        onOpenChange: (g) => !g && u(),
+        direction: c,
+        children: /* @__PURE__ */ r(
+          Y,
+          {
+            direction: c,
+            size: p,
+            className: "p-0 overflow-hidden flex flex-col",
+            children: d ? /* @__PURE__ */ r("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ r(
+              R,
+              {
+                url: d,
+                pathPrefix: "settings",
+                ignoreMessages: !0,
+                navItem: e.find((g) => g.url === d)
+              }
+            ) }) : /* @__PURE__ */ r("div", { className: "flex-1 p-4", children: /* @__PURE__ */ f("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-4", children: [
+              /* @__PURE__ */ r("h3", { className: "font-semibold text-destructive mb-2", children: "Error: Drawer URL is undefined" }),
+              /* @__PURE__ */ f("p", { className: "text-sm text-muted-foreground", children: [
+                "The ",
+                /* @__PURE__ */ r("code", { className: "text-xs bg-background px-1 py-0.5 rounded", children: "openDrawer" }),
+                " ",
+                "function was called without a valid URL parameter. Please ensure you provide a URL when opening the drawer."
+              ] })
+            ] }) })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ r(ge, {})
+  ] });
+}
+export {
+  Oe as L,
+  ke as O
+};
+//# sourceMappingURL=OverlayShell-CGjN4rTu.js.map