@voyantjs/notifications-react 0.111.6 → 0.111.7

package/dist/admin/notification-delivery-detail-dialog.js

@@ -16,7 +16,7 @@ export function NotificationDeliveryDetailDialog({ deliveryId, open, onOpenChang
                                                             : delivery.status === "failed"
                                                                 ? "destructive"
                                                                 : "secondary", children: delivery.status }) })] })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsxs(Section, { title: t.metadataTitle, children: [_jsx(KeyValue, { label: t.labels.channel, value: delivery.channel }), _jsx(KeyValue, { label: t.labels.from, value: delivery.fromAddress ?? "—" }), _jsx(KeyValue, { label: t.labels.targetType, value: delivery.targetType }), _jsx(KeyValue, { label: t.labels.targetId, value: delivery.targetId ?? "—", mono: true }), _jsx(KeyValue, { label: t.labels.providerMessageId, value: delivery.providerMessageId ?? "—", mono: true }), _jsx(KeyValue, { label: t.labels.created, value: new Date(delivery.createdAt).toLocaleString() }), _jsx(KeyValue, { label: t.labels.sent, value: delivery.sentAt ? new Date(delivery.sentAt).toLocaleString() : "—" }), _jsx(KeyValue, { label: t.labels.failed, value: delivery.failedAt ? new Date(delivery.failedAt).toLocaleString() : "—" })] }), _jsxs(Section, { title: t.renderedPayloadTitle, children: [_jsx(KeyValue, { label: t.labels.subject, value: delivery.subject ?? "—" }), _jsx(KeyValue, { label: t.labels.error, value: delivery.errorMessage ?? "—" }), _jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: t.labels.text }), _jsx("pre", { className: "whitespace-pre-wrap rounded-md border bg-muted/20 px-3 py-3 text-xs", children: delivery.textBody ?? "—" })] })] })] }), _jsx(Section, { title: t.htmlBodyTitle, children: delivery.htmlBody ? (_jsx("div", { className: "prose prose-sm max-w-none rounded-md border bg-background px-4 py-4 dark:prose-invert", 
-                                        // biome-ignore lint/security/noDangerouslySetInnerHtml: Notification HTML body is stored template output rendered for preview.
+                                        // biome-ignore lint/security/noDangerouslySetInnerHtml: Notification HTML body is stored template output rendered for preview. -- owner: notifications-react; existing suppression is intentional pending typed cleanup.
                                         dangerouslySetInnerHTML: { __html: delivery.htmlBody } })) : (_jsx("div", { className: "rounded-md border bg-muted/20 px-4 py-3 text-sm text-muted-foreground", children: t.noHtmlStored })) }), _jsx(Section, { title: t.payloadDataTitle, children: _jsx("pre", { className: "overflow-x-auto whitespace-pre-wrap rounded-md border bg-muted/20 px-3 py-3 text-xs", children: JSON.stringify(delivery.payloadData ?? {}, null, 2) }) })] })) : null] }), _jsx(DialogFooter, { children: _jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: t.close }) })] }) }));
 }
 function Section({ title, children }) {

package/dist/admin/notification-template-attachments-field.d.ts

@@ -0,0 +1,10 @@
+import type { NotificationsUiMessages } from "../i18n/index.js";
+import { type TemplateAttachment } from "./notification-template-dialog-utils.js";
+type NotificationTemplateAttachmentsFieldProps = {
+    attachments: ReadonlyArray<TemplateAttachment>;
+    onAttachmentChange: (attachment: TemplateAttachment, checked: boolean) => void;
+    t: NotificationsUiMessages["admin"]["templateDialog"];
+};
+export declare function NotificationTemplateAttachmentsField({ attachments, onAttachmentChange, t, }: NotificationTemplateAttachmentsFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=notification-template-attachments-field.d.ts.map

package/dist/admin/notification-template-attachments-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-template-attachments-field.d.ts","sourceRoot":"","sources":["../../src/admin/notification-template-attachments-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAC/D,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,yCAAyC,CAAA;AAEhD,KAAK,yCAAyC,GAAG;IAC/C,WAAW,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAA;IAC9C,kBAAkB,EAAE,CAAC,UAAU,EAAE,kBAAkB,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9E,CAAC,EAAE,uBAAuB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,CAAA;CACtD,CAAA;AAED,wBAAgB,oCAAoC,CAAC,EACnD,WAAW,EACX,kBAAkB,EAClB,CAAC,GACF,EAAE,yCAAyC,2CAuB3C"}

package/dist/admin/notification-template-attachments-field.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox, Label } from "@voyantjs/ui/components";
+import { ATTACHMENT_VALUES, attachmentItemLabel, } from "./notification-template-dialog-utils.js";
+export function NotificationTemplateAttachmentsField({ attachments, onAttachmentChange, t, }) {
+    return (_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) => onAttachmentChange(value, checked === true) }), _jsx(Label, { htmlFor: `notification-template-attachment-${value}`, className: "cursor-pointer text-sm font-normal", children: attachmentItemLabel(t, value) })] }, value))) })] }));
+}

package/dist/admin/notification-template-detail-host.js

@@ -136,9 +136,9 @@ export function NotificationTemplateDetailHost({ id }) {
     }
     const renderedPreview = preview.data;
     return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(DestinationLink, { href: resolveHref("notificationTemplate.list", {}), onNavigate: () => navigateTo("notificationTemplate.list", {}), className: "inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), t.backToTemplates] }), _jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: template.name }), _jsx("p", { className: "font-mono text-xs text-muted-foreground", children: template.slug })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: template.channel }), _jsx(Badge, { variant: template.status === "active" ? "default" : "secondary", children: template.status })] })] }), _jsxs(Button, { onClick: () => setEditOpen(true), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), t.editTemplate] })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4", children: [_jsx(MetaCard, { label: t.metaChannel, value: template.channel }), _jsx(MetaCard, { label: t.metaFrom, value: template.fromAddress ?? common.defaultSender }), _jsx(MetaCard, { label: t.metaUpdated, value: new Date(template.updatedAt).toLocaleString() })] }), _jsxs(Tabs, { defaultValue: "overview", children: [_jsxs(TabsList, { className: "w-full", children: [_jsx(TabsTrigger, { value: "overview", children: t.tabOverview }), _jsx(TabsTrigger, { value: "preview", children: t.tabPreview }), _jsx(TabsTrigger, { value: "deliveries", children: t.recentDeliveries })] }), _jsx(TabsContent, { value: "overview", className: "mt-4 space-y-4", children: _jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t.messageStructureTitle }) }), _jsxs(CardContent, { className: "space-y-3 text-sm", children: [_jsx(KeyValue, { label: t.subjectLabel, value: template.subjectTemplate ?? "—" }), _jsx(KeyValue, { label: t.textFallbackLabel, value: template.textTemplate ?? "—" }), _jsx(KeyValue, { label: t.descriptionLabel, value: template.metadata ? JSON.stringify(template.metadata) : "—" })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t.htmlBodyTitle }) }), _jsx(CardContent, { children: template.htmlTemplate ? (_jsx("div", { className: "prose prose-sm max-w-none rounded-md border bg-background px-4 py-4 dark:prose-invert", 
-                                                // biome-ignore lint/security/noDangerouslySetInnerHtml: Notification template HTML is rendered for preview.
+                                                // biome-ignore lint/security/noDangerouslySetInnerHtml: Notification template HTML is rendered for preview. -- owner: notifications-react; existing suppression is intentional pending typed cleanup.
                                                 dangerouslySetInnerHTML: { __html: template.htmlTemplate } })) : (_jsx("div", { className: "rounded-md border bg-muted/20 px-4 py-3 text-sm text-muted-foreground", children: t.noHtmlConfigured })) })] })] }) }), _jsx(TabsContent, { value: "preview", className: "mt-4", children: _jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t.sampleDataTitle }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsx(Label, { children: t.customJsonLabel }), _jsx(Textarea, { value: previewDataInput || defaultPreviewData, onChange: (event) => setPreviewDataInput(event.target.value), rows: 16, className: "font-mono text-xs" }), _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.renderPreview] })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t.renderedOutputTitle }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsx(KeyValue, { label: t.subjectLabel, value: renderedPreview?.subject ?? t.notRenderedYet }), template.channel === "email" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: t.htmlBodyTitle }), renderedPreview?.html ? (_jsx("div", { className: "prose prose-sm max-w-none rounded-md border bg-background px-4 py-4 dark:prose-invert", 
-                                                                    // biome-ignore lint/security/noDangerouslySetInnerHtml: Rendered preview HTML is generated server-side for preview.
+                                                                    // biome-ignore lint/security/noDangerouslySetInnerHtml: Rendered preview HTML is generated server-side for preview. -- owner: notifications-react; existing suppression is intentional pending typed cleanup.
                                                                     dangerouslySetInnerHTML: { __html: renderedPreview.html } })) : (_jsx("div", { className: "rounded-md border bg-muted/20 px-4 py-3 text-sm text-muted-foreground", children: t.noRenderedHtml }))] }), _jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: t.textFallbackLabel }), _jsx("pre", { className: "whitespace-pre-wrap rounded-md border bg-muted/20 px-3 py-3 text-xs", children: renderedPreview?.text ?? t.noRenderedText })] })] })) : (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: t.smsBodyLabel }), _jsx("pre", { className: "whitespace-pre-wrap rounded-md border bg-muted/20 px-3 py-3 text-xs", children: renderedPreview?.text ?? t.noRenderedText })] }))] })] })] }) }), _jsx(TabsContent, { value: "deliveries", className: "mt-4", children: _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t.recentDeliveries }) }), _jsx(CardContent, { children: deliveries.isPending ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) })) : deliveries.data?.data && deliveries.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: "Recipient" }), _jsx("th", { className: "px-4 py-3", children: "Provider" }), _jsx("th", { className: "px-4 py-3", children: "Status" }), _jsx("th", { className: "px-4 py-3", children: "Created" }), _jsx("th", { className: "px-4 py-3 text-right", children: "View" })] }) }), _jsx("tbody", { children: deliveries.data.data.map((delivery) => (_jsxs("tr", { className: "border-t", children: [_jsxs("td", { className: "px-4 py-3", children: [_jsx("div", { children: delivery.toAddress }), delivery.subject ? (_jsx("div", { className: "text-xs text-muted-foreground", children: delivery.subject })) : null] }), _jsx("td", { className: "px-4 py-3", children: delivery.provider }), _jsx("td", { className: "px-4 py-3", children: _jsx(Badge, { variant: delivery.status === "sent"
                                                                         ? "default"
                                                                         : delivery.status === "failed"

package/dist/admin/notification-template-dialog-utils.d.ts

@@ -0,0 +1,53 @@
+import { z } from "zod/v4";
+import type { NotificationsUiMessages } from "../i18n/index.js";
+export declare const CHANNEL_VALUES: readonly ["email", "sms"];
+export declare const STATUS_VALUES: readonly ["draft", "active", "archived"];
+export declare const ATTACHMENT_VALUES: readonly ["contract", "invoice", "brochure"];
+export declare const channelItemLabel: (t: NotificationsUiMessages["admin"]["common"], value: (typeof CHANNEL_VALUES)[number]) => string;
+export declare const statusItemLabel: (t: NotificationsUiMessages["admin"]["common"], value: (typeof STATUS_VALUES)[number]) => string;
+export declare const attachmentItemLabel: (t: NotificationsUiMessages["admin"]["templateDialog"], value: (typeof ATTACHMENT_VALUES)[number]) => string;
+export declare 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";
+declare const templateAttachmentSchema: z.ZodEnum<{
+    invoice: "invoice";
+    contract: "contract";
+    brochure: "brochure";
+}>;
+export declare const templateFormSchema: z.ZodObject<{
+    name: z.ZodString;
+    slug: z.ZodString;
+    channel: z.ZodEnum<{
+        email: "email";
+        sms: "sms";
+    }>;
+    status: z.ZodDefault<z.ZodEnum<{
+        draft: "draft";
+        active: "active";
+        archived: "archived";
+    }>>;
+    subjectTemplate: z.ZodOptional<z.ZodString>;
+    htmlTemplate: z.ZodOptional<z.ZodString>;
+    textTemplate: z.ZodOptional<z.ZodString>;
+    fromAddress: z.ZodOptional<z.ZodString>;
+    attachments: z.ZodDefault<z.ZodArray<z.ZodEnum<{
+        invoice: "invoice";
+        contract: "contract";
+        brochure: "brochure";
+    }>>>;
+    active: z.ZodBoolean;
+}, z.core.$strip>;
+export type FormValues = z.input<typeof templateFormSchema>;
+export type FormOutput = z.output<typeof templateFormSchema>;
+export type TemplateAttachment = z.infer<typeof templateAttachmentSchema>;
+export type InsertionTarget = "subject" | "body" | "text";
+export declare function buildSamplePayload(variableGroups: Array<{
+    variables: Array<{
+        key: string;
+        example: string;
+    }>;
+}>): Record<string, unknown>;
+export declare function appendTemplateValue(current: string | undefined, addition: string): string;
+export declare function variableReference(key: string): string;
+export declare function readTemplateAttachments(metadata: unknown): TemplateAttachment[];
+export declare function buildTemplateMetadata(metadata: unknown, attachments: ReadonlyArray<TemplateAttachment>): Record<string, unknown> | null;
+export {};
+//# sourceMappingURL=notification-template-dialog-utils.d.ts.map

package/dist/admin/notification-template-dialog-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-template-dialog-utils.d.ts","sourceRoot":"","sources":["../../src/admin/notification-template-dialog-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAA;AAC1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAE/D,eAAO,MAAM,cAAc,2BAA4B,CAAA;AACvD,eAAO,MAAM,aAAa,0CAA2C,CAAA;AACrE,eAAO,MAAM,iBAAiB,8CAA+C,CAAA;AAE7E,eAAO,MAAM,gBAAgB,GAC3B,GAAG,uBAAuB,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,EAC7C,OAAO,CAAC,OAAO,cAAc,EAAE,MAAM,CAAC,WACgB,CAAA;AAExD,eAAO,MAAM,eAAe,GAC1B,GAAG,uBAAuB,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,EAC7C,OAAO,CAAC,OAAO,aAAa,EAAE,MAAM,CAAC,WAC0D,CAAA;AAEjG,eAAO,MAAM,mBAAmB,GAC9B,GAAG,uBAAuB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,EACrD,OAAO,CAAC,OAAO,iBAAiB,EAAE,MAAM,CAAC,WAMf,CAAA;AAE5B,eAAO,MAAM,qBAAqB,+QAC4O,CAAA;AAE9Q,QAAA,MAAM,wBAAwB;;;;EAA8C,CAAA;AAE5E,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;iBAc7B,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAC3D,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAC5D,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,wBAAwB,CAAC,CAAA;AACzE,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AA8CzD,wBAAgB,kBAAkB,CAChC,cAAc,EAAE,KAAK,CAAC;IACpB,SAAS,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CACnD,CAAC,2BASH;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,UAGhF;AAED,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,UAE5C;AASD,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,OAAO,GAAG,kBAAkB,EAAE,CAW/E;AAED,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,OAAO,EACjB,WAAW,EAAE,aAAa,CAAC,kBAAkB,CAAC,GAC7C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAWhC"}

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

@@ -0,0 +1,112 @@
+import { z } from "zod/v4";
+export const CHANNEL_VALUES = ["email", "sms"];
+export const STATUS_VALUES = ["draft", "active", "archived"];
+export const ATTACHMENT_VALUES = ["contract", "invoice", "brochure"];
+export const channelItemLabel = (t, value) => (value === "email" ? t.channelEmail : t.channelSms);
+export const statusItemLabel = (t, value) => (value === "draft" ? t.statusDraft : value === "active" ? t.statusActive : t.statusArchived);
+export const attachmentItemLabel = (t, value) => value === "contract"
+    ? t.attachmentContract
+    : value === "invoice"
+        ? t.attachmentInvoice
+        : t.attachmentBrochure;
+export 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"]);
+export 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];
+    }
+}
+export function buildSamplePayload(variableGroups) {
+    const sample = {};
+    for (const group of variableGroups) {
+        for (const variable of group.variables) {
+            setDeepValue(sample, variable.key, variable.example);
+        }
+    }
+    return sample;
+}
+export function appendTemplateValue(current, addition) {
+    if (!current?.trim())
+        return addition;
+    return `${current}${current.endsWith("\n") ? "" : "\n"}${addition}`;
+}
+export function variableReference(key) {
+    return `{{ ${key} }}`;
+}
+function getMetadataRecord(value) {
+    if (!value || typeof value !== "object" || Array.isArray(value)) {
+        return null;
+    }
+    return value;
+}
+export 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));
+}
+export 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;
+}

package/dist/admin/notification-template-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification-template-dialog.d.ts","sourceRoot":"","sources":["../../src/admin/notification-template-dialog.tsx"],"names":[],"mappings":"AAkCA,OAAO,EACL,KAAK,0BAA0B,EAIhC,MAAM,aAAa,CAAA;AAoDpB,KAAK,+BAA+B,GAAG;IACrC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,0BAA0B,CAAA;IACrC,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AA2GD,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,+BAA+B,kDAMhF"}
+{"version":3,"file":"notification-template-dialog.d.ts","sourceRoot":"","sources":["../../src/admin/notification-template-dialog.tsx"],"names":[],"mappings":"AAgCA,OAAO,EACL,KAAK,0BAA0B,EAIhC,MAAM,aAAa,CAAA;AAsBpB,KAAK,+BAA+B,GAAG;IACrC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,0BAA0B,CAAA;IACrC,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,+BAA+B,kDAMhF"}

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

@@ -1,7 +1,7 @@
 "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 { Button, 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";
@@ -9,121 +9,12 @@ 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 { NotificationTemplateAttachmentsField } from "./notification-template-attachments-field.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;
-}
+import { appendTemplateValue, buildSamplePayload, buildTemplateMetadata, CHANNEL_VALUES, channelItemLabel, nativeSelectClassName, readTemplateAttachments, STATUS_VALUES, statusItemLabel, templateFormSchema, variableReference, } from "./notification-template-dialog-utils.js";
+import { NotificationTemplateRenderedPreview } from "./notification-template-rendered-preview.js";
 export function NotificationTemplateDialog(props) {
     if (!props.open) {
         return null;
@@ -345,7 +236,7 @@ function NotificationTemplateDialogInner({ open, onOpenChange, template, onSucce
                                                             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, {
+                                                    }, children: STATUS_VALUES.map((value) => (_jsx("option", { value: value, children: statusItemLabel(common, value) }, value))) })] })] }), channel === "email" ? (_jsxs(_Fragment, { children: [_jsx(NotificationTemplateAttachmentsField, { attachments: attachments, onAttachmentChange: setAttachmentSelected, t: t }), _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,
@@ -354,9 +245,7 @@ function NotificationTemplateDialogInner({ open, onOpenChange, template, onSucce
                                                                         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"
+                                                                    }, 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] }) }), _jsx(NotificationTemplateRenderedPreview, { channel: channel, data: preview.data, t: t })] }), _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,

package/dist/admin/notification-template-rendered-preview.d.ts

@@ -0,0 +1,14 @@
+import type { NotificationsUiMessages } from "../i18n/index.js";
+type RenderedPreviewData = {
+    subject?: string | null;
+    html?: string | null;
+    text?: string | null;
+};
+type NotificationTemplateRenderedPreviewProps = {
+    channel: "email" | "sms";
+    data: RenderedPreviewData | null | undefined;
+    t: NotificationsUiMessages["admin"]["templateDialog"];
+};
+export declare function NotificationTemplateRenderedPreview({ channel, data, t, }: NotificationTemplateRenderedPreviewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=notification-template-rendered-preview.d.ts.map

package/dist/admin/notification-template-rendered-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-template-rendered-preview.d.ts","sourceRoot":"","sources":["../../src/admin/notification-template-rendered-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAE/D,KAAK,mBAAmB,GAAG;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED,KAAK,wCAAwC,GAAG;IAC9C,OAAO,EAAE,OAAO,GAAG,KAAK,CAAA;IACxB,IAAI,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,CAAA;IAC5C,CAAC,EAAE,uBAAuB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,CAAA;CACtD,CAAA;AAED,wBAAgB,mCAAmC,CAAC,EAClD,OAAO,EACP,IAAI,EACJ,CAAC,GACF,EAAE,wCAAwC,2CA6C1C"}

package/dist/admin/notification-template-rendered-preview.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function NotificationTemplateRenderedPreview({ channel, data, t, }) {
+    return (_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: 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: 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. -- owner: notifications-react; existing suppression is intentional pending typed cleanup.
+                                    dangerouslySetInnerHTML: { __html: 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: data?.text || t.noSmsRendered })] }))] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voyantjs/notifications-react",
-  "version": "0.111.6",
+  "version": "0.111.7",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -76,8 +76,8 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.60.0",
     "zod": "^4.0.0",
+    "@voyantjs/notifications": "^0.111.7",
     "@voyantjs/admin": "^0.111.0",
-    "@voyantjs/notifications": "^0.111.6",
     "@voyantjs/ui": "^0.106.1"
   },
   "peerDependenciesMeta": {
@@ -114,7 +114,7 @@
     "zod": "^4.3.6",
     "@voyantjs/admin": "^0.111.0",
     "@voyantjs/i18n": "^0.106.0",
-    "@voyantjs/notifications": "^0.111.6",
+    "@voyantjs/notifications": "^0.111.7",
     "@voyantjs/react": "^0.104.1",
     "@voyantjs/ui": "^0.106.1",
     "@voyantjs/voyant-typescript-config": "^0.1.0"