@oneclick.dev/cms-core-modules 0.0.121 → 0.0.122

package/dist/SendPush-CmbjcQBL.mjs

@@ -0,0 +1,680 @@
+import { defineComponent as U, openBlock as l, createElementBlock as c, createElementVNode as e, toDisplayString as n, ref as te, computed as o, resolveComponent as d, createVNode as a, isRef as Oe, unref as v, withCtx as i, createTextVNode as u, createBlock as w, reactive as Re, watch as ge, Fragment as L, createCommentVNode as g, normalizeClass as $, renderList as Ge } from "vue";
+import { BellRing as Ye, Languages as _e, ChevronsUpDown as He, Check as xe, Copy as We, Globe2 as Je, AlertCircle as he, Send as Ke } from "lucide-vue-next";
+import { useModuleBreadcrumbs as Qe, useModulePermissions as Xe } from "@oneclick.dev/cms-kit";
+import { l as Ze } from "./languages-C_8yMQOH.mjs";
+import { _ as ye } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const et = { class: "preview-iphone" }, tt = { class: "push-container" }, st = { class: "inner" }, at = { class: "head" }, nt = { class: "app-name" }, ot = { class: "body" }, lt = { class: "push-title" }, it = { class: "push-message" }, rt = /* @__PURE__ */ U({
+  __name: "PreviewIPhone",
+  props: {
+    app: {
+      type: String,
+      required: !0
+    },
+    title: {
+      type: String,
+      required: !0
+    },
+    message: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(_) {
+    return (y, f) => (l(), c("div", et, [
+      e("div", tt, [
+        e("div", st, [
+          e("div", at, [
+            e("span", nt, n(_.app), 1),
+            f[0] || (f[0] = e("span", null, "now", -1))
+          ]),
+          e("div", ot, [
+            e("span", lt, n(_.title), 1),
+            e("span", it, n(_.message), 1)
+          ])
+        ])
+      ])
+    ]));
+  }
+}), ut = /* @__PURE__ */ ye(rt, [["__scopeId", "data-v-8c84cde9"]]), dt = { class: "preview-android" }, ct = { class: "push-container" }, mt = { class: "inner" }, pt = { class: "head" }, vt = { class: "app-name" }, ft = { class: "body" }, gt = { class: "push-title" }, _t = { class: "push-message" }, xt = /* @__PURE__ */ U({
+  __name: "PreviewAndroid",
+  props: {
+    app: {
+      type: String,
+      required: !0
+    },
+    title: {
+      type: String,
+      required: !0
+    },
+    message: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(_) {
+    return (y, f) => (l(), c("div", dt, [
+      e("div", ct, [
+        e("div", mt, [
+          e("div", pt, [
+            f[0] || (f[0] = e("span", { class: "notification-badge" }, null, -1)),
+            e("span", vt, n(_.app), 1),
+            f[1] || (f[1] = e("span", null, null, -1))
+          ]),
+          e("div", ft, [
+            e("span", gt, n(_.title), 1),
+            e("span", _t, n(_.message), 1)
+          ])
+        ])
+      ])
+    ]));
+  }
+}), ht = /* @__PURE__ */ ye(xt, [["__scopeId", "data-v-202b94a8"]]), yt = { class: "flex flex-col" }, bt = /* @__PURE__ */ U({
+  __name: "PushPreview",
+  props: {
+    app: {
+      type: String,
+      required: !0
+    },
+    title: {
+      type: String,
+      required: !0
+    },
+    message: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(_) {
+    const y = _, f = te("ios"), q = o(() => y.title.length > 0 ? y.title : "Notification Preview"), E = o(() => y.message.length > 0 ? y.message : "Preview your push notification");
+    return (F, b) => {
+      const p = d("SegmentedControlButton"), k = d("SegmentedControl");
+      return l(), c("div", yt, [
+        a(k, {
+          modelValue: v(f),
+          "onUpdate:modelValue": b[0] || (b[0] = (C) => Oe(f) ? f.value = C : null),
+          class: "mx-auto mb-3"
+        }, {
+          default: i(() => [
+            a(p, { value: "ios" }, {
+              default: i(() => [...b[1] || (b[1] = [
+                u(" iOS ", -1)
+              ])]),
+              _: 1
+            }),
+            a(p, { value: "android" }, {
+              default: i(() => [...b[2] || (b[2] = [
+                u(" Android ", -1)
+              ])]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["modelValue"]),
+        v(f) == "ios" ? (l(), w(ut, {
+          key: 0,
+          app: _.app,
+          title: v(q),
+          message: v(E)
+        }, null, 8, ["app", "title", "message"])) : (l(), w(ht, {
+          key: 1,
+          app: _.app,
+          title: v(q),
+          message: v(E)
+        }, null, 8, ["app", "title", "message"]))
+      ]);
+    };
+  }
+}), kt = { class: "@container/push w-full" }, wt = { class: "mx-auto flex w-full max-w-7xl flex-col gap-6 py-8" }, Ct = { class: "flex flex-col gap-4 @lg/push:flex-row @lg/push:items-center @lg/push:justify-between" }, Lt = { class: "flex items-center gap-4" }, $t = { class: "flex size-11 shrink-0 items-center justify-center rounded-xl border border-primary/15 bg-primary/10 text-primary" }, St = { class: "grid min-w-0 items-start gap-6 @5xl/push:grid-cols-[minmax(24rem,1fr)_30.25rem]" }, Pt = { class: "flex flex-col flex-wrap gap-3 @md/editor:flex-row @md/editor:items-center @md/editor:justify-between" }, Dt = { class: "pt-6" }, Nt = {
+  class: "flex w-fit flex-wrap items-center gap-x-2 gap-y-1 rounded-full border bg-background px-3 py-1.5 text-xs text-muted-foreground",
+  "aria-live": "polite"
+}, It = { key: 0 }, Tt = { key: 1 }, zt = { class: "space-y-2.5" }, qt = { class: "flex items-end justify-between gap-4" }, Et = { class: "flex min-w-0 items-center gap-3 text-left" }, Bt = { class: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-lg" }, jt = { class: "min-w-0" }, Vt = { class: "flex items-center gap-2" }, At = { class: "truncate text-sm font-medium" }, Mt = {
+  key: 0,
+  class: "rounded bg-muted px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-muted-foreground"
+}, Ut = {
+  class: "mt-0.5 block truncate text-xs text-muted-foreground",
+  dir: "auto"
+}, Ft = { class: "uppercase" }, Ot = { class: "flex shrink-0 items-center gap-2" }, Rt = { class: "text-base leading-none" }, Gt = { class: "min-w-0 flex-1" }, Yt = { class: "block truncate text-sm font-medium" }, Ht = {
+  class: "block truncate text-xs text-muted-foreground",
+  dir: "auto"
+}, Wt = { class: "uppercase" }, Jt = { class: "text-base leading-none" }, Kt = { class: "min-w-0 flex-1" }, Qt = { class: "block truncate text-sm font-medium" }, Xt = {
+  class: "block truncate text-xs text-muted-foreground",
+  dir: "auto"
+}, Zt = { class: "uppercase" }, es = ["id"], ts = { class: "flex flex-col gap-3 @md/editor:flex-row @md/editor:items-center @md/editor:justify-between" }, ss = { class: "mt-0.5 text-xs text-muted-foreground" }, as = { class: "truncate" }, ns = { class: "space-y-2" }, os = { class: "flex items-center justify-between gap-4" }, ls = {
+  key: 0,
+  class: "text-xs text-amber-600 dark:text-amber-400"
+}, is = { class: "space-y-2" }, rs = { class: "flex items-center justify-between gap-4" }, us = {
+  key: 0,
+  class: "text-xs text-amber-600 dark:text-amber-400"
+}, ds = {
+  key: 0,
+  class: "flex items-start gap-2 text-xs leading-relaxed text-muted-foreground"
+}, cs = {
+  key: 1,
+  class: "flex items-start gap-3 rounded-lg border border-amber-500/30 bg-amber-500/10 p-3"
+}, ms = { class: "text-xs leading-relaxed text-amber-800 dark:text-amber-200" }, ps = {
+  key: 2,
+  class: "flex items-start gap-2 text-xs leading-relaxed text-muted-foreground"
+}, vs = { class: "flex items-start gap-2 text-xs text-muted-foreground" }, fs = { key: 0 }, gs = { key: 1 }, _s = { class: "flex flex-col pt-6" }, xs = {
+  class: "overflow-x-auto px-3",
+  "aria-label": "Notification device preview"
+}, hs = { class: "mx-auto w-max min-w-[450px]" }, Z = 60, ee = 160, $s = /* @__PURE__ */ U({
+  __name: "SendPush",
+  props: {
+    config: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(_) {
+    const y = _;
+    Qe(() => []);
+    const { hasPermission: f } = Xe(), q = { title: "", message: "" }, E = new Map(
+      Ze.map((t) => [t.code.toLowerCase(), t])
+    ), F = (t) => typeof t != "string" ? "" : t.trim().toLowerCase(), b = o(() => {
+      const t = y.config.supportedLanguages;
+      return (Array.isArray(t) ? t : typeof t == "string" ? [t] : []).map(F).filter((M) => !!M);
+    }), p = o(() => F(y.config.defaultLanguage) || b.value[0] || "en"), k = o(() => Array.from(
+      /* @__PURE__ */ new Set([p.value, ...b.value])
+    )), C = Re({}), r = te(p.value), B = te(!1);
+    ge(
+      k,
+      (t) => {
+        t.forEach((s) => {
+          C[s] ??= { title: "", message: "" };
+        }), t.includes(r.value) || (r.value = p.value);
+      },
+      { immediate: !0 }
+    ), ge(p, (t) => {
+      k.value.includes(r.value) || (r.value = t);
+    });
+    const O = (t) => E.get(t) ?? {
+      code: t,
+      name: t.toUpperCase(),
+      nativeName: t.toUpperCase(),
+      flag: "🌐"
+    }, j = (t) => C[t] ?? q, N = (t) => !!j(t).title.trim(), I = (t) => !!j(t).message.trim(), R = (t) => N(t) && I(t), G = (t) => N(t) !== I(t), V = (t) => R(t) ? "ready" : G(t) ? "incomplete" : t === p.value ? "required" : "fallback", be = {
+      ready: "Translated",
+      incomplete: "Incomplete",
+      required: "Required",
+      fallback: "Fallback"
+    }, se = (t) => {
+      const s = V(t);
+      return t === p.value && s === "ready" ? "Ready" : be[s];
+    }, ae = {
+      ready: "bg-emerald-500/10 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300",
+      incomplete: "bg-amber-500/10 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300",
+      required: "bg-primary/10 text-primary",
+      fallback: "bg-muted text-muted-foreground"
+    }, A = o(() => k.value.map((t) => {
+      const s = V(t);
+      return {
+        ...O(t),
+        isDefault: t === p.value,
+        status: s,
+        statusLabel: se(t),
+        statusClass: ae[s]
+      };
+    })), x = o(
+      () => A.value.find((t) => t.isDefault)
+    ), Y = o(
+      () => A.value.filter((t) => !t.isDefault)
+    ), h = o(() => O(r.value)), S = o(
+      () => O(p.value)
+    ), H = o(() => j(r.value)), W = o(() => j(p.value)), T = o({
+      get: () => H.value.title,
+      set: (t) => {
+        C[r.value].title = t;
+      }
+    }), z = o({
+      get: () => H.value.message,
+      set: (t) => {
+        C[r.value].message = t;
+      }
+    }), P = o(
+      () => r.value === p.value
+    ), ne = o(
+      () => !N(r.value) && !I(r.value)
+    ), ke = o(() => G(r.value)), we = o(
+      () => N(r.value) || I(r.value)
+    ), J = o(() => R(p.value)), oe = o(
+      () => !P.value && ne.value
+    ), le = o(
+      () => oe.value ? W.value : H.value
+    ), D = o(
+      () => k.value.filter(
+        (t) => G(t)
+      ).length
+    ), ie = o(
+      () => k.value.filter(
+        (t) => t !== p.value && R(t)
+      ).length
+    ), Ce = o(
+      () => Math.max(k.value.length - 1, 0)
+    ), Le = o(
+      () => k.value.filter(
+        (t) => t !== p.value && V(t) === "fallback"
+      ).length
+    ), $e = o(
+      () => V(r.value)
+    ), Se = o(
+      () => se(r.value)
+    ), Pe = o(
+      () => ae[$e.value]
+    ), re = o(
+      () => !P.value && J.value
+    ), De = o(() => we.value ? `Replace with ${S.value.name}` : `Use ${S.value.name} as a starting point`), Ne = o(
+      () => J.value && D.value === 0 && f("send-push")
+    ), K = o(() => f("send-push") ? J.value ? D.value > 0 ? `Finish ${D.value} incomplete ${D.value === 1 ? "translation" : "translations"}.` : "" : `Add a ${[
+      N(p.value) ? "" : "title",
+      I(p.value) ? "" : "message"
+    ].filter(Boolean).join(" and ")} in ${S.value.name}.` : "You do not have permission to send push notifications."), Ie = () => {
+      re.value && (C[r.value].title = W.value.title, C[r.value].message = W.value.message);
+    }, ue = (t) => {
+      r.value = t, B.value = !1;
+    };
+    return (t, s) => {
+      const M = d("CardTitle"), de = d("CardDescription"), ce = d("CardHeader"), Q = d("Label"), X = d("Button"), Te = d("PopoverTrigger"), ze = d("CommandInput"), qe = d("CommandEmpty"), me = d("CommandItem"), pe = d("CommandGroup"), Ee = d("CommandSeparator"), Be = d("CommandList"), je = d("Command"), Ve = d("PopoverContent"), Ae = d("Popover"), Me = d("Input"), Ue = d("Textarea"), ve = d("CardContent"), Fe = d("CardFooter"), fe = d("Card");
+      return l(), c("div", kt, [
+        e("div", wt, [
+          e("header", Ct, [
+            e("div", Lt, [
+              e("div", $t, [
+                a(v(Ye), { class: "size-5" })
+              ]),
+              s[4] || (s[4] = e("div", null, [
+                e("h1", { class: "text-2xl font-semibold tracking-tight" }, " Send notification ")
+              ], -1))
+            ])
+          ]),
+          e("main", St, [
+            a(fe, { class: "@container/editor min-w-0 overflow-hidden py-0" }, {
+              default: i(() => [
+                a(ce, { class: "border-b bg-muted/20" }, {
+                  default: i(() => [
+                    e("div", Pt, [
+                      e("div", Dt, [
+                        a(M, { class: "text-base" }, {
+                          default: i(() => [...s[5] || (s[5] = [
+                            u("Notification content", -1)
+                          ])]),
+                          _: 1
+                        }),
+                        a(de, { class: "mt-1" }, {
+                          default: i(() => [...s[6] || (s[6] = [
+                            u(" Create the default message, then add translations where needed. ", -1)
+                          ])]),
+                          _: 1
+                        })
+                      ]),
+                      e("div", Nt, [
+                        a(v(_e), { class: "size-3.5" }),
+                        Ce.value > 0 ? (l(), c("span", It, [
+                          u(n(ie.value) + " translated ", 1),
+                          s[8] || (s[8] = e("span", { "aria-hidden": "true" }, "·", -1)),
+                          u(" " + n(Le.value) + " fallback ", 1),
+                          D.value > 0 ? (l(), c(L, { key: 0 }, [
+                            s[7] || (s[7] = e("span", { "aria-hidden": "true" }, "·", -1)),
+                            u(" " + n(D.value) + " incomplete ", 1)
+                          ], 64)) : g("", !0)
+                        ])) : (l(), c("span", Tt, "Default copy only"))
+                      ])
+                    ])
+                  ]),
+                  _: 1
+                }),
+                a(ve, { class: "space-y-6 px-5 @md/editor:px-6" }, {
+                  default: i(() => [
+                    e("section", zt, [
+                      e("div", qt, [
+                        e("div", null, [
+                          a(Q, { class: "text-sm font-medium" }, {
+                            default: i(() => [...s[9] || (s[9] = [
+                              u("Language", -1)
+                            ])]),
+                            _: 1
+                          }),
+                          s[10] || (s[10] = e("p", { class: "mt-0.5 text-xs text-muted-foreground" }, " Choose the version you want to edit. ", -1))
+                        ]),
+                        s[11] || (s[11] = e("span", { class: "hidden text-xs text-muted-foreground @sm/editor:inline" }, " Drafts are kept when you switch ", -1))
+                      ]),
+                      a(Ae, {
+                        open: B.value,
+                        "onUpdate:open": s[1] || (s[1] = (m) => B.value = m)
+                      }, {
+                        default: i(() => [
+                          a(Te, { "as-child": "" }, {
+                            default: i(() => [
+                              a(X, {
+                                type: "button",
+                                variant: "outline",
+                                role: "combobox",
+                                "aria-expanded": B.value,
+                                "aria-label": "Choose notification language",
+                                class: "h-auto w-full justify-between gap-3 rounded-xl px-3 py-2.5 font-normal hover:bg-muted/40"
+                              }, {
+                                default: i(() => [
+                                  e("span", Et, [
+                                    e("span", Bt, n(h.value.flag), 1),
+                                    e("span", jt, [
+                                      e("span", Vt, [
+                                        e("span", At, n(h.value.name), 1),
+                                        P.value ? (l(), c("span", Mt, " Default ")) : g("", !0)
+                                      ]),
+                                      e("span", Ut, [
+                                        h.value.nativeName !== h.value.name ? (l(), c(L, { key: 0 }, [
+                                          u(n(h.value.nativeName) + " ", 1),
+                                          s[12] || (s[12] = e("span", { "aria-hidden": "true" }, " · ", -1))
+                                        ], 64)) : g("", !0),
+                                        e("span", Ft, n(r.value), 1)
+                                      ])
+                                    ])
+                                  ]),
+                                  e("span", Ot, [
+                                    e("span", {
+                                      class: $(["rounded-full px-2 py-1 text-[10px] font-medium", Pe.value])
+                                    }, n(Se.value), 3),
+                                    A.value.length > 1 ? (l(), w(v(He), {
+                                      key: 0,
+                                      class: "size-4 text-muted-foreground"
+                                    })) : g("", !0)
+                                  ])
+                                ]),
+                                _: 1
+                              }, 8, ["aria-expanded"])
+                            ]),
+                            _: 1
+                          }),
+                          a(Ve, {
+                            align: "start",
+                            side: "bottom",
+                            "side-offset": 6,
+                            class: "w-[var(--reka-popover-trigger-width)] min-w-72 max-w-[calc(100vw-2rem)] p-0"
+                          }, {
+                            default: i(() => [
+                              a(je, null, {
+                                default: i(() => [
+                                  A.value.length > 5 ? (l(), w(ze, {
+                                    key: 0,
+                                    placeholder: "Search languages..."
+                                  })) : g("", !0),
+                                  a(Be, { class: "max-h-80" }, {
+                                    default: i(() => [
+                                      a(qe, null, {
+                                        default: i(() => [...s[13] || (s[13] = [
+                                          u("No language found.", -1)
+                                        ])]),
+                                        _: 1
+                                      }),
+                                      x.value ? (l(), w(pe, {
+                                        key: 0,
+                                        heading: "Default language"
+                                      }, {
+                                        default: i(() => [
+                                          a(me, {
+                                            value: `${x.value.name} ${x.value.nativeName} ${x.value.code}`,
+                                            class: "gap-3 py-2.5",
+                                            onSelect: s[0] || (s[0] = (m) => ue(x.value.code))
+                                          }, {
+                                            default: i(() => [
+                                              e("span", Rt, n(x.value.flag), 1),
+                                              e("span", Gt, [
+                                                e("span", Yt, n(x.value.name), 1),
+                                                e("span", Ht, [
+                                                  x.value.nativeName !== x.value.name ? (l(), c(L, { key: 0 }, [
+                                                    u(n(x.value.nativeName) + " ", 1),
+                                                    s[14] || (s[14] = e("span", { "aria-hidden": "true" }, " · ", -1))
+                                                  ], 64)) : g("", !0),
+                                                  e("span", Wt, n(x.value.code), 1)
+                                                ])
+                                              ]),
+                                              e("span", {
+                                                class: $(["rounded-full px-2 py-1 text-[10px] font-medium", x.value.statusClass])
+                                              }, n(x.value.statusLabel), 3),
+                                              a(v(xe), {
+                                                class: $([
+                                                  "size-4 shrink-0 text-primary",
+                                                  r.value === x.value.code ? "opacity-100" : "opacity-0"
+                                                ])
+                                              }, null, 8, ["class"])
+                                            ]),
+                                            _: 1
+                                          }, 8, ["value"])
+                                        ]),
+                                        _: 1
+                                      })) : g("", !0),
+                                      Y.value.length > 0 ? (l(), w(Ee, { key: 1 })) : g("", !0),
+                                      Y.value.length > 0 ? (l(), w(pe, {
+                                        key: 2,
+                                        heading: `Translations · ${ie.value} translated`
+                                      }, {
+                                        default: i(() => [
+                                          (l(!0), c(L, null, Ge(Y.value, (m) => (l(), w(me, {
+                                            key: m.code,
+                                            value: `${m.name} ${m.nativeName} ${m.code}`,
+                                            class: "gap-3 py-2.5",
+                                            onSelect: (ys) => ue(m.code)
+                                          }, {
+                                            default: i(() => [
+                                              e("span", Jt, n(m.flag), 1),
+                                              e("span", Kt, [
+                                                e("span", Qt, n(m.name), 1),
+                                                e("span", Xt, [
+                                                  m.nativeName !== m.name ? (l(), c(L, { key: 0 }, [
+                                                    u(n(m.nativeName) + " ", 1),
+                                                    s[15] || (s[15] = e("span", { "aria-hidden": "true" }, " · ", -1))
+                                                  ], 64)) : g("", !0),
+                                                  e("span", Zt, n(m.code), 1)
+                                                ])
+                                              ]),
+                                              e("span", {
+                                                class: $(["rounded-full px-2 py-1 text-[10px] font-medium", m.statusClass])
+                                              }, n(m.statusLabel), 3),
+                                              a(v(xe), {
+                                                class: $([
+                                                  "size-4 shrink-0 text-primary",
+                                                  r.value === m.code ? "opacity-100" : "opacity-0"
+                                                ])
+                                              }, null, 8, ["class"])
+                                            ]),
+                                            _: 2
+                                          }, 1032, ["value", "onSelect"]))), 128))
+                                        ]),
+                                        _: 1
+                                      }, 8, ["heading"])) : g("", !0)
+                                    ]),
+                                    _: 1
+                                  })
+                                ]),
+                                _: 1
+                              })
+                            ]),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      }, 8, ["open"])
+                    ]),
+                    e("section", {
+                      id: `notification-panel-${r.value}`,
+                      class: "space-y-6"
+                    }, [
+                      e("div", ts, [
+                        e("div", null, [
+                          s[17] || (s[17] = e("h2", { class: "text-sm font-semibold" }, "Message copy", -1)),
+                          e("p", ss, [
+                            u(" Editing " + n(h.value.name) + " ", 1),
+                            P.value ? (l(), c(L, { key: 0 }, [
+                              u(" fallback")
+                            ], 64)) : g("", !0),
+                            s[16] || (s[16] = u(" content. ", -1))
+                          ])
+                        ]),
+                        !P.value && re.value ? (l(), w(X, {
+                          key: 0,
+                          type: "button",
+                          variant: "outline",
+                          size: "sm",
+                          class: "w-fit max-w-full justify-start",
+                          onClick: Ie
+                        }, {
+                          default: i(() => [
+                            a(v(We), { class: "size-3.5" }),
+                            e("span", as, n(De.value), 1)
+                          ]),
+                          _: 1
+                        })) : g("", !0)
+                      ]),
+                      e("div", ns, [
+                        e("div", os, [
+                          a(Q, {
+                            for: `send_push_title_${r.value}`,
+                            class: "text-sm font-medium"
+                          }, {
+                            default: i(() => [...s[18] || (s[18] = [
+                              u(" Title ", -1)
+                            ])]),
+                            _: 1
+                          }, 8, ["for"]),
+                          e("span", {
+                            class: $([
+                              "text-xs tabular-nums",
+                              T.value.length > Z ? "text-amber-600 dark:text-amber-400" : "text-muted-foreground"
+                            ])
+                          }, [
+                            u(n(T.value.length) + "/" + n(Z) + " ", 1),
+                            s[19] || (s[19] = e("span", { class: "hidden @lg/editor:inline" }, "recommended", -1))
+                          ], 2)
+                        ]),
+                        a(Me, {
+                          id: `send_push_title_${r.value}`,
+                          modelValue: T.value,
+                          "onUpdate:modelValue": s[2] || (s[2] = (m) => T.value = m),
+                          type: "text",
+                          lang: r.value,
+                          dir: "auto",
+                          placeholder: `Add a title in ${h.value.name}`,
+                          autocomplete: "off",
+                          class: "h-11"
+                        }, null, 8, ["id", "modelValue", "lang", "placeholder"]),
+                        T.value.length > Z ? (l(), c("p", ls, " Longer titles may be shortened on some devices. ")) : g("", !0)
+                      ]),
+                      e("div", is, [
+                        e("div", rs, [
+                          a(Q, {
+                            for: `send_push_message_${r.value}`,
+                            class: "text-sm font-medium"
+                          }, {
+                            default: i(() => [...s[20] || (s[20] = [
+                              u(" Message ", -1)
+                            ])]),
+                            _: 1
+                          }, 8, ["for"]),
+                          e("span", {
+                            class: $([
+                              "text-xs tabular-nums",
+                              z.value.length > ee ? "text-amber-600 dark:text-amber-400" : "text-muted-foreground"
+                            ])
+                          }, [
+                            u(n(z.value.length) + "/" + n(ee) + " ", 1),
+                            s[21] || (s[21] = e("span", { class: "hidden @lg/editor:inline" }, "recommended", -1))
+                          ], 2)
+                        ]),
+                        a(Ue, {
+                          id: `send_push_message_${r.value}`,
+                          modelValue: z.value,
+                          "onUpdate:modelValue": s[3] || (s[3] = (m) => z.value = m),
+                          lang: r.value,
+                          dir: "auto",
+                          placeholder: `Write the notification message in ${h.value.name}`,
+                          class: "min-h-36 resize-y"
+                        }, null, 8, ["id", "modelValue", "lang", "placeholder"]),
+                        z.value.length > ee ? (l(), c("p", us, " Longer messages may be truncated in the notification tray. ")) : g("", !0)
+                      ]),
+                      P.value ? (l(), c("div", ds, [
+                        a(v(Je), { class: "mt-0.5 size-3.5 shrink-0 text-primary" }),
+                        s[22] || (s[22] = e("p", null, " Required fallback for languages without their own translation. ", -1))
+                      ])) : ke.value ? (l(), c("div", cs, [
+                        a(v(he), { class: "mt-0.5 size-4 shrink-0 text-amber-600 dark:text-amber-400" }),
+                        e("p", ms, " Complete both fields, or clear this translation to use " + n(S.value.name) + " as the fallback. ", 1)
+                      ])) : ne.value ? (l(), c("div", ps, [
+                        a(v(_e), { class: "mt-0.5 size-3.5 shrink-0" }),
+                        e("p", null, " No " + n(h.value.name) + " translation — recipients will see the " + n(S.value.name) + " fallback. ", 1)
+                      ])) : g("", !0)
+                    ], 8, es)
+                  ]),
+                  _: 1
+                }),
+                a(Fe, { class: "flex flex-col gap-4 border-t bg-muted/20 px-5 py-4 @md/editor:flex-row @md/editor:items-center @md/editor:justify-between @md/editor:px-6" }, {
+                  default: i(() => [
+                    e("div", vs, [
+                      a(v(he), { class: "mt-0.5 size-3.5 shrink-0" }),
+                      K.value ? (l(), c("span", fs, n(K.value), 1)) : (l(), c("span", gs, " Review the live preview before sending. Delivery cannot be undone. "))
+                    ]),
+                    a(X, {
+                      class: "w-full shrink-0 @md/editor:w-auto",
+                      disabled: !Ne.value,
+                      title: K.value
+                    }, {
+                      default: i(() => [
+                        a(v(Ke), { class: "size-4" }),
+                        s[23] || (s[23] = u(" Send notification ", -1))
+                      ]),
+                      _: 1
+                    }, 8, ["disabled", "title"])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            a(fe, { class: "min-w-0 overflow-hidden @4xl/push:sticky @4xl/push:top-6 py-0" }, {
+              default: i(() => [
+                a(ce, { class: "border-b bg-muted/20" }, {
+                  default: i(() => [
+                    e("div", _s, [
+                      a(M, { class: "text-base" }, {
+                        default: i(() => [...s[24] || (s[24] = [
+                          u("Live preview", -1)
+                        ])]),
+                        _: 1
+                      }),
+                      a(de, { class: "mt-0.5 mb-0" }, {
+                        default: i(() => [
+                          oe.value ? (l(), c(L, { key: 0 }, [
+                            u(" Previewing " + n(S.value.name) + " fallback for " + n(h.value.name), 1)
+                          ], 64)) : (l(), c(L, { key: 1 }, [
+                            u(n(h.value.flag) + " " + n(h.value.name) + " notification ", 1)
+                          ], 64))
+                        ]),
+                        _: 1
+                      })
+                    ])
+                  ]),
+                  _: 1
+                }),
+                a(ve, { class: "p-0" }, {
+                  default: i(() => [
+                    e("div", xs, [
+                      e("div", hs, [
+                        a(bt, {
+                          app: _.config.appName || "Your app",
+                          title: le.value.title,
+                          message: le.value.message
+                        }, null, 8, ["app", "title", "message"])
+                      ])
+                    ])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  $s as default
+};