@voyantjs/notifications-react 0.106.0 → 0.108.0

package/dist/admin/notification-template-dialog.js

@@ -0,0 +1,364 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { formatMessage } from "@voyantjs/i18n";
+import { Button, Checkbox, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, ScrollArea, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, } from "@voyantjs/ui/components";
+import { RichTextEditor } from "@voyantjs/ui/components/rich-text-editor";
+import { insertPlainText, insertVariableToken, } from "@voyantjs/ui/components/rich-text-variable-extension";
+import { zodResolver } from "@voyantjs/ui/lib/zod-resolver";
+import { Loader2 } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod/v4";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+import { useNotificationTemplateAuthoring, useNotificationTemplateMutation, useNotificationTemplateTools, } from "../index.js";
+import { NotificationTemplateAuthoringHelp } from "./notification-template-authoring-help.js";
+const CHANNEL_VALUES = ["email", "sms"];
+const STATUS_VALUES = ["draft", "active", "archived"];
+const ATTACHMENT_VALUES = ["contract", "invoice", "brochure"];
+const channelItemLabel = (t, value) => (value === "email" ? t.channelEmail : t.channelSms);
+const statusItemLabel = (t, value) => (value === "draft" ? t.statusDraft : value === "active" ? t.statusActive : t.statusArchived);
+const attachmentItemLabel = (t, value) => value === "contract"
+    ? t.attachmentContract
+    : value === "invoice"
+        ? t.attachmentInvoice
+        : t.attachmentBrochure;
+const nativeSelectClassName = "h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30";
+const templateAttachmentSchema = z.enum(["contract", "invoice", "brochure"]);
+const templateFormSchema = z.object({
+    name: z.string().min(1, "Name is required"),
+    slug: z
+        .string()
+        .min(1, "Slug is required")
+        .regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/, "Must be kebab-case"),
+    channel: z.enum(["email", "sms"]),
+    status: z.enum(["draft", "active", "archived"]).default("draft"),
+    subjectTemplate: z.string().optional(),
+    htmlTemplate: z.string().optional(),
+    textTemplate: z.string().optional(),
+    fromAddress: z.string().optional(),
+    attachments: z.array(templateAttachmentSchema).default([]),
+    active: z.boolean(),
+});
+function parsePath(path) {
+    return path
+        .replace(/\[(\d+)\]/g, ".$1")
+        .split(".")
+        .filter(Boolean);
+}
+function setDeepValue(target, path, value) {
+    const segments = parsePath(path);
+    let current = target;
+    for (let index = 0; index < segments.length; index += 1) {
+        const segment = segments[index];
+        const isLast = index === segments.length - 1;
+        const nextSegment = segments[index + 1];
+        const nextIsIndex = nextSegment ? /^\d+$/.test(nextSegment) : false;
+        if (Array.isArray(current)) {
+            const arrayIndex = Number(segment);
+            if (Number.isNaN(arrayIndex))
+                return;
+            if (isLast) {
+                current[arrayIndex] = value;
+                return;
+            }
+            if (current[arrayIndex] == null) {
+                current[arrayIndex] = nextIsIndex ? [] : {};
+            }
+            current = current[arrayIndex];
+            continue;
+        }
+        if (typeof current !== "object" || current == null)
+            return;
+        const record = current;
+        if (isLast) {
+            record[segment] = value;
+            return;
+        }
+        if (record[segment] == null) {
+            record[segment] = nextIsIndex ? [] : {};
+        }
+        current = record[segment];
+    }
+}
+function buildSamplePayload(variableGroups) {
+    const sample = {};
+    for (const group of variableGroups) {
+        for (const variable of group.variables) {
+            setDeepValue(sample, variable.key, variable.example);
+        }
+    }
+    return sample;
+}
+function appendTemplateValue(current, addition) {
+    if (!current?.trim())
+        return addition;
+    return `${current}${current.endsWith("\n") ? "" : "\n"}${addition}`;
+}
+function variableReference(key) {
+    return `{{ ${key} }}`;
+}
+function getMetadataRecord(value) {
+    if (!value || typeof value !== "object" || Array.isArray(value)) {
+        return null;
+    }
+    return value;
+}
+function readTemplateAttachments(metadata) {
+    const record = getMetadataRecord(metadata);
+    const value = record?.attachments;
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    const allowed = new Set(ATTACHMENT_VALUES);
+    return ATTACHMENT_VALUES.filter((attachment) => allowed.has(attachment) && value.includes(attachment));
+}
+function buildTemplateMetadata(metadata, attachments) {
+    const current = getMetadataRecord(metadata);
+    const next = current ? { ...current } : {};
+    if (attachments.length > 0) {
+        next.attachments = [...attachments];
+    }
+    else {
+        delete next.attachments;
+    }
+    return Object.keys(next).length > 0 ? next : null;
+}
+export function NotificationTemplateDialog(props) {
+    if (!props.open) {
+        return null;
+    }
+    return _jsx(NotificationTemplateDialogInner, { ...props });
+}
+function NotificationTemplateDialogInner({ open, onOpenChange, template, onSuccess, }) {
+    const isEditing = Boolean(template);
+    const messages = useNotificationsUiMessagesOrDefault();
+    const t = messages.admin.templateDialog;
+    const common = messages.admin.common;
+    const { create, update } = useNotificationTemplateMutation();
+    const { preview, testSend } = useNotificationTemplateTools();
+    const previewResetRef = useRef(preview.reset);
+    const testSendResetRef = useRef(testSend.reset);
+    const { variableCatalog, liquidSnippets } = useNotificationTemplateAuthoring();
+    const [editorInstance, setEditorInstance] = useState(null);
+    const [insertionTarget, setInsertionTarget] = useState("body");
+    const [previewDataInput, setPreviewDataInput] = useState("{}");
+    const [testRecipient, setTestRecipient] = useState("");
+    const variableGroups = useMemo(() => variableCatalog.map((group) => ({
+        ...group,
+        variables: group.variables.map((variable) => ({
+            ...variable,
+            example: String(variable.example),
+        })),
+    })), [variableCatalog]);
+    const defaultPreviewData = useMemo(() => JSON.stringify(buildSamplePayload(variableGroups), null, 2), [variableGroups]);
+    const form = useForm({
+        resolver: zodResolver(templateFormSchema),
+        defaultValues: {
+            name: "",
+            slug: "",
+            channel: "email",
+            status: "draft",
+            subjectTemplate: "",
+            htmlTemplate: "",
+            textTemplate: "",
+            fromAddress: "",
+            attachments: [],
+            active: true,
+        },
+    });
+    const channel = form.watch("channel");
+    const attachments = form.watch("attachments") ?? [];
+    previewResetRef.current = preview.reset;
+    testSendResetRef.current = testSend.reset;
+    useEffect(() => {
+        if (open && template) {
+            form.reset({
+                name: template.name,
+                slug: template.slug,
+                channel: template.channel,
+                status: template.status,
+                subjectTemplate: template.subjectTemplate ?? "",
+                htmlTemplate: template.htmlTemplate ?? "",
+                textTemplate: template.textTemplate ?? "",
+                fromAddress: template.fromAddress ?? "",
+                attachments: template.channel === "email" ? readTemplateAttachments(template.metadata) : [],
+                active: template.status === "active",
+            });
+            return;
+        }
+        if (open) {
+            form.reset();
+        }
+    }, [open, template, form]);
+    useEffect(() => {
+        if (!open)
+            return;
+        setInsertionTarget((current) => {
+            const next = channel === "sms" ? "text" : current === "text" ? "body" : current;
+            return next === current ? current : next;
+        });
+    }, [channel, open]);
+    useEffect(() => {
+        if (!open || channel === "email" || (form.getValues("attachments") ?? []).length === 0)
+            return;
+        form.setValue("attachments", [], {
+            shouldDirty: true,
+            shouldTouch: true,
+            shouldValidate: true,
+        });
+    }, [channel, form, open]);
+    useEffect(() => {
+        if (!open)
+            return;
+        setPreviewDataInput(defaultPreviewData);
+        setTestRecipient("");
+        previewResetRef.current();
+        testSendResetRef.current();
+    }, [defaultPreviewData, open]);
+    const onSubmit = async (values) => {
+        const payload = {
+            name: values.name,
+            slug: values.slug,
+            channel: values.channel,
+            provider: null,
+            status: values.active ? (values.status === "archived" ? "active" : values.status) : "draft",
+            subjectTemplate: values.channel === "email" ? values.subjectTemplate || null : null,
+            htmlTemplate: values.channel === "email" ? values.htmlTemplate || null : null,
+            textTemplate: values.channel === "sms" ? values.textTemplate || null : null,
+            fromAddress: values.channel === "email" ? values.fromAddress || null : null,
+            isSystem: template?.isSystem ?? false,
+            metadata: values.channel === "email"
+                ? buildTemplateMetadata(template?.metadata, values.attachments)
+                : buildTemplateMetadata(template?.metadata, []),
+        };
+        if (isEditing && template) {
+            await update.mutateAsync({ id: template.id, input: payload });
+        }
+        else {
+            await create.mutateAsync(payload);
+        }
+        onSuccess();
+    };
+    const isPending = create.isPending || update.isPending;
+    const parsePreviewData = () => {
+        try {
+            const parsed = previewDataInput.trim() ? JSON.parse(previewDataInput) : {};
+            if (typeof parsed !== "object" || parsed == null || Array.isArray(parsed)) {
+                throw new Error(common.previewDataNotObject);
+            }
+            return parsed;
+        }
+        catch (error) {
+            throw new Error(error instanceof Error ? error.message : common.previewInvalidJson);
+        }
+    };
+    const insertIntoTarget = (content, kind) => {
+        if (insertionTarget === "body" && channel === "email" && editorInstance) {
+            if (kind === "variable") {
+                insertVariableToken(editorInstance, content);
+            }
+            else {
+                insertPlainText(editorInstance, content);
+            }
+            return;
+        }
+        const fieldName = insertionTarget === "subject" ? "subjectTemplate" : "textTemplate";
+        const current = form.getValues(fieldName) ?? "";
+        const nextValue = kind === "variable"
+            ? // i18n-literal-ok single-space joiner between Liquid tokens, not user-facing copy.
+                `${current}${current ? " " : ""}${variableReference(content)}`
+            : appendTemplateValue(current, content);
+        form.setValue(fieldName, nextValue, {
+            shouldDirty: true,
+            shouldTouch: true,
+            shouldValidate: true,
+        });
+    };
+    const handlePreview = async () => {
+        try {
+            const data = parsePreviewData();
+            await preview.mutateAsync({
+                channel,
+                provider: null,
+                fromAddress: channel === "email" ? form.getValues("fromAddress") || null : null,
+                subjectTemplate: channel === "email" ? form.getValues("subjectTemplate") || null : null,
+                htmlTemplate: channel === "email" ? form.getValues("htmlTemplate") || null : null,
+                textTemplate: channel === "sms" ? form.getValues("textTemplate") || null : null,
+                data,
+            });
+        }
+        catch (error) {
+            toast.error(error instanceof Error ? error.message : common.previewFailed);
+        }
+    };
+    const handleTestSend = async () => {
+        if (!testRecipient.trim()) {
+            toast.error(channel === "email" ? t.recipientEmailRequired : t.recipientPhoneRequired);
+            return;
+        }
+        try {
+            const data = parsePreviewData();
+            await testSend.mutateAsync({
+                to: testRecipient.trim(),
+                channel,
+                provider: null,
+                from: channel === "email" ? form.getValues("fromAddress") || null : null,
+                subject: channel === "email" ? form.getValues("subjectTemplate") || null : null,
+                html: channel === "email" ? form.getValues("htmlTemplate") || null : null,
+                text: channel === "sms" ? form.getValues("textTemplate") || null : null,
+                data,
+                targetType: "other",
+            });
+            toast.success(channel === "email" ? t.testQueuedEmail : t.testQueuedSms);
+        }
+        catch (error) {
+            toast.error(error instanceof Error ? error.message : t.testSendFailed);
+        }
+    };
+    const setAttachmentSelected = (attachment, checked) => {
+        const current = form.getValues("attachments") ?? [];
+        const next = checked
+            ? [...current, attachment].filter((value, index, values) => values.indexOf(value) === index)
+            : current.filter((value) => value !== attachment);
+        form.setValue("attachments", next, {
+            shouldDirty: true,
+            shouldTouch: true,
+            shouldValidate: true,
+        });
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsx(DialogContent, { size: "xl", className: "h-[calc(100vh-2rem)]", children: _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "grid min-h-0 flex-1 grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? t.editTitle : t.createTitle }) }), _jsx(ScrollArea, { className: "min-h-0 flex-1", children: _jsxs("div", { className: "grid gap-4 py-4 pr-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.nameLabel }), _jsx(Input, { ...form.register("name"), placeholder: t.namePlaceholder }), form.formState.errors.name ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.name.message })) : null] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.slugLabel }), _jsx(Input, { ...form.register("slug"), placeholder: t.slugPlaceholder }), form.formState.errors.slug ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.slug.message })) : null] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.channelLabel }), _jsx("select", { className: nativeSelectClassName, value: form.watch("channel"), onChange: (event) => {
+                                                        const nextChannel = event.target.value;
+                                                        if (form.getValues("channel") === nextChannel)
+                                                            return;
+                                                        form.setValue("channel", nextChannel, {
+                                                            shouldDirty: true,
+                                                            shouldTouch: true,
+                                                            shouldValidate: true,
+                                                        });
+                                                    }, children: CHANNEL_VALUES.map((value) => (_jsx("option", { value: value, children: channelItemLabel(common, value) }, value))) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.statusLabel }), _jsx("select", { className: nativeSelectClassName, value: form.watch("status"), onChange: (event) => {
+                                                        const nextStatus = event.target.value;
+                                                        if (form.getValues("status") === nextStatus)
+                                                            return;
+                                                        form.setValue("status", nextStatus, {
+                                                            shouldDirty: true,
+                                                            shouldTouch: true,
+                                                            shouldValidate: true,
+                                                        });
+                                                    }, children: STATUS_VALUES.map((value) => (_jsx("option", { value: value, children: statusItemLabel(common, value) }, value))) })] })] }), channel === "email" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.attachmentsLabel }), _jsx("div", { className: "flex flex-wrap gap-3", children: ATTACHMENT_VALUES.map((value) => (_jsxs("div", { className: "flex h-9 items-center gap-2 rounded-md border px-3 text-sm", children: [_jsx(Checkbox, { id: `notification-template-attachment-${value}`, checked: attachments.includes(value), onCheckedChange: (checked) => setAttachmentSelected(value, checked === true) }), _jsx(Label, { htmlFor: `notification-template-attachment-${value}`, className: "cursor-pointer text-sm font-normal", children: attachmentItemLabel(t, value) })] }, value))) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.fromAddressLabel }), _jsx(Input, { ...form.register("fromAddress"), placeholder: t.fromAddressPlaceholder })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.subjectLabel }), _jsx(Input, { ...form.register("subjectTemplate"), placeholder: t.subjectPlaceholder })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.htmlBodyLabel }), _jsx(RichTextEditor, { value: form.watch("htmlTemplate") ?? "", onChange: (value) => form.setValue("htmlTemplate", value, {
+                                                        shouldDirty: true,
+                                                        shouldTouch: true,
+                                                        shouldValidate: true,
+                                                    }), placeholder: t.htmlBodyPlaceholder, enableVariables: true, onEditorReady: setEditorInstance })] })] })) : null, channel === "sms" ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.smsBodyLabel }), _jsx(Textarea, { ...form.register("textTemplate"), placeholder: t.smsBodyPlaceholder, rows: 6, className: "font-mono text-xs" })] })) : null, _jsxs(Tabs, { defaultValue: "authoring", children: [_jsxs(TabsList, { className: "w-full", children: [_jsx(TabsTrigger, { value: "authoring", children: t.tabAuthoring }), _jsx(TabsTrigger, { value: "preview", children: t.tabPreview })] }), _jsxs(TabsContent, { value: "authoring", className: "mt-4 space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-[180px_1fr] sm:items-center", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: t.insertIntoLabel }), _jsxs("select", { className: nativeSelectClassName, value: insertionTarget, onChange: (event) => {
+                                                                        const nextTarget = event.target.value;
+                                                                        if (nextTarget === insertionTarget)
+                                                                            return;
+                                                                        setInsertionTarget(nextTarget);
+                                                                    }, children: [channel === "email" ? (_jsx("option", { value: "subject", children: t.insertTargetSubject })) : null, channel === "email" ? (_jsx("option", { value: "body", children: t.insertTargetHtmlBody })) : null, channel === "sms" ? (_jsx("option", { value: "text", children: t.insertTargetSmsBody })) : null] })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: t.insertHint })] }), _jsx(NotificationTemplateAuthoringHelp, { variableGroups: variableGroups, snippets: liquidSnippets, onInsertVariable: (variable) => insertIntoTarget(variable.key, "variable"), onInsertSnippet: (snippet) => insertIntoTarget(snippet.code, "snippet") })] }), _jsx(TabsContent, { value: "preview", className: "mt-4 space-y-4", children: _jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1fr)_320px]", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.previewDataLabel }), _jsx(Textarea, { value: previewDataInput, onChange: (event) => setPreviewDataInput(event.target.value), rows: 14, className: "font-mono text-xs", placeholder: t.previewDataPlaceholder }), _jsx("p", { className: "text-xs text-muted-foreground", children: t.previewDataHint })] }), _jsx("div", { className: "flex gap-2", children: _jsxs(Button, { type: "button", variant: "outline", onClick: handlePreview, disabled: preview.isPending, children: [preview.isPending ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : null, t.refreshPreview] }) }), _jsxs("div", { className: "space-y-3 rounded-md border p-4", children: [_jsx("div", { className: "text-sm font-medium", children: t.renderedPreviewTitle }), channel === "email" ? (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: t.renderedSubjectLabel }), _jsx("div", { className: "rounded-md border bg-muted/20 px-3 py-2 text-sm", children: preview.data?.subject || t.noSubjectRendered })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: t.renderedHtmlLabel }), _jsx("div", { className: "rounded-md border bg-background", children: preview.data?.html ? (_jsx("div", { className: "prose prose-sm max-w-none px-3 py-3 dark:prose-invert", 
+                                                                                            // biome-ignore lint/security/noDangerouslySetInnerHtml: Preview HTML is generated server-side for template preview.
+                                                                                            dangerouslySetInnerHTML: { __html: preview.data.html } })) : (_jsx("div", { className: "px-3 py-3 text-sm text-muted-foreground", children: t.noHtmlRendered })) })] })] })) : (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: t.renderedSmsLabel }), _jsx("pre", { className: "whitespace-pre-wrap rounded-md border bg-muted/20 px-3 py-3 text-xs", children: preview.data?.text || t.noSmsRendered })] }))] })] }), _jsxs("div", { className: "space-y-4 rounded-md border p-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-sm font-medium", children: t.testSendTitle }), _jsx("p", { className: "text-xs text-muted-foreground", children: t.testSendDescription })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: channel === "email" ? t.recipientEmailLabel : t.recipientPhoneLabel }), _jsx(Input, { value: testRecipient, onChange: (event) => setTestRecipient(event.target.value), placeholder: channel === "email"
+                                                                            ? t.recipientEmailPlaceholder
+                                                                            : t.recipientPhonePlaceholder })] }), _jsxs("div", { className: "space-y-1 text-xs text-muted-foreground", children: [_jsx("div", { children: t.providerAutoNote }), channel === "email" ? (_jsx("div", { children: formatMessage(t.fromNote, {
+                                                                            sender: form.watch("fromAddress") || common.defaultSender,
+                                                                        }) })) : null] }), _jsxs(Button, { type: "button", className: "w-full", onClick: handleTestSend, disabled: testSend.isPending, children: [testSend.isPending ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : null, channel === "email" ? t.sendTestEmail : t.sendTestSms] }), testSend.data ? (_jsxs("div", { className: "rounded-md border border-emerald-500/30 bg-emerald-500/10 px-3 py-2 text-xs text-emerald-200", children: ["Delivery queued with status ", _jsx("strong", { children: testSend.data.status }), testSend.data.provider ? ` via ${testSend.data.provider}` : "", "."] })) : null] })] }) })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { checked: form.watch("active"), onCheckedChange: (checked) => form.setValue("active", checked) }), _jsx(Label, { className: "cursor-pointer", children: t.markActiveLabel })] })] }) }), _jsxs(DialogFooter, { className: "mt-0", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", disabled: isPending, children: [isPending ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, isEditing ? common.saveChanges : t.createTemplate] })] })] }) }) }));
+}

package/dist/admin/notification-templates-host.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Packaged admin host for the notification templates list page
+ * (packaged-admin RFC Phase 3). Zero-prop: list/filter state stays
+ * component-local, row clicks resolve through the
+ * `notificationTemplate.detail` semantic destination, and the create/edit
+ * dialog stays lazily loaded inside the package.
+ */
+export declare function NotificationTemplatesHost(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=notification-templates-host.d.ts.map

package/dist/admin/notification-templates-host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-templates-host.d.ts","sourceRoot":"","sources":["../../src/admin/notification-templates-host.tsx"],"names":[],"mappings":"AAgCA;;;;;;GAMG;AACH,wBAAgB,yBAAyB,4CAuJxC"}

package/dist/admin/notification-templates-host.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAdminHref, useAdminNavigate } from "@voyantjs/admin";
+import { Badge, Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
+import { Loader2, Pencil, Plus, Search } from "lucide-react";
+import { lazy, Suspense, useState } from "react";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+import { useNotificationTemplates, } from "../index.js";
+import { DestinationLink } from "./notifications-admin-shared.js";
+// Lazy-load: the template dialog pulls the rich-text editor (tiptap +
+// prosemirror). Keeping it out of the list-page chunk means those modules
+// only download when the user opens the create/edit dialog.
+const NotificationTemplateDialog = lazy(() => import("./notification-template-dialog.js").then((m) => ({
+    default: m.NotificationTemplateDialog,
+})));
+/**
+ * Packaged admin host for the notification templates list page
+ * (packaged-admin RFC Phase 3). Zero-prop: list/filter state stays
+ * component-local, row clicks resolve through the
+ * `notificationTemplate.detail` semantic destination, and the create/edit
+ * dialog stays lazily loaded inside the package.
+ */
+export function NotificationTemplatesHost() {
+    const messages = useNotificationsUiMessagesOrDefault();
+    const t = messages.admin.templatesPage;
+    const common = messages.admin.common;
+    const [search, setSearch] = useState("");
+    const [channel, setChannel] = useState("all");
+    const [status, setStatus] = useState("all");
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editing, setEditing] = useState();
+    const resolveHref = useAdminHref();
+    const navigateTo = useAdminNavigate();
+    const { data, isPending, refetch } = useNotificationTemplates({
+        search,
+        channel: channel === "all" ? undefined : channel,
+        status: status === "all" ? undefined : status,
+    });
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: t.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: t.description })] }), _jsxs(Button, { onClick: () => {
+                            setEditing(undefined);
+                            setDialogOpen(true);
+                        }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), t.newTemplate] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "relative max-w-sm flex-1", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder: t.searchPlaceholder, value: search, onChange: (event) => setSearch(event.target.value), className: "pl-9" })] }), _jsxs(Select, { value: channel, onValueChange: (value) => setChannel(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-[140px]", children: _jsx(SelectValue, { placeholder: common.channelFilterPlaceholder }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: common.allChannels }), _jsx(SelectItem, { value: "email", children: common.channelEmail }), _jsx(SelectItem, { value: "sms", children: common.channelSms })] })] }), _jsxs(Select, { value: status, onValueChange: (value) => setStatus(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-[140px]", children: _jsx(SelectValue, { placeholder: common.statusFilterPlaceholder }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: common.allStatuses }), _jsx(SelectItem, { value: "draft", children: common.statusDraft }), _jsx(SelectItem, { value: "active", children: common.statusActive }), _jsx(SelectItem, { value: "archived", children: common.statusArchived })] })] })] }), isPending ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) })) : null, !isPending && (!data?.data || data.data.length === 0) ? (_jsx("div", { className: "rounded-md border border-dashed p-8 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: t.empty }) })) : null, !isPending && data?.data && data.data.length > 0 ? (_jsx("div", { className: "rounded-md border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-4 py-3", children: "Template" }), _jsx("th", { className: "px-4 py-3", children: "Channel" }), _jsx("th", { className: "px-4 py-3", children: "Status" }), _jsx("th", { className: "px-4 py-3", children: "Updated" }), _jsx("th", { className: "px-4 py-3 text-right", children: "Actions" })] }) }), _jsx("tbody", { children: data.data.map((template) => (_jsxs("tr", { className: "border-t", children: [_jsx("td", { className: "px-4 py-3", children: _jsxs(DestinationLink, { href: resolveHref("notificationTemplate.detail", {
+                                                templateId: template.id,
+                                            }), onNavigate: () => navigateTo("notificationTemplate.detail", { templateId: template.id }), className: "block rounded-sm outline-none transition-colors hover:text-primary focus-visible:text-primary", children: [_jsx("div", { className: "font-medium", children: template.name }), _jsx("div", { className: "font-mono text-xs text-muted-foreground", children: template.slug })] }) }), _jsx("td", { className: "px-4 py-3", children: _jsx(Badge, { variant: "outline", children: template.channel }) }), _jsx("td", { className: "px-4 py-3", children: _jsx(Badge, { variant: template.status === "active" ? "default" : "secondary", children: template.status }) }), _jsx("td", { className: "px-4 py-3", children: new Date(template.updatedAt).toLocaleString() }), _jsx("td", { className: "px-4 py-3 text-right", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                                setEditing(template);
+                                                setDialogOpen(true);
+                                            }, children: _jsx(Pencil, { className: "h-4 w-4" }) }) })] }, template.id))) })] }) })) : null, _jsx(Suspense, { fallback: null, children: _jsx(NotificationTemplateDialog, { open: dialogOpen, onOpenChange: setDialogOpen, template: editing, onSuccess: () => {
+                        setDialogOpen(false);
+                        setEditing(undefined);
+                        void refetch();
+                    } }) })] }));
+}

package/dist/admin/notifications-admin-shared.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+/**
+ * SPA-friendly destination link shared by the packaged notifications admin
+ * hosts: real href for a11y / middle-click, host-router navigation on plain
+ * left click (packaged-admin RFC §4.7 — hrefs come from `useAdminHref`,
+ * clicks go through `useAdminNavigate`).
+ */
+export declare function DestinationLink({ href, onNavigate, className, children, }: {
+    href: string;
+    onNavigate: () => void;
+    className?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=notifications-admin-shared.d.ts.map

package/dist/admin/notifications-admin-shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notifications-admin-shared.d.ts","sourceRoot":"","sources":["../../src/admin/notifications-admin-shared.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAA;AAElD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,UAAU,EACV,SAAS,EACT,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB,2CAWA"}

package/dist/admin/notifications-admin-shared.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * SPA-friendly destination link shared by the packaged notifications admin
+ * hosts: real href for a11y / middle-click, host-router navigation on plain
+ * left click (packaged-admin RFC §4.7 — hrefs come from `useAdminHref`,
+ * clicks go through `useAdminNavigate`).
+ */
+export function DestinationLink({ href, onNavigate, className, children, }) {
+    const handleClick = (event) => {
+        if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey)
+            return;
+        event.preventDefault();
+        onNavigate();
+    };
+    return (_jsx("a", { href: href, onClick: handleClick, className: className, children: children }));
+}

package/dist/admin/pages/notification-reminder-rule-detail-page.d.ts

@@ -0,0 +1,8 @@
+import type { AdminRoutePageProps } from "@voyantjs/admin";
+/**
+ * Route page for the `notifications-reminder-rules-detail` contribution:
+ * binds the matched route's `$id` param onto
+ * {@link NotificationReminderRuleDetailHost}.
+ */
+export default function NotificationReminderRuleDetailPage({ params }: AdminRoutePageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=notification-reminder-rule-detail-page.d.ts.map

package/dist/admin/pages/notification-reminder-rule-detail-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-reminder-rule-detail-page.d.ts","sourceRoot":"","sources":["../../../src/admin/pages/notification-reminder-rule-detail-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AAI1D;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kCAAkC,CAAC,EAAE,MAAM,EAAE,EAAE,mBAAmB,2CAEzF"}

package/dist/admin/pages/notification-reminder-rule-detail-page.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NotificationReminderRuleDetailHost } from "../notification-reminder-rule-detail-host.js";
+/**
+ * Route page for the `notifications-reminder-rules-detail` contribution:
+ * binds the matched route's `$id` param onto
+ * {@link NotificationReminderRuleDetailHost}.
+ */
+export default function NotificationReminderRuleDetailPage({ params }) {
+    return _jsx(NotificationReminderRuleDetailHost, { id: params.id ?? "" });
+}

package/dist/admin/pages/notification-template-detail-page.d.ts

@@ -0,0 +1,7 @@
+import type { AdminRoutePageProps } from "@voyantjs/admin";
+/**
+ * Route page for the `notifications-templates-detail` contribution: binds
+ * the matched route's `$id` param onto {@link NotificationTemplateDetailHost}.
+ */
+export default function NotificationTemplateDetailPage({ params }: AdminRoutePageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=notification-template-detail-page.d.ts.map

package/dist/admin/pages/notification-template-detail-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-template-detail-page.d.ts","sourceRoot":"","sources":["../../../src/admin/pages/notification-template-detail-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AAI1D;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,8BAA8B,CAAC,EAAE,MAAM,EAAE,EAAE,mBAAmB,2CAErF"}

package/dist/admin/pages/notification-template-detail-page.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NotificationTemplateDetailHost } from "../notification-template-detail-host.js";
+/**
+ * Route page for the `notifications-templates-detail` contribution: binds
+ * the matched route's `$id` param onto {@link NotificationTemplateDetailHost}.
+ */
+export default function NotificationTemplateDetailPage({ params }) {
+    return _jsx(NotificationTemplateDetailHost, { id: params.id ?? "" });
+}

package/dist/admin/reminders-preview-host.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Packaged admin host for the read-only reminders preview page
+ * (packaged-admin RFC Phase 3). Zero-prop: the preview list owns its data
+ * wiring through `@voyantjs/notifications-react`.
+ */
+export declare function RemindersPreviewHost(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=reminders-preview-host.d.ts.map

package/dist/admin/reminders-preview-host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reminders-preview-host.d.ts","sourceRoot":"","sources":["../../src/admin/reminders-preview-host.tsx"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,wBAAgB,oBAAoB,4CAYnC"}

package/dist/admin/reminders-preview-host.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RemindersPreviewList } from "../components/reminders-preview-list.js";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+/**
+ * Packaged admin host for the read-only reminders preview page
+ * (packaged-admin RFC Phase 3). Zero-prop: the preview list owns its data
+ * wiring through `@voyantjs/notifications-react`.
+ */
+export function RemindersPreviewHost() {
+    const t = useNotificationsUiMessagesOrDefault().admin.previewPage;
+    return (_jsxs("div", { className: "container mx-auto space-y-6 p-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold", children: t.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: t.description })] }), _jsx(RemindersPreviewList, {})] }));
+}

package/dist/components/notification-settings-form.d.ts

@@ -0,0 +1,2 @@
+export declare function NotificationSettingsForm(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=notification-settings-form.d.ts.map

package/dist/components/notification-settings-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-settings-form.d.ts","sourceRoot":"","sources":["../../src/components/notification-settings-form.tsx"],"names":[],"mappings":"AAsDA,wBAAgB,wBAAwB,4CAqNvC"}