@nivaro/react 0.3.40 → 0.3.42

package/dist/shared/components/BroadcastView.js

@@ -1,129 +1,139 @@
-import { jsxs as a, jsx as t, Fragment as oe } from "react/jsx-runtime";
-import { useQueryClient as ie, useQuery as k, useMutation as C } from "@tanstack/react-query";
-import { useState as p, useMemo as z, useEffect as Ce } from "react";
-import { createPortal as $e } from "react-dom";
-import { useNivaroClient as O } from "../context.js";
-import { get as v, post as j, patch as Te, del as Ae } from "../lib/commands.js";
-import { useLiveOps as je } from "../lib/live-ops.js";
+import { jsxs as a, jsx as t, Fragment as ce } from "react/jsx-runtime";
+import { useQueryClient as me, useQuery as k, useMutation as $ } from "@tanstack/react-query";
+import { useState as u, useMemo as Y, useEffect as Ae } from "react";
+import { createPortal as Te } from "react-dom";
+import { useNivaroClient as I } from "../context.js";
+import { get as v, post as j, patch as Le, del as je } from "../lib/commands.js";
+import { useLiveOps as Fe } from "../lib/live-ops.js";
 import { useLiveRefetchInterval as Ke } from "../lib/live-queries.js";
 import { cn as y } from "../lib/utils.js";
-import { BroadcastDraftPanel as Le } from "./BroadcastDraft.js";
-import { useHelpVideoLibrary as Fe } from "./help-videos/api.js";
-import { formatDuration as Pe } from "./help-videos/viewer/format.js";
-import { PickList as De } from "./imports/ServiceConfigBuilder.js";
-const ce = {
+import { audienceConfirmFromError as Pe, AudienceConfirmPanel as Ee } from "./AudienceConfirmPanel.js";
+import { BroadcastDraftPanel as De } from "./BroadcastDraft.js";
+import { useHelpVideoLibrary as Oe } from "./help-videos/api.js";
+import { formatDuration as Ie } from "./help-videos/viewer/format.js";
+import { PickList as Qe } from "./imports/ServiceConfigBuilder.js";
+const ue = {
   info: "bg-sky-500",
   warn: "bg-amber-500",
   critical: "bg-red-500"
 };
-function et({ className: r }) {
-  var le;
-  const o = O(), c = ie(), [b, h] = p(""), [s, u] = p(""), [l, n] = p("info"), [m, x] = p(!1), [d, N] = p(!1), [g, ue] = p(!0), [I, pe] = p(!1), [_, xe] = p("banner"), [Q, he] = p(!1), [Y, be] = p(""), [R, M] = p(""), [Z, ge] = p(""), [K, H] = p([]), [$, fe] = p([]), [J, q] = p(null), [T, W] = p(""), [X, ee] = p(""), A = Fe({ status: "published" }), te = () => {
+function st({ className: r }) {
+  var ie;
+  const i = I(), c = me(), [b, h] = u(""), [s, p] = u(""), [o, n] = u("info"), [m, x] = u(!1), [d, N] = u(!1), [g, xe] = u(!0), [Q, he] = u(!1), [_, be] = u("banner"), [R, ge] = u(!1), [Z, fe] = u(""), [M, H] = u(""), [J, ye] = u(""), [F, V] = u([]), [A, ke] = u([]), [W, q] = u(null), [T, X] = u(""), [ee, te] = u(""), L = Oe({ status: "published" }), ae = () => {
     if (!T) return {};
-    const e = Number(X);
+    const e = Number(ee);
     return {
       help_video_id: T,
       help_video_t_ms: Number.isFinite(e) && e > 0 ? Math.round(e * 1e3) : null
     };
-  }, { data: V } = k({
+  }, { data: U } = k({
     queryKey: ["broadcast-config"],
-    queryFn: () => o.request(v("/announcements/config")).then((e) => e.data).catch(() => ({ sms_enabled: !1 })),
+    queryFn: () => i.request(v("/announcements/config")).then((e) => e.data).catch(() => ({ sms_enabled: !1 })),
     staleTime: 5 * 6e4
-  }), { data: ye = [] } = k({
+  }), { data: ve = [] } = k({
     queryKey: ["broadcast-dimensions"],
-    queryFn: () => o.request(v("/scope-dimensions")).then((e) => e.data ?? []).catch(() => []),
+    queryFn: () => i.request(v("/scope-dimensions")).then((e) => e.data ?? []).catch(() => []),
     staleTime: 5 * 6e4
-  }), { data: ke = [] } = k({
+  }), { data: Ne = [] } = k({
     queryKey: ["broadcast-roles"],
-    queryFn: () => o.request(v("/chat/roles")).then((e) => e.data ?? []).catch(() => []),
+    queryFn: () => i.request(v("/chat/roles")).then((e) => e.data ?? []).catch(() => []),
     staleTime: 5 * 6e4
-  }), { data: ae = [] } = k({
+  }), { data: re = [] } = k({
     queryKey: ["broadcasts"],
-    queryFn: () => o.request(v("/announcements")).then((e) => e.data ?? [])
+    queryFn: () => i.request(v("/announcements")).then((e) => e.data ?? [])
   });
-  je("broadcasts", () => {
+  Fe("broadcasts", () => {
     c.invalidateQueries({ queryKey: ["broadcasts"] }), c.invalidateQueries({ queryKey: ["broadcast-receipt-summary"] }), c.invalidateQueries({ queryKey: ["broadcast-receipts"] });
   });
-  const w = z(() => {
+  const w = Y(() => {
     const e = [];
-    return g && e.push(_), m && e.push("email"), d && e.push("sms"), I && e.push("login"), e;
-  }, [g, _, m, d, I]), L = z(
-    () => K.map((e) => {
-      const i = {};
-      for (const [f, S] of Object.entries(e)) f && S.length > 0 && (i[f] = S);
-      return i;
+    return g && e.push(_), m && e.push("email"), d && e.push("sms"), Q && e.push("login"), e;
+  }, [g, _, m, d, Q]), K = Y(
+    () => F.map((e) => {
+      const l = {};
+      for (const [f, S] of Object.entries(e)) f && S.length > 0 && (l[f] = S);
+      return l;
     }).filter((e) => Object.keys(e).length > 0),
-    [K]
-  ), F = z(
+    [F]
+  ), P = Y(
     () => ({
-      ...L.length > 0 ? { groups: L } : {},
-      ...$.length > 0 ? { roles: $ } : {}
+      ...K.length > 0 ? { groups: K } : {},
+      ...A.length > 0 ? { roles: A } : {}
     }),
-    [L, $]
-  ), P = C({
-    mutationFn: () => o.request(
+    [K, A]
+  ), [ne, E] = u(null), C = $({
+    mutationFn: (e) => i.request(
       j("/announcements", {
+        ...e != null && e.confirm ? { confirm_audience: !0 } : {},
         subject: b.trim() || void 0,
         message: s.trim(),
-        severity: l,
+        severity: o,
         channels: w,
-        starts_at: Y || void 0,
-        scheduled_send_at: R || void 0,
-        ends_at: Z || void 0,
-        require_ack: g && _ === "banner" ? Q : !1,
-        audience: F,
-        ...te()
+        starts_at: Z || void 0,
+        scheduled_send_at: M || void 0,
+        ends_at: J || void 0,
+        require_ack: g && _ === "banner" ? R : !1,
+        audience: P,
+        ...ae()
       })
     ),
     onSuccess: (e) => {
-      const i = e.data.scheduled_for;
+      E(null);
+      const l = e.data.scheduled_for;
       q(
-        i ? `Scheduled — delivers ${new Date(i).toLocaleString()}. Cancel from the history below.` : w.some((f) => f !== "banner") ? `Sent — reached ${e.data.delivered} recipient(s).` : "Banner published."
-      ), u(""), h(""), M(""), W(""), ee(""), c.invalidateQueries({ queryKey: ["broadcasts"] }), c.invalidateQueries({ queryKey: ["announcements-active"] });
+        l ? `Scheduled — delivers ${new Date(l).toLocaleString()}. Cancel from the history below.` : w.some((f) => f !== "banner") ? `Sent — reached ${e.data.delivered} recipient(s).` : "Banner published."
+      ), p(""), h(""), H(""), X(""), te(""), c.invalidateQueries({ queryKey: ["broadcasts"] }), c.invalidateQueries({ queryKey: ["announcements-active"] });
     },
-    onError: (e) => q(e.message)
-  }), D = s.trim().length > 0 && w.length > 0 && !P.isPending, { data: re = [] } = k({
+    onError: (e) => {
+      const l = Pe(e);
+      if (l) {
+        E(l);
+        return;
+      }
+      q(e.message);
+    }
+  }), D = s.trim().length > 0 && w.length > 0 && !C.isPending, { data: se = [] } = k({
     queryKey: ["broadcast-templates"],
-    queryFn: () => o.request(v("/announcements/templates")).then((e) => e.data ?? []).catch(() => []),
+    queryFn: () => i.request(v("/announcements/templates")).then((e) => e.data ?? []).catch(() => []),
     staleTime: 6e4
-  }), ne = C({
-    mutationFn: (e) => o.request(
+  }), de = $({
+    mutationFn: (e) => i.request(
       j("/announcements/templates", {
         name: e,
         snapshot: {
           subject: b,
           message: s,
-          severity: l,
+          severity: o,
           channels: w,
-          require_ack: Q,
-          audience: F
+          require_ack: R,
+          audience: P
         }
       })
     ),
     onSuccess: () => void c.invalidateQueries({ queryKey: ["broadcast-templates"] })
-  }), ve = (e) => {
-    const i = e.snapshot ?? {};
-    typeof i.subject == "string" && h(i.subject), typeof i.message == "string" && u(i.message);
-  }, [U, se] = p(""), [Ne, de] = p(!1), B = C({
-    mutationFn: () => o.request(
+  }), we = (e) => {
+    const l = e.snapshot ?? {};
+    typeof l.subject == "string" && h(l.subject), typeof l.message == "string" && p(l.message);
+  }, [B, le] = u(""), [Se, oe] = u(!1), G = $({
+    mutationFn: () => i.request(
       j("/announcements/test-send", {
         subject: b.trim() || void 0,
         message: s.trim(),
         channels: w.filter((e) => e !== "banner"),
-        ...te()
+        ...ae()
       })
     ),
     onSuccess: (e) => q(
-      `Test sent to you — ${Object.entries(e.data ?? {}).map(([i, f]) => `${i}: ${f}`).join(", ")}`
+      `Test sent to you — ${Object.entries(e.data ?? {}).map(([l, f]) => `${l}: ${f}`).join(", ")}`
     ),
     onError: (e) => q(e.message)
-  }), E = (/* @__PURE__ */ new Date()).getHours(), we = !R && (E >= 21 || E < 7), Se = C({
-    mutationFn: ({ id: e, body: i }) => o.request(Te(`/announcements/${e}`, i)),
+  }), O = (/* @__PURE__ */ new Date()).getHours(), _e = !M && (O >= 21 || O < 7), qe = $({
+    mutationFn: ({ id: e, body: l }) => i.request(Le(`/announcements/${e}`, l)),
     onSuccess: () => {
       c.invalidateQueries({ queryKey: ["broadcasts"] }), c.invalidateQueries({ queryKey: ["announcements-active"] });
     }
-  }), _e = C({
-    mutationFn: (e) => o.request(Ae(`/announcements/${e}`)),
+  }), Ce = $({
+    mutationFn: (e) => i.request(je(`/announcements/${e}`)),
     onSuccess: () => {
       c.invalidateQueries({ queryKey: ["broadcasts"] }), c.invalidateQueries({ queryKey: ["announcements-active"] });
     }
@@ -133,43 +143,43 @@ function et({ className: r }) {
       /* @__PURE__ */ t("p", { className: "text-[13px] font-semibold text-slate-800 dark:text-foreground", children: "Audience" }),
       /* @__PURE__ */ t("p", { className: "mt-0.5 text-[11.5px] text-slate-400", children: "No selection = everyone. Zone/role targeting narrows both send channels and who sees a banner." }),
       /* @__PURE__ */ a("div", { className: "mt-3 space-y-2", children: [
-        K.map((e, i) => /* @__PURE__ */ t(
-          Oe,
+        F.map((e, l) => /* @__PURE__ */ t(
+          Me,
           {
-            index: i,
+            index: l,
             group: e,
-            dimensions: ye,
-            onChange: (f) => H((S) => S.map((G, qe) => qe === i ? f : G)),
-            onRemove: () => H((f) => f.filter((S, G) => G !== i))
+            dimensions: ve,
+            onChange: (f) => V((S) => S.map((z, $e) => $e === l ? f : z)),
+            onRemove: () => V((f) => f.filter((S, z) => z !== l))
           },
-          i
+          l
         )),
         /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            onClick: () => H((e) => [...e, {}]),
+            onClick: () => V((e) => [...e, {}]),
             className: "rounded-md border border-dashed border-slate-300 px-3 py-1.5 text-[11.5px] text-slate-500 hover:border-slate-400 hover:text-slate-700 dark:border-border dark:text-muted-foreground",
             children: [
               "＋",
               " ",
-              K.length === 0 ? "Target by scope (e.g. Zone 2 + Node Splits)" : "Add another group (OR)"
+              F.length === 0 ? "Target by scope (e.g. Zone 2 + Node Splits)" : "Add another group (OR)"
             ]
           }
         )
       ] }),
       /* @__PURE__ */ a("div", { className: "mt-3", children: [
         /* @__PURE__ */ t("p", { className: "mb-1 text-[11.5px] font-medium text-slate-700 dark:text-foreground", children: "Limit to roles" }),
-        /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-1.5", children: ke.map((e) => {
-          const i = $.includes(e.id);
+        /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-1.5", children: Ne.map((e) => {
+          const l = A.includes(e.id);
           return /* @__PURE__ */ t(
             "button",
             {
               type: "button",
-              onClick: () => fe((f) => i ? f.filter((S) => S !== e.id) : [...f, e.id]),
+              onClick: () => ke((f) => l ? f.filter((S) => S !== e.id) : [...f, e.id]),
               className: y(
                 "rounded-full border px-2.5 py-0.5 text-[11.5px] transition-colors",
-                i ? "border-nvr-cyan/50 bg-nvr-cyan/10 text-slate-800 dark:text-foreground" : "border-slate-200 text-slate-500 hover:text-slate-700 dark:border-border dark:text-muted-foreground"
+                l ? "border-nvr-cyan/50 bg-nvr-cyan/10 text-slate-800 dark:text-foreground" : "border-slate-200 text-slate-500 hover:text-slate-700 dark:border-border dark:text-muted-foreground"
               ),
               children: e.name
             },
@@ -178,10 +188,10 @@ function et({ className: r }) {
         }) })
       ] }),
       /* @__PURE__ */ t("div", { className: "mt-3 border-t border-slate-100 pt-2.5 dark:border-border", children: /* @__PURE__ */ t(
-        me,
+        pe,
         {
-          audience: F,
-          everyone: L.length === 0 && $.length === 0,
+          audience: P,
+          everyone: K.length === 0 && A.length === 0,
           label: "Sending to"
         }
       ) })
@@ -189,13 +199,13 @@ function et({ className: r }) {
     /* @__PURE__ */ a("div", { className: "max-w-[760px] rounded-lg border border-slate-200 bg-white p-4 dark:border-border dark:bg-card", children: [
       /* @__PURE__ */ t("p", { className: "text-[13px] font-semibold text-slate-800 dark:text-foreground", children: "Message" }),
       /* @__PURE__ */ t(
-        Le,
+        De,
         {
-          audience: F,
+          audience: P,
           channels: w,
-          severity: l,
+          severity: o,
           onUse: (e) => {
-            e.subject !== void 0 && h(e.subject), u(e.message);
+            e.subject !== void 0 && h(e.subject), p(e.message);
           }
         }
       ),
@@ -212,7 +222,7 @@ function et({ className: r }) {
         "textarea",
         {
           value: s,
-          onChange: (e) => u(e.target.value),
+          onChange: (e) => p(e.target.value),
           rows: 5,
           placeholder: "Compose your message… (plain text; line breaks are kept)",
           className: "mt-2 w-full rounded-md border border-slate-200 bg-background px-2.5 py-2 text-[12.5px] text-slate-800 dark:border-border dark:text-foreground"
@@ -224,7 +234,7 @@ function et({ className: r }) {
           "button",
           {
             type: "button",
-            onClick: () => u((i) => i ? `${i} ${e}` : e),
+            onClick: () => p((l) => l ? `${l} ${e}` : e),
             className: "rounded bg-slate-100 px-1.5 py-0.5 font-mono text-[10.5px] text-slate-600 hover:bg-slate-200 dark:bg-muted dark:text-slate-300 dark:hover:bg-accent",
             title: `Insert ${e} — replaced with each recipient's ${e === "{{name}}" ? "full name" : "first name"} at send time`,
             children: e
@@ -245,15 +255,15 @@ function et({ className: r }) {
                 "select",
                 {
                   value: T,
-                  onChange: (e) => W(e.target.value),
+                  onChange: (e) => X(e.target.value),
                   className: "h-7 max-w-[320px] rounded-md border border-slate-200 bg-background px-1.5 text-[12px] text-slate-800 dark:border-border dark:text-foreground",
                   "aria-label": "Attach a video",
                   "data-broadcast-video-id": !0,
                   children: [
                     /* @__PURE__ */ t("option", { value: "", children: "None" }),
-                    (((le = A.data) == null ? void 0 : le.data) ?? []).map((e) => /* @__PURE__ */ a("option", { value: e.id, children: [
+                    (((ie = L.data) == null ? void 0 : ie.data) ?? []).map((e) => /* @__PURE__ */ a("option", { value: e.id, children: [
                       e.title || "Untitled video",
-                      e.duration_ms != null ? ` (${Pe(e.duration_ms)})` : ""
+                      e.duration_ms != null ? ` (${Ie(e.duration_ms)})` : ""
                     ] }, e.id))
                   ]
                 }
@@ -267,8 +277,8 @@ function et({ className: r }) {
                   type: "number",
                   min: 0,
                   step: 1,
-                  value: X,
-                  onChange: (e) => ee(e.target.value),
+                  value: ee,
+                  onChange: (e) => te(e.target.value),
                   placeholder: "0",
                   className: "h-7 w-20 rounded-md border border-slate-200 bg-background px-1.5 text-[12px] dark:border-border",
                   "aria-label": "Start at (seconds)",
@@ -277,14 +287,14 @@ function et({ className: r }) {
               ),
               "seconds"
             ] }),
-            A.hasNextPage && /* @__PURE__ */ t(
+            L.hasNextPage && /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
-                onClick: () => void A.fetchNextPage(),
-                disabled: A.isFetchingNextPage,
+                onClick: () => void L.fetchNextPage(),
+                disabled: L.isFetchingNextPage,
                 className: "rounded border border-slate-200 px-1.5 py-0.5 text-[11px] hover:bg-slate-50 dark:border-border dark:hover:bg-muted",
-                children: A.isFetchingNextPage ? "Loading…" : "More videos"
+                children: L.isFetchingNextPage ? "Loading…" : "More videos"
               }
             ),
             T && /* @__PURE__ */ t("span", { className: "text-slate-400 dark:text-slate-500", children: "Shown as a card with a link to that moment — only to people who can watch the video." })
@@ -298,7 +308,7 @@ function et({ className: r }) {
             {
               type: "checkbox",
               checked: g,
-              onChange: (e) => ue(e.target.checked),
+              onChange: (e) => xe(e.target.checked),
               className: "h-3.5 w-3.5"
             }
           ),
@@ -311,7 +321,7 @@ function et({ className: r }) {
           "button",
           {
             type: "button",
-            onClick: () => xe(e.value),
+            onClick: () => be(e.value),
             className: y(
               "rounded px-2 py-0.5 text-[11px] font-medium transition-colors",
               _ === e.value ? "bg-nvr-cyan/10 text-slate-800 dark:text-foreground" : "text-slate-400 hover:text-slate-600"
@@ -342,8 +352,8 @@ function et({ className: r }) {
                 "input",
                 {
                   type: "checkbox",
-                  checked: I,
-                  onChange: (e) => pe(e.target.checked),
+                  checked: Q,
+                  onChange: (e) => he(e.target.checked),
                   className: "h-3.5 w-3.5"
                 }
               ),
@@ -351,7 +361,7 @@ function et({ className: r }) {
             ]
           }
         ),
-        (V == null ? void 0 : V.sms_enabled) && /* @__PURE__ */ a("label", { className: "flex cursor-pointer items-center gap-1.5 text-[12px] text-slate-600 dark:text-muted-foreground", children: [
+        (U == null ? void 0 : U.sms_enabled) && /* @__PURE__ */ a("label", { className: "flex cursor-pointer items-center gap-1.5 text-[12px] text-slate-600 dark:text-muted-foreground", children: [
           /* @__PURE__ */ t(
             "input",
             {
@@ -363,14 +373,14 @@ function et({ className: r }) {
           ),
           "Text (SMS)"
         ] }),
-        g && _ === "banner" && /* @__PURE__ */ a(oe, { children: [
+        g && _ === "banner" && /* @__PURE__ */ a(ce, { children: [
           /* @__PURE__ */ a("label", { className: "flex cursor-pointer items-center gap-1.5 text-[12px] text-slate-600 dark:text-slate-300", children: [
             /* @__PURE__ */ t(
               "input",
               {
                 type: "checkbox",
-                checked: Q,
-                onChange: (e) => he(e.target.checked),
+                checked: R,
+                onChange: (e) => ge(e.target.checked),
                 className: "h-3.5 w-3.5"
               }
             ),
@@ -383,10 +393,10 @@ function et({ className: r }) {
               onClick: () => n(e),
               className: y(
                 "flex items-center gap-1.5 rounded px-2 py-0.5 text-[11px] font-medium capitalize transition-colors",
-                l === e ? "bg-nvr-cyan/10 text-slate-800 dark:text-foreground" : "text-slate-400 hover:text-slate-600"
+                o === e ? "bg-nvr-cyan/10 text-slate-800 dark:text-foreground" : "text-slate-400 hover:text-slate-600"
               ),
               children: [
-                /* @__PURE__ */ t("span", { className: y("h-1.5 w-1.5 rounded-full", ce[e]) }),
+                /* @__PURE__ */ t("span", { className: y("h-1.5 w-1.5 rounded-full", ue[e]) }),
                 e
               ]
             },
@@ -398,8 +408,8 @@ function et({ className: r }) {
               "input",
               {
                 type: "datetime-local",
-                value: Y,
-                onChange: (e) => be(e.target.value),
+                value: Z,
+                onChange: (e) => fe(e.target.value),
                 className: "h-7 rounded-md border border-slate-200 bg-background px-1.5 text-[12px] dark:border-border"
               }
             )
@@ -410,8 +420,8 @@ function et({ className: r }) {
               "input",
               {
                 type: "datetime-local",
-                value: Z,
-                onChange: (e) => ge(e.target.value),
+                value: J,
+                onChange: (e) => ye(e.target.value),
                 className: "h-7 rounded-md border border-slate-200 bg-background px-1.5 text-[12px] dark:border-border"
               }
             )
@@ -426,8 +436,8 @@ function et({ className: r }) {
             "input",
             {
               type: "datetime-local",
-              value: R,
-              onChange: (e) => M(e.target.value),
+              value: M,
+              onChange: (e) => H(e.target.value),
               title: "Leave empty to send immediately. With a time set, every channel (banner included) waits until then.",
               className: "h-7 rounded-md border border-slate-200 bg-background px-1.5 text-[12px] dark:border-border"
             }
@@ -437,13 +447,13 @@ function et({ className: r }) {
           "button",
           {
             type: "button",
-            disabled: !D || B.isPending,
+            disabled: !D || G.isPending,
             onClick: () => {
-              q(null), B.mutate();
+              q(null), G.mutate();
             },
             "data-tip": "Send this compose to YOURSELF over the picked channels first (#429)",
             className: "h-8 rounded-md border border-slate-200 px-3 text-[12.5px] font-medium text-slate-600 hover:bg-muted disabled:opacity-50 dark:border-border dark:text-slate-300",
-            children: B.isPending ? "Testing…" : "Test on me"
+            children: G.isPending ? "Testing…" : "Test on me"
           }
         ),
         /* @__PURE__ */ t(
@@ -452,18 +462,18 @@ function et({ className: r }) {
             type: "button",
             disabled: !D,
             onClick: () => {
-              q(null), P.mutate();
+              q(null), E(null), C.mutate(void 0);
             },
             className: "h-8 rounded-md bg-nvr-cyan px-4 text-[12.5px] font-medium text-white disabled:opacity-50",
-            children: P.isPending ? "Sending…" : "Send"
+            children: C.isPending ? "Sending…" : "Send"
           }
         ),
-        Ne ? /* @__PURE__ */ a("span", { className: "flex items-center gap-1", children: [
+        Se ? /* @__PURE__ */ a("span", { className: "flex items-center gap-1", children: [
           /* @__PURE__ */ t(
             "input",
             {
-              value: U,
-              onChange: (e) => se(e.target.value),
+              value: B,
+              onChange: (e) => le(e.target.value),
               placeholder: "Template name…",
               className: "h-7 w-40 rounded-md border border-slate-200 bg-background px-1.5 text-[12px] dark:border-border"
             }
@@ -472,9 +482,9 @@ function et({ className: r }) {
             "button",
             {
               type: "button",
-              disabled: !U.trim() || ne.isPending,
+              disabled: !B.trim() || de.isPending,
               onClick: () => {
-                ne.mutate(U.trim()), de(!1), se("");
+                de.mutate(B.trim()), oe(!1), le("");
               },
               className: "h-7 rounded-md border border-slate-200 px-2 text-[11.5px] hover:bg-muted dark:border-border",
               children: "Save"
@@ -485,18 +495,29 @@ function et({ className: r }) {
           {
             type: "button",
             disabled: !s.trim(),
-            onClick: () => de(!0),
+            onClick: () => oe(!0),
             "data-tip": "Save this compose (audience + channels + text) as a reusable template (#104)",
             className: "h-8 rounded-md border border-dashed border-slate-300 px-2.5 text-[11.5px] text-slate-500 hover:text-slate-700 disabled:opacity-40 dark:border-border",
             children: "☆ Save template"
           }
         ),
-        !D && !P.isPending && /* @__PURE__ */ t("span", { className: "text-[11.5px] text-slate-400", children: "A message and at least one channel are required." }),
-        J && /* @__PURE__ */ t("span", { className: "text-[12px] font-medium text-emerald-600 dark:text-emerald-400", children: J })
+        !D && !C.isPending && /* @__PURE__ */ t("span", { className: "text-[11.5px] text-slate-400", children: "A message and at least one channel are required." }),
+        W && /* @__PURE__ */ t("span", { className: "text-[12px] font-medium text-emerald-600 dark:text-emerald-400", children: W })
       ] }),
-      we && D && /* @__PURE__ */ a("p", { className: "mt-2 rounded-md bg-amber-50 px-3 py-1.5 text-[12px] text-amber-700 dark:bg-amber-400/10 dark:text-amber-400", children: [
+      ne && /* @__PURE__ */ t(
+        Ee,
+        {
+          className: "mt-3",
+          preview: ne,
+          busy: C.isPending,
+          confirmLabel: "Confirm and send",
+          onConfirm: () => C.mutate({ confirm: !0 }),
+          onCancel: () => E(null)
+        }
+      ),
+      _e && D && /* @__PURE__ */ a("p", { className: "mt-2 rounded-md bg-amber-50 px-3 py-1.5 text-[12px] text-amber-700 dark:bg-amber-400/10 dark:text-amber-400", children: [
         "It's ",
-        E >= 21 ? "late" : "early",
+        O >= 21 ? "late" : "early",
         " for most recipients — consider the schedule field so this lands in the morning instead of overnight.",
         " ",
         /* @__PURE__ */ t(
@@ -506,19 +527,19 @@ function et({ className: r }) {
             className: "font-medium underline underline-offset-2",
             onClick: () => {
               const e = /* @__PURE__ */ new Date();
-              E >= 21 && e.setDate(e.getDate() + 1), e.setHours(8, 0, 0, 0);
-              const i = (f) => String(f).padStart(2, "0");
-              M(
-                `${e.getFullYear()}-${i(e.getMonth() + 1)}-${i(e.getDate())}T${i(e.getHours())}:${i(e.getMinutes())}`
+              O >= 21 && e.setDate(e.getDate() + 1), e.setHours(8, 0, 0, 0);
+              const l = (f) => String(f).padStart(2, "0");
+              H(
+                `${e.getFullYear()}-${l(e.getMonth() + 1)}-${l(e.getDate())}T${l(e.getHours())}:${l(e.getMinutes())}`
               );
             },
             children: "Schedule for 8:00 AM"
           }
         )
       ] }),
-      re.length > 0 && /* @__PURE__ */ a("div", { className: "mt-2 flex flex-wrap items-center gap-1.5", children: [
+      se.length > 0 && /* @__PURE__ */ a("div", { className: "mt-2 flex flex-wrap items-center gap-1.5", children: [
         /* @__PURE__ */ t("span", { className: "text-[11px] text-slate-400", children: "Templates:" }),
-        re.map((e) => /* @__PURE__ */ t(
+        se.map((e) => /* @__PURE__ */ t(
           "span",
           {
             className: "inline-flex items-center overflow-hidden rounded-full border border-slate-200 dark:border-border",
@@ -526,7 +547,7 @@ function et({ className: r }) {
               "button",
               {
                 type: "button",
-                onClick: () => ve(e),
+                onClick: () => we(e),
                 className: "px-2 py-0.5 text-[11.5px] text-slate-600 hover:bg-muted dark:text-slate-300",
                 children: e.name
               }
@@ -538,30 +559,30 @@ function et({ className: r }) {
     ] }),
     /* @__PURE__ */ a("div", { className: "max-w-[760px] space-y-2", children: [
       /* @__PURE__ */ t("p", { className: "text-[11px] font-semibold uppercase tracking-wide text-slate-500 dark:text-muted-foreground", children: "History" }),
-      ae.length === 0 && /* @__PURE__ */ t("p", { className: "text-[12px] text-slate-400", children: "Nothing sent yet." }),
-      ae.map((e) => /* @__PURE__ */ t(
-        Ee,
+      re.length === 0 && /* @__PURE__ */ t("p", { className: "text-[12px] text-slate-400", children: "Nothing sent yet." }),
+      re.map((e) => /* @__PURE__ */ t(
+        Re,
         {
           broadcast: e,
-          onPatch: Se.mutate,
-          onRemove: _e.mutate
+          onPatch: qe.mutate,
+          onRemove: Ce.mutate
         },
         e.id
       ))
     ] })
   ] });
 }
-function Ee({
+function Re({
   broadcast: r,
-  onPatch: o,
+  onPatch: i,
   onRemove: c
 }) {
-  const b = O(), h = ie(), [s, u] = p(!1), { data: l } = k({
+  const b = I(), h = me(), [s, p] = u(!1), { data: o } = k({
     queryKey: ["broadcast-receipt-summary", r.id],
     queryFn: () => b.request(v(`/announcements/${r.id}/receipts/summary`)).then((d) => d.data),
     enabled: s,
     staleTime: 5e3
-  }), n = C({
+  }), n = $({
     mutationFn: () => b.request(
       j(`/announcements/${r.id}/nudge`, {})
     ),
@@ -579,7 +600,7 @@ function Ee({
   });
   return /* @__PURE__ */ a("div", { className: "rounded-lg border border-slate-200 bg-white dark:border-border dark:bg-card", children: [
     /* @__PURE__ */ a("div", { className: "flex items-start gap-3 px-4 py-3", children: [
-      /* @__PURE__ */ t("span", { className: y("mt-1.5 h-2 w-2 shrink-0 rounded-full", ce[r.severity]) }),
+      /* @__PURE__ */ t("span", { className: y("mt-1.5 h-2 w-2 shrink-0 rounded-full", ue[r.severity]) }),
       /* @__PURE__ */ a("div", { className: "min-w-0 flex-1", children: [
         r.subject && /* @__PURE__ */ t("p", { className: "text-[12.5px] font-medium text-slate-800 dark:text-foreground", children: r.subject }),
         /* @__PURE__ */ t("p", { className: "text-[12.5px] text-slate-600 dark:text-muted-foreground", children: r.message }),
@@ -612,7 +633,7 @@ function Ee({
             "button",
             {
               type: "button",
-              onClick: () => u((d) => !d),
+              onClick: () => p((d) => !d),
               className: "underline decoration-dotted underline-offset-2 hover:text-slate-600 dark:hover:text-muted-foreground",
               children: [
                 s ? "hide receipts" : "who saw this?",
@@ -630,7 +651,7 @@ function Ee({
         "button",
         {
           type: "button",
-          onClick: () => o({ id: r.id, body: { is_active: !r.is_active } }),
+          onClick: () => i({ id: r.id, body: { is_active: !r.is_active } }),
           className: y(
             "shrink-0 rounded-full border px-2 py-0.5 text-[11px] font-medium",
             r.is_active ? "border-emerald-300 text-emerald-700 dark:border-emerald-500/40 dark:text-emerald-400" : "border-slate-200 text-slate-400 dark:border-border"
@@ -648,7 +669,7 @@ function Ee({
         }
       )
     ] }),
-    s && l && (l.totals.delivered > 0 || l.totals.acked > 0) && /* @__PURE__ */ a(
+    s && o && (o.totals.delivered > 0 || o.totals.acked > 0) && /* @__PURE__ */ a(
       "div",
       {
         className: "border-t border-slate-100 px-4 py-3 dark:border-border",
@@ -658,17 +679,17 @@ function Ee({
             /* @__PURE__ */ t("p", { className: "text-[10.5px] font-semibold uppercase tracking-wide text-slate-400", children: "By audience" }),
             /* @__PURE__ */ a("span", { className: "text-[11.5px] text-slate-500 dark:text-muted-foreground", children: [
               "delivered ",
-              /* @__PURE__ */ t("b", { children: l.totals.delivered }),
+              /* @__PURE__ */ t("b", { children: o.totals.delivered }),
               " · opened ",
-              /* @__PURE__ */ t("b", { children: l.totals.opened }),
+              /* @__PURE__ */ t("b", { children: o.totals.opened }),
               " · acknowledged ",
-              /* @__PURE__ */ t("b", { children: l.totals.acked }),
+              /* @__PURE__ */ t("b", { children: o.totals.acked }),
               " · still unread",
               " ",
-              /* @__PURE__ */ t("b", { children: l.totals.unread })
+              /* @__PURE__ */ t("b", { children: o.totals.unread })
             ] }),
             /* @__PURE__ */ t("span", { className: "flex-1" }),
-            l.totals.unread > 0 && /* @__PURE__ */ t(
+            o.totals.unread > 0 && /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
@@ -676,11 +697,11 @@ function Ee({
                 onClick: () => n.mutate(),
                 className: "rounded-md border border-amber-300 bg-amber-50 px-2.5 py-1 text-[11.5px] font-medium text-amber-800 hover:bg-amber-100 disabled:opacity-50 dark:border-amber-500/40 dark:bg-amber-500/10 dark:text-amber-300",
                 "data-nvr-nudge": !0,
-                children: n.isPending ? "Nudging…" : n.data ? `Nudged ${n.data.data.nudged}` : `Nudge ${l.totals.unread} unread`
+                children: n.isPending ? "Nudging…" : n.data ? `Nudged ${n.data.data.nudged}` : `Nudge ${o.totals.unread} unread`
               }
             )
           ] }),
-          /* @__PURE__ */ t("div", { className: "mt-2 grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3", children: [["Role", l.by_role], ...Object.entries(l.by_dimension)].map(
+          /* @__PURE__ */ t("div", { className: "mt-2 grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3", children: [["Role", o.by_role], ...Object.entries(o.by_dimension)].map(
             ([d, N]) => /* @__PURE__ */ a("table", { className: "w-full text-[11.5px] tabular-nums", children: [
               /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ a("tr", { className: "text-left text-[10px] uppercase tracking-wide text-slate-400", children: [
                 /* @__PURE__ */ t("th", { className: "py-0.5 font-semibold", children: d }),
@@ -707,11 +728,11 @@ function Ee({
               ] }, g.label)) })
             ] }, d)
           ) }),
-          l.unread_users.length > 0 && /* @__PURE__ */ a("p", { className: "mt-2 text-[11px] text-slate-400", children: [
+          o.unread_users.length > 0 && /* @__PURE__ */ a("p", { className: "mt-2 text-[11px] text-slate-400", children: [
             "Unread:",
             " ",
-            l.unread_users.slice(0, 12).map((d) => d.name).join(", "),
-            l.unread_users.length > 12 ? ` +${l.unread_users.length - 12} more` : ""
+            o.unread_users.slice(0, 12).map((d) => d.name).join(", "),
+            o.unread_users.length > 12 ? ` +${o.unread_users.length - 12} more` : ""
           ] })
         ]
       }
@@ -752,14 +773,14 @@ function Ee({
     ] })
   ] });
 }
-function Oe({
+function Me({
   index: r,
-  group: o,
+  group: i,
   dimensions: c,
   onChange: b,
   onRemove: h
 }) {
-  const s = Object.keys(o), u = c.filter((n) => !s.includes(n.name)), l = s.length > 0 && s.every((n) => (o[n] ?? []).length > 0);
+  const s = Object.keys(i), p = c.filter((n) => !s.includes(n.name)), o = s.length > 0 && s.every((n) => (i[n] ?? []).length > 0);
   return /* @__PURE__ */ a("div", { className: "rounded-lg border border-slate-200 bg-slate-50/60 p-3 dark:border-border dark:bg-muted/30", children: [
     /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ a("p", { className: "text-[10.5px] font-semibold uppercase tracking-wide text-slate-400", children: [
@@ -768,10 +789,10 @@ function Oe({
         s.length > 1 && " · all conditions must match"
       ] }),
       /* @__PURE__ */ a("div", { className: "flex items-center gap-2.5", children: [
-        l && /* @__PURE__ */ t(
-          me,
+        o && /* @__PURE__ */ t(
+          pe,
           {
-            audience: { groups: [o] },
+            audience: { groups: [i] },
             everyone: !1,
             label: "Matches",
             compact: !0
@@ -794,45 +815,45 @@ function Oe({
         return /* @__PURE__ */ a("div", { className: "flex flex-wrap items-start gap-2", children: [
           /* @__PURE__ */ t("span", { className: "mt-0.5 w-[110px] shrink-0 text-[11.5px] font-medium text-slate-600 dark:text-muted-foreground", children: (m == null ? void 0 : m.label) ?? n }),
           /* @__PURE__ */ t("div", { className: "min-w-0 flex-1", children: m ? /* @__PURE__ */ t(
-            Ie,
+            He,
             {
               dim: m,
-              selected: o[n] ?? [],
+              selected: i[n] ?? [],
               onChange: (x) => {
-                const d = { ...o };
+                const d = { ...i };
                 x.length === 0 ? delete d[n] : d[n] = x, b(d);
               }
             }
           ) : /* @__PURE__ */ t("span", { className: "text-[11.5px] text-slate-400", children: "Unknown scope" }) })
         ] }, n);
       }),
-      u.length > 0 && /* @__PURE__ */ t("div", { className: "w-[200px]", children: /* @__PURE__ */ t(
-        De,
+      p.length > 0 && /* @__PURE__ */ t("div", { className: "w-[200px]", children: /* @__PURE__ */ t(
+        Qe,
         {
           value: "",
           onChange: (n) => {
-            n && b({ ...o, [n]: [] });
+            n && b({ ...i, [n]: [] });
           },
-          options: u.map((n) => ({ value: n.name, label: n.label })),
+          options: p.map((n) => ({ value: n.name, label: n.label })),
           placeholder: s.length === 0 ? "Pick a scope…" : "＋ And also…"
         }
       ) })
     ] })
   ] });
 }
-function Ie({
+function He({
   dim: r,
-  selected: o,
+  selected: i,
   onChange: c
 }) {
-  const b = O(), { data: h = [] } = k({
+  const b = I(), { data: h = [] } = k({
     queryKey: ["broadcast-dim-options", r.target_collection],
     queryFn: () => b.request(
       v(`/items/${r.target_collection}`, { limit: 200 })
     ).then(
-      (s) => (s.data ?? []).map((u) => ({
-        id: u.id,
-        label: String(u[r.display_field || "name"] ?? u.id)
+      (s) => (s.data ?? []).map((p) => ({
+        id: p.id,
+        label: String(p[r.display_field || "name"] ?? p.id)
       }))
     ),
     staleTime: 5 * 6e4
@@ -840,17 +861,17 @@ function Ie({
   return /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-1.5", children: [
     h.length === 0 && /* @__PURE__ */ t("span", { className: "text-[11.5px] text-slate-400", children: "Loading…" }),
     h.map((s) => {
-      const u = o.some((l) => String(l) === String(s.id));
+      const p = i.some((o) => String(o) === String(s.id));
       return /* @__PURE__ */ t(
         "button",
         {
           type: "button",
           onClick: () => c(
-            u ? o.filter((l) => String(l) !== String(s.id)) : [...o, s.id]
+            p ? i.filter((o) => String(o) !== String(s.id)) : [...i, s.id]
           ),
           className: y(
             "rounded-full border px-2.5 py-0.5 text-[11.5px] transition-colors",
-            u ? "border-nvr-cyan/50 bg-nvr-cyan/10 text-slate-800 dark:text-foreground" : "border-slate-200 bg-white text-slate-500 hover:text-slate-700 dark:border-border dark:bg-card dark:text-muted-foreground"
+            p ? "border-nvr-cyan/50 bg-nvr-cyan/10 text-slate-800 dark:text-foreground" : "border-slate-200 bg-white text-slate-500 hover:text-slate-700 dark:border-border dark:bg-card dark:text-muted-foreground"
           ),
           children: s.label
         },
@@ -859,28 +880,28 @@ function Ie({
     })
   ] });
 }
-function me({
+function pe({
   audience: r,
-  everyone: o,
+  everyone: i,
   label: c,
   compact: b
 }) {
-  const h = O(), [s, u] = p(!1), l = JSON.stringify(r), { data: n } = k({
-    queryKey: ["broadcast-audience-preview", l],
+  const h = I(), [s, p] = u(!1), o = JSON.stringify(r), { data: n } = k({
+    queryKey: ["broadcast-audience-preview", o],
     queryFn: () => h.request(j("/announcements/preview-audience", { audience: r })).then((m) => m.data),
-    enabled: !o,
+    enabled: !i,
     staleTime: 3e4
   });
-  return o ? /* @__PURE__ */ a("p", { className: "text-[11.5px] text-slate-500 dark:text-muted-foreground", children: [
+  return i ? /* @__PURE__ */ a("p", { className: "text-[11.5px] text-slate-500 dark:text-muted-foreground", children: [
     c,
     ": ",
     /* @__PURE__ */ t("span", { className: "font-medium", children: "Everyone" })
-  ] }) : /* @__PURE__ */ a(oe, { children: [
+  ] }) : /* @__PURE__ */ a(ce, { children: [
     /* @__PURE__ */ a(
       "button",
       {
         type: "button",
-        onClick: () => u(!0),
+        onClick: () => p(!0),
         className: "text-[11.5px] text-slate-500 underline decoration-dotted underline-offset-2 hover:text-slate-700 dark:text-muted-foreground",
         title: "Click to see who",
         children: [
@@ -893,35 +914,35 @@ function me({
       }
     ),
     s && n && /* @__PURE__ */ t(
-      Qe,
+      Ve,
       {
         title: c === "Matches" ? "This group matches" : "Sending to",
         count: n.count,
         users: n.users,
         truncated: n.truncated,
-        onClose: () => u(!1)
+        onClose: () => p(!1)
       }
     )
   ] });
 }
-function Qe({
+function Ve({
   title: r,
-  count: o,
+  count: i,
   users: c,
   truncated: b,
   onClose: h
 }) {
-  const [s, u] = p("");
-  Ce(() => {
+  const [s, p] = u("");
+  Ae(() => {
     const m = (x) => {
       x.key === "Escape" && h();
     };
     return window.addEventListener("keydown", m), () => window.removeEventListener("keydown", m);
   }, [h]);
-  const l = s.trim().toLowerCase(), n = l ? c.filter(
-    (m) => m.name.toLowerCase().includes(l) || (m.email ?? "").toLowerCase().includes(l)
+  const o = s.trim().toLowerCase(), n = o ? c.filter(
+    (m) => m.name.toLowerCase().includes(o) || (m.email ?? "").toLowerCase().includes(o)
   ) : c;
-  return $e(
+  return Te(
     /* @__PURE__ */ a("div", { className: "fixed inset-0 z-[100]", children: [
       /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-black/30", onClick: h }),
       /* @__PURE__ */ a("div", { className: "absolute right-0 top-0 flex h-full w-[380px] max-w-[92vw] flex-col border-l border-slate-200 bg-white shadow-xl dark:border-border dark:bg-card", children: [
@@ -930,9 +951,9 @@ function Qe({
             /* @__PURE__ */ a("p", { className: "text-[13px] font-semibold text-slate-800 dark:text-foreground", children: [
               r,
               /* @__PURE__ */ a("span", { className: "ml-1.5 font-normal text-slate-400", children: [
-                o,
+                i,
                 " user",
-                o === 1 ? "" : "s"
+                i === 1 ? "" : "s"
               ] })
             ] }),
             /* @__PURE__ */ t(
@@ -950,7 +971,7 @@ function Qe({
             {
               autoFocus: !0,
               value: s,
-              onChange: (m) => u(m.target.value),
+              onChange: (m) => p(m.target.value),
               placeholder: "Search name or email…",
               className: "mt-2 h-8 w-full rounded-md border border-slate-200 bg-background px-2.5 text-[12.5px] text-slate-800 dark:border-border dark:text-foreground"
             }
@@ -973,7 +994,7 @@ function Qe({
             "Showing the first ",
             c.length,
             " of ",
-            o,
+            i,
             "."
           ] })
         ] })
@@ -983,5 +1004,5 @@ function Qe({
   );
 }
 export {
-  et as BroadcastView
+  st as BroadcastView
 };