@lunora/studio 0.0.0 → 1.0.0-alpha.10

package/dist/packem_shared/MailPanel-GnnrNqL6.js

@@ -0,0 +1,440 @@
+'use client';
+import { useLunora } from '@lunora/react';
+import { useState, useMemo } from 'react';
+import { B as Badge } from './badge-B2PKA1-5.js';
+import { B as Button } from './button-BhsN2uZH.js';
+import { E as EmptyState } from './empty-state-DY_oe0k6.js';
+import { I as Input } from './input-XH4r1Pt1.js';
+import { c } from 'react/compiler-runtime';
+import { ScrollArea as ScrollArea$1 } from '@base-ui/react/scroll-area';
+import { c as cn } from './utils-B05Dmz_H.js';
+import { jsxDEV, Fragment } from 'react/jsx-dev-runtime';
+import { Separator as Separator$1 } from '@base-ui/react/separator';
+import { u as useAdminQuery } from './use-admin-query-4JQW2rr1.js';
+import { useAutoRefresh } from './DEFAULT_AUTO_REFRESH_MS-Vxwaxx51.js';
+import { useT } from './DEFAULT_LOCALE-CiX4W7Kr.js';
+import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTIONS-DjXgvJb6.js';
+import { b as formatTimestamp, f as fireAndForget, g as copyToClipboard, c as callOptions, e as errorMessage, a as adminRef } from './internal-rXJEAhXS.js';
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(Separator$1, {
+    "data-slot": "separator",
+    orientation,
+    className: cn("shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", className),
+    ...props
+  }, void 0, false);
+}
+
+function ScrollArea(t0) {
+  const $ = c(14);
+  let children;
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+  }
+  let t1;
+  if ($[4] !== className) {
+    t1 = cn("relative", className);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== children) {
+    t2 = /* @__PURE__ */ jsxDEV(ScrollArea$1.Viewport, {
+      "data-slot": "scroll-area-viewport",
+      className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+      children
+    }, void 0, false);
+    $[6] = children;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  let t3;
+  let t4;
+  if ($[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /* @__PURE__ */ jsxDEV(ScrollBar, {}, void 0, false);
+    t4 = /* @__PURE__ */ jsxDEV(ScrollArea$1.Corner, {}, void 0, false);
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t3 = $[8];
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== props || $[11] !== t1 || $[12] !== t2) {
+    t5 = /* @__PURE__ */ jsxDEV(ScrollArea$1.Root, {
+      "data-slot": "scroll-area",
+      className: t1,
+      ...props,
+      children: [t2, t3, t4]
+    }, void 0, true);
+    $[10] = props;
+    $[11] = t1;
+    $[12] = t2;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  return t5;
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(ScrollArea$1.Scrollbar, {
+    "data-slot": "scroll-area-scrollbar",
+    "data-orientation": orientation,
+    orientation,
+    className: cn("flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-s data-vertical:border-s-transparent", className),
+    ...props,
+    children: /* @__PURE__ */ jsxDEV(ScrollArea$1.Thumb, {
+      "data-slot": "scroll-area-thumb",
+      className: "relative flex-1 rounded-md bg-border"
+    }, void 0, false)
+  }, void 0, false);
+}
+
+const CLEAR_CAPTURED_MAIL = adminRef(ADMIN_FUNCTIONS.clearCapturedMail);
+const SEND_TEST_MAIL = adminRef(ADMIN_FUNCTIONS.sendTestMail);
+const LINK_PATTERN = /https?:\/\/[^\s"'<>)]+/i;
+const firstLink = (text) => {
+  if (text === void 0) {
+    return void 0;
+  }
+  const match = LINK_PATTERN.exec(text);
+  return match?.[0];
+};
+const selectedLink = (mail) => {
+  if (mail === void 0) {
+    return void 0;
+  }
+  return firstLink(mail.html) ?? firstLink(mail.text);
+};
+const PREVIEW_CSP = `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src data:; style-src 'unsafe-inline'; font-src data:">`;
+const withPreviewCsp = (html) => `${PREVIEW_CSP}${html}`;
+const recipientText = (value) => {
+  if (value === void 0) {
+    return "";
+  }
+  return Array.isArray(value) ? value.join(", ") : value;
+};
+const MailPanel = ({
+  limit = 100
+}) => {
+  const client = useLunora();
+  const t = useT();
+  const {
+    data,
+    error: readError,
+    isLoading,
+    refetch
+  } = useAdminQuery(ADMIN_FUNCTIONS.getCapturedMail, {
+    limit
+  });
+  const [actionError, setActionError] = useState(null);
+  const [selectedId, setSelectedId] = useState(null);
+  const [tab, setTab] = useState("html");
+  const [filter, setFilter] = useState("");
+  const entries = useMemo(() => data?.entries ?? [], [data]);
+  const error = readError ?? actionError;
+  const clearInbox = async () => {
+    setActionError(null);
+    try {
+      await client.query(CLEAR_CAPTURED_MAIL, {}, callOptions(""));
+      setSelectedId(null);
+      refetch();
+    } catch (error_) {
+      setActionError(errorMessage(error_));
+    }
+  };
+  const sendTest = async () => {
+    setActionError(null);
+    try {
+      await client.query(SEND_TEST_MAIL, {}, callOptions(""));
+      refetch();
+    } catch (error__0) {
+      setActionError(errorMessage(error__0));
+    }
+  };
+  useAutoRefresh(() => {
+    refetch();
+  }, true);
+  const onClear = () => {
+    fireAndForget(clearInbox());
+  };
+  const onSendTest = () => {
+    fireAndForget(sendTest());
+  };
+  const onFilterChange = (event) => {
+    setFilter(event.currentTarget.value);
+  };
+  const onSelectMessage = (event_0) => {
+    const {
+      id
+    } = event_0.currentTarget.dataset;
+    if (id !== void 0) {
+      setSelectedId(id);
+    }
+  };
+  const onSelectTab = (event_1) => {
+    const next = event_1.currentTarget.dataset["tab"];
+    if (next === "headers" || next === "html" || next === "text") {
+      setTab(next);
+    }
+  };
+  const tabTitle = (value) => {
+    if (value === "html") {
+      return t("HTML");
+    }
+    if (value === "text") {
+      return t("Plain text");
+    }
+    return t("Headers");
+  };
+  const visible = useMemo(() => {
+    const needle = filter.trim().toLowerCase();
+    if (needle === "") {
+      return entries;
+    }
+    return entries.filter((entry) => `${entry.subject} ${recipientText(entry.to)}`.toLowerCase().includes(needle));
+  }, [entries, filter]);
+  const selected = useMemo(() => {
+    if (visible.length === 0) {
+      return void 0;
+    }
+    return visible.find((entry_0) => entry_0.id === selectedId) ?? visible[0];
+  }, [visible, selectedId]);
+  const link = selectedLink(selected);
+  const onCopyLink = () => {
+    if (link !== void 0) {
+      copyToClipboard(link);
+    }
+  };
+  const onOpenLink = () => {
+    if (link !== void 0 && "window" in globalThis) {
+      globalThis.window.open(link, "_blank", "noopener");
+    }
+  };
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "flex flex-col gap-4",
+    "data-testid": "mail-panel",
+    children: [/* @__PURE__ */ jsxDEV("div", {
+      className: "flex flex-wrap items-center gap-2",
+      children: [/* @__PURE__ */ jsxDEV(Button, {
+        "data-testid": "mail-send-test",
+        onClick: onSendTest,
+        size: "sm",
+        type: "button",
+        variant: "outline",
+        children: t("Send test")
+      }, void 0, false), /* @__PURE__ */ jsxDEV(Button, {
+        "data-testid": "mail-clear",
+        disabled: entries.length === 0,
+        onClick: onClear,
+        size: "sm",
+        type: "button",
+        variant: "outline",
+        children: t("Clear inbox")
+      }, void 0, false), entries.length > 0 && /* @__PURE__ */ jsxDEV(Badge, {
+        className: "ml-auto",
+        "data-testid": "mail-count",
+        variant: "secondary",
+        children: t("{count} messages", {
+          count: entries.length
+        })
+      }, void 0, false)]
+    }, void 0, true), error !== null && /* @__PURE__ */ jsxDEV("p", {
+      className: "text-sm text-destructive",
+      "data-testid": "mail-error",
+      role: "alert",
+      children: error
+    }, void 0, false), error === null && !isLoading && entries.length === 0 && /* @__PURE__ */ jsxDEV(EmptyState, {
+      description: t("Email your app sends in dev is captured here — nothing is delivered."),
+      icon: /* @__PURE__ */ jsxDEV("svg", {
+        "aria-hidden": "true",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.6,
+        viewBox: "0 0 24 24",
+        children: [/* @__PURE__ */ jsxDEV("path", {
+          d: "M4 5h16v14H4z"
+        }, void 0, false), /* @__PURE__ */ jsxDEV("path", {
+          d: "m4 6 8 6 8-6"
+        }, void 0, false)]
+      }, void 0, true),
+      testId: "mail-empty",
+      title: t("No captured email.")
+    }, void 0, false), entries.length > 0 && /* @__PURE__ */ jsxDEV("div", {
+      className: "grid grid-cols-1 gap-4 md:grid-cols-[minmax(0,22rem)_1fr]",
+      "data-testid": "mail-reader",
+      children: [/* @__PURE__ */ jsxDEV("div", {
+        className: "flex flex-col gap-2",
+        children: [/* @__PURE__ */ jsxDEV(Input, {
+          "aria-label": t("Search messages"),
+          "data-testid": "mail-search",
+          onChange: onFilterChange,
+          placeholder: t("Filter messages"),
+          type: "search",
+          value: filter
+        }, void 0, false), /* @__PURE__ */ jsxDEV(ScrollArea, {
+          className: "max-h-[32rem] rounded-xl border border-border bg-card shadow-xs",
+          "data-testid": "mail-list",
+          children: /* @__PURE__ */ jsxDEV("ul", {
+            className: "divide-y",
+            children: visible.map((entry_1) => {
+              const isActive = entry_1.id === selected?.id;
+              return /* @__PURE__ */ jsxDEV("li", {
+                children: /* @__PURE__ */ jsxDEV("button", {
+                  className: `flex w-full flex-col items-start gap-0.5 px-3 py-2 text-left text-sm hover:bg-muted/60 ${isActive ? "bg-muted" : ""}`,
+                  "data-active": isActive,
+                  "data-id": entry_1.id,
+                  "data-testid": "mail-list-item",
+                  onClick: onSelectMessage,
+                  type: "button",
+                  children: [/* @__PURE__ */ jsxDEV("span", {
+                    className: "w-full truncate font-medium",
+                    children: entry_1.subject || t("(no subject)")
+                  }, void 0, false), /* @__PURE__ */ jsxDEV("span", {
+                    className: "w-full truncate text-xs text-muted-foreground",
+                    children: recipientText(entry_1.to)
+                  }, void 0, false), /* @__PURE__ */ jsxDEV("span", {
+                    className: "text-xs text-muted-foreground tabular-nums",
+                    children: formatTimestamp(entry_1.capturedAt, "—")
+                  }, void 0, false)]
+                }, void 0, true)
+              }, entry_1.id, false);
+            })
+          }, void 0, false)
+        }, void 0, false)]
+      }, void 0, true), selected !== void 0 && /* @__PURE__ */ jsxDEV("div", {
+        className: "flex min-w-0 flex-col gap-3 rounded-xl border border-border bg-card p-4 shadow-xs",
+        "data-testid": "mail-detail",
+        children: [/* @__PURE__ */ jsxDEV("div", {
+          className: "flex flex-col gap-1",
+          children: [/* @__PURE__ */ jsxDEV("h2", {
+            className: "truncate text-base font-semibold",
+            "data-testid": "mail-subject",
+            children: selected.subject || t("(no subject)")
+          }, void 0, false), /* @__PURE__ */ jsxDEV("dl", {
+            className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-xs text-muted-foreground",
+            children: [/* @__PURE__ */ jsxDEV("dt", {
+              children: t("From")
+            }, void 0, false), /* @__PURE__ */ jsxDEV("dd", {
+              className: "truncate font-mono",
+              children: selected.from ?? "—"
+            }, void 0, false), /* @__PURE__ */ jsxDEV("dt", {
+              children: t("To")
+            }, void 0, false), /* @__PURE__ */ jsxDEV("dd", {
+              className: "truncate font-mono",
+              children: recipientText(selected.to)
+            }, void 0, false), selected.cc !== void 0 && selected.cc.length > 0 && /* @__PURE__ */ jsxDEV(Fragment, {
+              children: [/* @__PURE__ */ jsxDEV("dt", {
+                children: t("Cc")
+              }, void 0, false), /* @__PURE__ */ jsxDEV("dd", {
+                className: "truncate font-mono",
+                children: recipientText(selected.cc)
+              }, void 0, false)]
+            }, void 0, true), /* @__PURE__ */ jsxDEV("dt", {
+              children: t("Sent")
+            }, void 0, false), /* @__PURE__ */ jsxDEV("dd", {
+              className: "tabular-nums",
+              children: formatTimestamp(selected.capturedAt, "—")
+            }, void 0, false)]
+          }, void 0, true)]
+        }, void 0, true), /* @__PURE__ */ jsxDEV("div", {
+          className: "flex flex-wrap items-center gap-2",
+          "data-testid": "mail-actions",
+          children: [/* @__PURE__ */ jsxDEV(Button, {
+            "data-testid": "mail-copy-link",
+            disabled: link === void 0,
+            onClick: onCopyLink,
+            size: "sm",
+            type: "button",
+            variant: "outline",
+            children: t("Copy link")
+          }, void 0, false), /* @__PURE__ */ jsxDEV(Button, {
+            "data-testid": "mail-open-link",
+            disabled: link === void 0,
+            onClick: onOpenLink,
+            size: "sm",
+            type: "button",
+            variant: "outline",
+            children: t("Open in new tab")
+          }, void 0, false)]
+        }, void 0, true), /* @__PURE__ */ jsxDEV(Separator, {}, void 0, false), /* @__PURE__ */ jsxDEV("div", {
+          className: "flex items-center gap-1",
+          "data-testid": "mail-tabs",
+          role: "tablist",
+          children: ["html", "text", "headers"].map((value_0) => /* @__PURE__ */ jsxDEV(Button, {
+            "aria-selected": tab === value_0,
+            "data-tab": value_0,
+            "data-testid": `mail-tab-${value_0}`,
+            onClick: onSelectTab,
+            role: "tab",
+            size: "sm",
+            type: "button",
+            variant: tab === value_0 ? "secondary" : "ghost",
+            children: tabTitle(value_0)
+          }, value_0, false))
+        }, void 0, false), /* @__PURE__ */ jsxDEV("div", {
+          className: "min-h-[12rem]",
+          children: [tab === "html" && (selected.html === void 0 ? /* @__PURE__ */ jsxDEV("p", {
+            className: "text-sm text-muted-foreground",
+            children: t("No HTML body.")
+          }, void 0, false) : (
+            // Fully sandboxed (no `allow-scripts`): captured markup renders but
+            // cannot execute in the studio. A restrictive CSP additionally blocks
+            // remote resource loads (tracking pixels / `@import`) so opening a
+            // captured message can't phone home — only inline styles + data: images.
+            /* @__PURE__ */ jsxDEV("iframe", {
+              className: "h-[24rem] w-full rounded-md border bg-white",
+              "data-testid": "mail-preview-html",
+              sandbox: "",
+              srcDoc: withPreviewCsp(selected.html),
+              title: t("Email preview")
+            }, void 0, false)
+          )), tab === "text" && (selected.text === void 0 ? /* @__PURE__ */ jsxDEV("p", {
+            className: "text-sm text-muted-foreground",
+            children: t("No text body.")
+          }, void 0, false) : /* @__PURE__ */ jsxDEV("pre", {
+            className: "overflow-auto whitespace-pre-wrap rounded-md border bg-muted/30 p-3 text-xs",
+            "data-testid": "mail-preview-text",
+            children: selected.text
+          }, void 0, false)), tab === "headers" && (selected.headers === void 0 || Object.keys(selected.headers).length === 0 ? /* @__PURE__ */ jsxDEV("p", {
+            className: "text-sm text-muted-foreground",
+            children: t("No headers.")
+          }, void 0, false) : /* @__PURE__ */ jsxDEV("pre", {
+            className: "overflow-auto whitespace-pre-wrap rounded-md border bg-muted/30 p-3 text-xs",
+            "data-testid": "mail-preview-headers",
+            children: Object.entries(selected.headers).map(([name, value_1]) => `${name}: ${value_1}`).join("\n")
+          }, void 0, false))]
+        }, void 0, true)]
+      }, void 0, true)]
+    }, void 0, true)]
+  }, void 0, true);
+};
+
+export { MailPanel };