@lunora/studio 1.0.0-alpha.34 → 1.0.0-alpha.340

package/dist/packem_chunks/MailPanel.js

@@ -1,441 +0,0 @@
-'use client';
-import { useLunora } from '@lunora/react';
-import { useState, useMemo } from 'react';
-import { E as ErrorAlert } from '../packem_shared/error-alert-BBT6D22d.js';
-import { B as Badge } from '../packem_shared/badge-B2PKA1-5.js';
-import { B as Button } from '../packem_shared/button-BhsN2uZH.js';
-import { E as EmptyState } from '../packem_shared/empty-state-DY_oe0k6.js';
-import { I as Input } from '../packem_shared/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 '../packem_shared/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 '../packem_shared/use-admin-query-BHPKmPuj.js';
-import { useAutoRefresh } from '../packem_shared/DEFAULT_AUTO_REFRESH_MS-Vxwaxx51.js';
-import { useT } from '../packem_shared/DEFAULT_LOCALE-CiX4W7Kr.js';
-import { ADMIN_FUNCTIONS } from '../packem_shared/ADMIN_FUNCTIONS-CdaxLGkE.js';
-import { i as formatTimestamp, f as fireAndForget, g as copyToClipboard, c as callOptions, e as errorMessage, a as adminRef } from '../packem_shared/internal-DTsYVn-g.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,
-    errorSource: readErrorSource,
-    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 errorSource = readError === null ? actionError : readErrorSource;
-  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(ErrorAlert, {
-      error: errorSource,
-      testId: "mail-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 };