@lunora/studio 1.0.0-alpha.59 → 1.0.0-alpha.60

package/dist/packem_chunks/MailPanel.js

@@ -1,353 +1,2 @@
-import { useLunora } from '@lunora/react';
-import { useState, useMemo } from 'react';
-import { E as ErrorAlert } from '../packem_shared/error-alert-D9uIFJUS.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 { S as ScrollArea } from '../packem_shared/scroll-area-DLhcy-ml.js';
-import { Separator as Separator$1 } from '@base-ui/react/separator';
-import { c as cn } from '../packem_shared/utils-B05Dmz_H.js';
-import { jsxDEV, Fragment } from 'react/jsx-dev-runtime';
-import { u as useAdminQuery } from '../packem_shared/use-admin-query-C7JNuQp-.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-P2UzJscH.js';
-import { i as formatTimestamp, f as fireAndForget, g as copyToClipboard, c as callOptions, e as errorMessage, a as adminRef } from '../packem_shared/internal-DzHCc2Rq.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);
-}
-
-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 };
+import{useLunora as G}from"@lunora/react";import{useState as p,useMemo as b}from"react";import{E as J}from"../packem_shared/error-alert-B59DnrDI.js";import{g as Q}from"../packem_shared/badge-BbuuAio7.js";import{u as m}from"../packem_shared/button-BkCrNcAs.js";import{E as V}from"../packem_shared/empty-state-Cg7t_8qu.js";import{u as X}from"../packem_shared/input-JHu63lTv.js";import{p as Y}from"../packem_shared/scroll-area-DTEq6Jec.js";import{Separator as Z}from"@base-ui/react/separator";import{c as ee}from"../packem_shared/utils-bhneXptQ.js";import{jsx as e,jsxs as d,Fragment as te}from"react/jsx-runtime";import{K as ae}from"../packem_shared/use-admin-query-Di3fLE8H.js";import{useAutoRefresh as re}from"../packem_shared/DEFAULT_AUTO_REFRESH_MS-BCC8_4BQ.js";import{useT as ie}from"../packem_shared/DEFAULT_LOCALE-BZ4NojpD.js";import{ADMIN_FUNCTIONS as v}from"../packem_shared/ADMIN_FUNCTIONS-BYNSbBVE.js";import{i as j,f as T,g as le,c as M,e as z,a as A}from"../packem_shared/internal-AtZ4bTal.js";function de({className:r,orientation:u="horizontal",...a}){return e(Z,{"data-slot":"separator",orientation:u,className:ee("shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",r),...a})}const se=A(v.clearCapturedMail),oe=A(v.sendTestMail),ne=/https?:\/\/[^\s"'<>)]+/i,S=r=>r===void 0?void 0:ne.exec(r)?.[0],ce=r=>{if(r!==void 0)return S(r.html)??S(r.text)},me=`<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src data:; style-src 'unsafe-inline'; font-src data:">`,ue=r=>`${me}${r}`,f=r=>r===void 0?"":Array.isArray(r)?r.join(", "):r,ze=({limit:r=100})=>{const u=G(),a=ie(),{data:N,error:w,errorSource:L,isLoading:E,refetch:x}=ae(v.getCapturedMail,{limit:r}),[y,h]=p(null),[C,k]=p(null),[n,F]=p("html"),[g,O]=p(""),s=b(()=>N?.entries??[],[N]),$=w??y,H=w===null?y:L,I=async()=>{h(null);try{await u.query(se,{},M("")),k(null),x()}catch(t){h(z(t))}},_=async()=>{h(null);try{await u.query(oe,{},M("")),x()}catch(t){h(z(t))}};re(()=>{x()},!0);const q=()=>{T(I())},P=()=>{T(_())},D=t=>{O(t.currentTarget.value)},R=t=>{const{id:l}=t.currentTarget.dataset;l!==void 0&&k(l)},B=t=>{const l=t.currentTarget.dataset.tab;(l==="headers"||l==="html"||l==="text")&&F(l)},K=t=>a(t==="html"?"HTML":t==="text"?"Plain text":"Headers"),c=b(()=>{const t=g.trim().toLowerCase();return t===""?s:s.filter(l=>`${l.subject} ${f(l.to)}`.toLowerCase().includes(t))},[s,g]),i=b(()=>{if(c.length!==0)return c.find(t=>t.id===C)??c[0]},[c,C]),o=ce(i),U=()=>{o!==void 0&&le(o)},W=()=>{o!==void 0&&"window"in globalThis&&globalThis.window.open(o,"_blank","noopener")};return d("div",{className:"flex flex-col gap-4","data-testid":"mail-panel",children:[d("div",{className:"flex flex-wrap items-center gap-2",children:[e(m,{"data-testid":"mail-send-test",onClick:P,size:"sm",type:"button",variant:"outline",children:a("Send test")}),e(m,{"data-testid":"mail-clear",disabled:s.length===0,onClick:q,size:"sm",type:"button",variant:"outline",children:a("Clear inbox")}),s.length>0&&e(Q,{className:"ml-auto","data-testid":"mail-count",variant:"secondary",children:a("{count} messages",{count:s.length})})]}),$!==null&&e(J,{error:H,testId:"mail-error"}),$===null&&!E&&s.length===0&&e(V,{description:a("Email your app sends in dev is captured here — nothing is delivered."),icon:d("svg",{"aria-hidden":"true",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.6,viewBox:"0 0 24 24",children:[e("path",{d:"M4 5h16v14H4z"}),e("path",{d:"m4 6 8 6 8-6"})]}),testId:"mail-empty",title:a("No captured email.")}),s.length>0&&d("div",{className:"grid grid-cols-1 gap-4 md:grid-cols-[minmax(0,22rem)_1fr]","data-testid":"mail-reader",children:[d("div",{className:"flex flex-col gap-2",children:[e(X,{"aria-label":a("Search messages"),"data-testid":"mail-search",onChange:D,placeholder:a("Filter messages"),type:"search",value:g}),e(Y,{className:"max-h-[32rem] rounded-xl border border-border bg-card shadow-xs","data-testid":"mail-list",children:e("ul",{className:"divide-y",children:c.map(t=>{const l=t.id===i?.id;return e("li",{children:d("button",{className:`flex w-full flex-col items-start gap-0.5 px-3 py-2 text-left text-sm hover:bg-muted/60 ${l?"bg-muted":""}`,"data-active":l,"data-id":t.id,"data-testid":"mail-list-item",onClick:R,type:"button",children:[e("span",{className:"w-full truncate font-medium",children:t.subject||a("(no subject)")}),e("span",{className:"w-full truncate text-xs text-muted-foreground",children:f(t.to)}),e("span",{className:"text-xs text-muted-foreground tabular-nums",children:j(t.capturedAt,"—")})]})},t.id)})})})]}),i!==void 0&&d("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:[d("div",{className:"flex flex-col gap-1",children:[e("h2",{className:"truncate text-base font-semibold","data-testid":"mail-subject",children:i.subject||a("(no subject)")}),d("dl",{className:"grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-xs text-muted-foreground",children:[e("dt",{children:a("From")}),e("dd",{className:"truncate font-mono",children:i.from??"—"}),e("dt",{children:a("To")}),e("dd",{className:"truncate font-mono",children:f(i.to)}),i.cc!==void 0&&i.cc.length>0&&d(te,{children:[e("dt",{children:a("Cc")}),e("dd",{className:"truncate font-mono",children:f(i.cc)})]}),e("dt",{children:a("Sent")}),e("dd",{className:"tabular-nums",children:j(i.capturedAt,"—")})]})]}),d("div",{className:"flex flex-wrap items-center gap-2","data-testid":"mail-actions",children:[e(m,{"data-testid":"mail-copy-link",disabled:o===void 0,onClick:U,size:"sm",type:"button",variant:"outline",children:a("Copy link")}),e(m,{"data-testid":"mail-open-link",disabled:o===void 0,onClick:W,size:"sm",type:"button",variant:"outline",children:a("Open in new tab")})]}),e(de,{}),e("div",{className:"flex items-center gap-1","data-testid":"mail-tabs",role:"tablist",children:["html","text","headers"].map(t=>e(m,{"aria-selected":n===t,"data-tab":t,"data-testid":`mail-tab-${t}`,onClick:B,role:"tab",size:"sm",type:"button",variant:n===t?"secondary":"ghost",children:K(t)},t))}),d("div",{className:"min-h-[12rem]",children:[n==="html"&&(i.html===void 0?e("p",{className:"text-sm text-muted-foreground",children:a("No HTML body.")}):e("iframe",{className:"h-[24rem] w-full rounded-md border bg-white","data-testid":"mail-preview-html",sandbox:"",srcDoc:ue(i.html),title:a("Email preview")})),n==="text"&&(i.text===void 0?e("p",{className:"text-sm text-muted-foreground",children:a("No text body.")}):e("pre",{className:"overflow-auto whitespace-pre-wrap rounded-md border bg-muted/30 p-3 text-xs","data-testid":"mail-preview-text",children:i.text})),n==="headers"&&(i.headers===void 0||Object.keys(i.headers).length===0?e("p",{className:"text-sm text-muted-foreground",children:a("No headers.")}):e("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(i.headers).map(([t,l])=>`${t}: ${l}`).join(`
+`)}))]})]})]})]})};export{ze as MailPanel};