@voyantjs/ui 0.20.0 → 0.21.0

package/dist/components/contract-template-authoring-help.d.ts

@@ -21,7 +21,15 @@ export type TemplateAuthoringSnippet = {
 type ContractTemplateAuthoringHelpProps = {
     variableGroups: TemplateAuthoringVariableGroup[];
     snippets?: TemplateAuthoringSnippet[];
+    /**
+     * @deprecated Variables now expose a copy-to-clipboard button instead of
+     * an inline insert. Kept for prop-shape compatibility with older callers.
+     */
     onInsertVariable?: (variable: TemplateAuthoringVariable) => void;
+    /**
+     * @deprecated Snippets now expose a copy-to-clipboard button instead of
+     * an inline insert. Kept for prop-shape compatibility with older callers.
+     */
     onInsertSnippet?: (snippet: TemplateAuthoringSnippet) => void;
     className?: string;
     title?: string;
@@ -34,11 +42,12 @@ type ContractTemplateAuthoringHelpProps = {
         searchPlaceholder?: string;
         noVariables?: string;
         example?: string;
-        insert?: string;
+        copy?: string;
+        copied?: string;
         liquidUsage?: string;
         noLiquidSnippets?: string;
     };
 };
-export declare function ContractTemplateAuthoringHelp({ variableGroups, snippets, onInsertVariable, onInsertSnippet, className, title, description, messages, }: ContractTemplateAuthoringHelpProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContractTemplateAuthoringHelp({ variableGroups, snippets, onInsertVariable: _deprecatedOnInsertVariable, onInsertSnippet: _deprecatedOnInsertSnippet, className, title, description, messages, }: ContractTemplateAuthoringHelpProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=contract-template-authoring-help.d.ts.map

package/dist/components/contract-template-authoring-help.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"contract-template-authoring-help.d.ts","sourceRoot":"","sources":["../../src/components/contract-template-authoring-help.tsx"],"names":[],"mappings":"AAYA,MAAM,MAAM,yBAAyB,GAAG;IACtC,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,8BAA8B,GAAG;IAC3C,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,yBAAyB,EAAE,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,KAAK,kCAAkC,GAAG;IACxC,cAAc,EAAE,8BAA8B,EAAE,CAAA;IAChD,QAAQ,CAAC,EAAE,wBAAwB,EAAE,CAAA;IACrC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAA;IAChE,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,IAAI,CAAA;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE;QACT,IAAI,CAAC,EAAE;YACL,SAAS,CAAC,EAAE,MAAM,CAAA;YAClB,MAAM,CAAC,EAAE,MAAM,CAAA;SAChB,CAAA;QACD,iBAAiB,CAAC,EAAE,MAAM,CAAA;QAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAC1B,CAAA;CACF,CAAA;AAMD,wBAAgB,6BAA6B,CAAC,EAC5C,cAAc,EACd,QAAa,EACb,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,KAA4B,EAC5B,WAAwH,EACxH,QAAQ,GACT,EAAE,kCAAkC,2CAiLpC"}
+{"version":3,"file":"contract-template-authoring-help.d.ts","sourceRoot":"","sources":["../../src/components/contract-template-authoring-help.tsx"],"names":[],"mappings":"AAYA,MAAM,MAAM,yBAAyB,GAAG;IACtC,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,8BAA8B,GAAG;IAC3C,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,yBAAyB,EAAE,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,KAAK,kCAAkC,GAAG;IACxC,cAAc,EAAE,8BAA8B,EAAE,CAAA;IAChD,QAAQ,CAAC,EAAE,wBAAwB,EAAE,CAAA;IACrC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAA;IAChE;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,IAAI,CAAA;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE;QACT,IAAI,CAAC,EAAE;YACL,SAAS,CAAC,EAAE,MAAM,CAAA;YAClB,MAAM,CAAC,EAAE,MAAM,CAAA;SAChB,CAAA;QACD,iBAAiB,CAAC,EAAE,MAAM,CAAA;QAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAC1B,CAAA;CACF,CAAA;AA+CD,wBAAgB,6BAA6B,CAAC,EAC5C,cAAc,EACd,QAAa,EACb,gBAAgB,EAAE,2BAA2B,EAC7C,eAAe,EAAE,0BAA0B,EAC3C,SAAS,EACT,KAA4B,EAC5B,WAAwH,EACxH,QAAQ,GACT,EAAE,kCAAkC,2CAsMpC"}

package/dist/components/contract-template-authoring-help.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SearchIcon, SparklesIcon } from "lucide-react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon, SearchIcon, SparklesIcon } from "lucide-react";
 import * as React from "react";
 import { cn } from "../lib/utils";
 import { Badge } from "./badge";
@@ -8,12 +8,53 @@ import { Button } from "./button";
 import { Input } from "./input";
 import { ScrollArea } from "./scroll-area";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+function useCopyToClipboard(timeoutMs = 1200) {
+    const [copiedId, setCopiedId] = React.useState(null);
+    const timeoutRef = React.useRef(null);
+    React.useEffect(() => {
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, []);
+    const copy = React.useCallback(async (id, text) => {
+        try {
+            if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+                await navigator.clipboard.writeText(text);
+            }
+            else if (typeof document !== "undefined") {
+                // Fallback for browsers without the async clipboard API.
+                const textarea = document.createElement("textarea");
+                textarea.value = text;
+                textarea.setAttribute("readonly", "");
+                textarea.style.position = "fixed";
+                textarea.style.opacity = "0";
+                document.body.appendChild(textarea);
+                textarea.select();
+                document.execCommand("copy");
+                document.body.removeChild(textarea);
+            }
+            setCopiedId(id);
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+            timeoutRef.current = setTimeout(() => setCopiedId(null), timeoutMs);
+        }
+        catch {
+            // Silent — copy failures are surfaced by the lack of the
+            // confirmation state. Better than spamming a toast we don't own.
+        }
+    }, [timeoutMs]);
+    return { copiedId, copy };
+}
 function matchesSearch(haystack, query) {
     return haystack.toLowerCase().includes(query);
 }
-export function ContractTemplateAuthoringHelp({ variableGroups, snippets = [], onInsertVariable, onInsertSnippet, className, title = "Template variables", description = "Templates render with Liquid. Use output tags for variables and control tags for loops and conditionals.", messages, }) {
+export function ContractTemplateAuthoringHelp({ variableGroups, snippets = [], onInsertVariable: _deprecatedOnInsertVariable, onInsertSnippet: _deprecatedOnInsertSnippet, className, title = "Template variables", description = "Templates render with Liquid. Use output tags for variables and control tags for loops and conditionals.", messages, }) {
     const [search, setSearch] = React.useState("");
     const normalizedQuery = search.trim().toLowerCase();
+    const { copiedId, copy } = useCopyToClipboard();
+    const copyLabel = messages?.copy ?? "Copy";
+    const copiedLabel = messages?.copied ?? "Copied";
     const filteredGroups = React.useMemo(() => {
         if (!normalizedQuery) {
             return variableGroups;
@@ -33,6 +74,6 @@ export function ContractTemplateAuthoringHelp({ variableGroups, snippets = [], o
         }
         return snippets.filter((snippet) => matchesSearch([snippet.label, snippet.description, snippet.code].filter(Boolean).join(" "), normalizedQuery));
     }, [normalizedQuery, snippets]);
-    return (_jsxs("div", { className: cn("rounded-md border bg-muted/20", className), children: [_jsxs("div", { className: "flex flex-col gap-1 border-b px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(SparklesIcon, { className: "h-4 w-4 text-muted-foreground" }), _jsx("h3", { className: "text-sm font-medium", children: title })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: description })] }), _jsxs(Tabs, { defaultValue: "variables", className: "gap-3 p-4", children: [_jsxs(TabsList, { className: "w-full", children: [_jsx(TabsTrigger, { value: "variables", children: messages?.tabs?.variables ?? "Variables" }), _jsx(TabsTrigger, { value: "liquid", children: messages?.tabs?.liquid ?? "Liquid" })] }), _jsxs("div", { className: "relative", children: [_jsx(SearchIcon, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: messages?.searchPlaceholder ?? "Search variables or snippets...", className: "pl-9" })] }), _jsx(TabsContent, { value: "variables", children: _jsx(ScrollArea, { className: "h-80", children: _jsx("div", { className: "space-y-4 pr-3", children: filteredGroups.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: messages?.noVariables ?? "No variables match this search." })) : (filteredGroups.map((group) => (_jsxs("section", { className: "space-y-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("h4", { className: "text-sm font-medium", children: group.label }), _jsx(Badge, { variant: "outline", children: group.variables.length })] }), group.description ? (_jsx("p", { className: "text-xs text-muted-foreground", children: group.description })) : null] }), _jsx("div", { className: "space-y-2", children: group.variables.map((variable) => (_jsx("div", { className: "rounded-md border bg-background p-3 shadow-xs", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: "text-sm font-medium", children: variable.label }), _jsx(Badge, { variant: "outline", className: "font-normal", children: variable.type })] }), _jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-xs", children: `{{ ${variable.key} }}` }), variable.description ? (_jsx("p", { className: "text-xs text-muted-foreground", children: variable.description })) : null, _jsxs("p", { className: "text-xs text-muted-foreground", children: [messages?.example ?? "Example", ":", " ", _jsx("span", { className: "font-mono text-foreground", children: variable.example })] })] }), onInsertVariable ? (_jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: () => onInsertVariable(variable), children: messages?.insert ?? "Insert" })) : null] }) }, variable.key))) })] }, group.id)))) }) }) }), _jsx(TabsContent, { value: "liquid", children: _jsx(ScrollArea, { className: "h-80", children: _jsxs("div", { className: "space-y-3 pr-3", children: [_jsx("div", { className: "rounded-md border bg-background p-3 text-xs text-muted-foreground", children: messages?.liquidUsage ??
-                                            "Use {{ ... }} for output and {% ... %} for control flow." }), filteredSnippets.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: messages?.noLiquidSnippets ?? "No Liquid snippets match this search." })) : (filteredSnippets.map((snippet) => (_jsxs("div", { className: "rounded-md border bg-background p-3 shadow-xs", children: [_jsxs("div", { className: "mb-2 flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: snippet.label }), _jsx("p", { className: "text-xs text-muted-foreground", children: snippet.description })] }), onInsertSnippet ? (_jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: () => onInsertSnippet(snippet), children: messages?.insert ?? "Insert" })) : null] }), _jsx("pre", { className: "whitespace-pre-wrap rounded-md bg-muted p-3 font-mono text-xs text-foreground", children: snippet.code })] }, snippet.id))))] }) }) })] })] }));
+    return (_jsxs("div", { className: cn("rounded-md border bg-muted/20", className), children: [_jsxs("div", { className: "flex flex-col gap-1 border-b px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(SparklesIcon, { className: "h-4 w-4 text-muted-foreground" }), _jsx("h3", { className: "text-sm font-medium", children: title })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: description })] }), _jsxs(Tabs, { defaultValue: "variables", className: "gap-3 p-4", children: [_jsxs(TabsList, { className: "w-full", children: [_jsx(TabsTrigger, { value: "variables", children: messages?.tabs?.variables ?? "Variables" }), _jsx(TabsTrigger, { value: "liquid", children: messages?.tabs?.liquid ?? "Liquid" })] }), _jsxs("div", { className: "relative", children: [_jsx(SearchIcon, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: messages?.searchPlaceholder ?? "Search variables or snippets...", className: "pl-9" })] }), _jsx(TabsContent, { value: "variables", children: _jsx(ScrollArea, { className: "h-80", children: _jsx("div", { className: "space-y-4 pr-3", children: filteredGroups.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: messages?.noVariables ?? "No variables match this search." })) : (filteredGroups.map((group) => (_jsxs("section", { className: "space-y-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("h4", { className: "text-sm font-medium", children: group.label }), _jsx(Badge, { variant: "outline", children: group.variables.length })] }), group.description ? (_jsx("p", { className: "text-xs text-muted-foreground", children: group.description })) : null] }), _jsx("div", { className: "space-y-2", children: group.variables.map((variable) => (_jsx("div", { className: "rounded-md border bg-background p-3 shadow-xs", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: "text-sm font-medium", children: variable.label }), _jsx(Badge, { variant: "outline", className: "font-normal", children: variable.type })] }), _jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-xs", children: `{{ ${variable.key} }}` }), variable.description ? (_jsx("p", { className: "text-xs text-muted-foreground", children: variable.description })) : null, _jsxs("p", { className: "text-xs text-muted-foreground", children: [messages?.example ?? "Example", ":", " ", _jsx("span", { className: "font-mono text-foreground", children: variable.example })] })] }), _jsx(Button, { type: "button", size: "sm", variant: "outline", "aria-label": `${copyLabel} ${variable.key}`, onClick: () => copy(`var:${variable.key}`, `{{ ${variable.key} }}`), children: copiedId === `var:${variable.key}` ? (_jsxs(_Fragment, { children: [_jsx(CheckIcon, { className: "mr-1.5 h-3.5 w-3.5" }), copiedLabel] })) : (_jsxs(_Fragment, { children: [_jsx(CopyIcon, { className: "mr-1.5 h-3.5 w-3.5" }), copyLabel] })) })] }) }, variable.key))) })] }, group.id)))) }) }) }), _jsx(TabsContent, { value: "liquid", children: _jsx(ScrollArea, { className: "h-80", children: _jsxs("div", { className: "space-y-3 pr-3", children: [_jsx("div", { className: "rounded-md border bg-background p-3 text-xs text-muted-foreground", children: messages?.liquidUsage ??
+                                            "Use {{ ... }} for output and {% ... %} for control flow." }), filteredSnippets.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: messages?.noLiquidSnippets ?? "No Liquid snippets match this search." })) : (filteredSnippets.map((snippet) => (_jsxs("div", { className: "rounded-md border bg-background p-3 shadow-xs", children: [_jsxs("div", { className: "mb-2 flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: snippet.label }), _jsx("p", { className: "text-xs text-muted-foreground", children: snippet.description })] }), _jsx(Button, { type: "button", size: "sm", variant: "outline", "aria-label": `${copyLabel} ${snippet.label}`, onClick: () => copy(`snippet:${snippet.id}`, snippet.code), children: copiedId === `snippet:${snippet.id}` ? (_jsxs(_Fragment, { children: [_jsx(CheckIcon, { className: "mr-1.5 h-3.5 w-3.5" }), copiedLabel] })) : (_jsxs(_Fragment, { children: [_jsx(CopyIcon, { className: "mr-1.5 h-3.5 w-3.5" }), copyLabel] })) })] }), _jsx("pre", { className: "whitespace-pre-wrap rounded-md bg-muted p-3 font-mono text-xs text-foreground", children: snippet.code })] }, snippet.id))))] }) }) })] })] }));
 }

package/dist/components/country-combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"country-combobox.d.ts","sourceRoot":"","sources":["../../src/components/country-combobox.tsx"],"names":[],"mappings":"AAqBA,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,WAAiC,EACjC,SAAiC,EACjC,QAAQ,GACT,EAAE,oBAAoB,2CA+DtB"}
+{"version":3,"file":"country-combobox.d.ts","sourceRoot":"","sources":["../../src/components/country-combobox.tsx"],"names":[],"mappings":"AAqBA,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,WAAiC,EACjC,SAAiC,EACjC,QAAQ,GACT,EAAE,oBAAoB,2CAsEtB"}

package/dist/components/country-combobox.js

@@ -21,10 +21,15 @@ export function CountryCombobox({ value, onChange, placeholder = "Search countri
         setInputValue(selectedLabel);
     }, [selectedLabel]);
     const itemCodes = React.useMemo(() => COUNTRY_LIST.map((c) => c.code), []);
-    return (_jsxs(Combobox, { items: itemCodes, value: normalized, inputValue: inputValue, autoHighlight: true, disabled: disabled, itemToStringValue: (code) => {
-            const match = COUNTRY_BY_CODE.get(code);
-            return match ? `${match.name} (${match.code})` : code;
-        }, onInputValueChange: (next) => {
+    // base-ui filters and displays via `itemToStringLabel`; the
+    // `itemToStringValue` prop is for form submission only. We want
+    // searches like "rom" to match Romania, so the label string includes
+    // the country name.
+    const itemToStringLabel = React.useCallback((code) => {
+        const match = COUNTRY_BY_CODE.get(code);
+        return match ? `${match.name} (${match.code})` : code;
+    }, []);
+    return (_jsxs(Combobox, { items: itemCodes, value: normalized, inputValue: inputValue, autoHighlight: true, disabled: disabled, itemToStringLabel: itemToStringLabel, itemToStringValue: (code) => code, onInputValueChange: (next) => {
             setInputValue(next);
             if (!next)
                 onChange(null);

package/dist/components/index.d.ts

@@ -21,6 +21,7 @@ import { NotificationTemplateAuthoringHelp } from "./notification-template-autho
 import { NotificationTemplateDetailPage } from "./notification-template-detail-page";
 import { NotificationTemplatesPage } from "./notification-templates-page";
 import { OverviewMetric } from "./overview-metric";
+import { RadioGroup, RadioGroupItem } from "./radio-group";
 import { RichTextEditor } from "./rich-text-editor";
 import { ScrollArea, ScrollBar } from "./scroll-area";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
@@ -82,5 +83,5 @@ declare const SidebarMenuSubButton: {
     ({ asChild, children, ...props }: Record<string, unknown> & AsChildProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export { Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ConfirmActionButton, ContractTemplateAuthoringHelp, cn, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label, NotificationDeliveriesPage, NotificationDeliveryDetailDialog, NotificationReminderRulesPage, NotificationReminderRunsPage, NotificationTemplateAuthoringHelp, NotificationTemplateDetailPage, NotificationTemplatesPage, OverviewMetric, RichTextEditor, ScrollArea, ScrollBar, Select, SelectContent, SelectItem, SelectionActionBar, SelectTrigger, SelectValue, Sheet, SheetBody, SheetContent, SheetFooter, SheetHeader, SheetTitle, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, Switch, Textarea, Toaster, useSidebar, };
+export { Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ConfirmActionButton, ContractTemplateAuthoringHelp, cn, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label, NotificationDeliveriesPage, NotificationDeliveryDetailDialog, NotificationReminderRulesPage, NotificationReminderRunsPage, NotificationTemplateAuthoringHelp, NotificationTemplateDetailPage, NotificationTemplatesPage, OverviewMetric, RadioGroup, RadioGroupItem, RichTextEditor, ScrollArea, ScrollBar, Select, SelectContent, SelectItem, SelectionActionBar, SelectTrigger, SelectValue, Sheet, SheetBody, SheetContent, SheetFooter, SheetHeader, SheetTitle, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, Switch, Textarea, Toaster, useSidebar, };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/index.js

@@ -22,6 +22,7 @@ import { NotificationTemplateAuthoringHelp } from "./notification-template-autho
 import { NotificationTemplateDetailPage } from "./notification-template-detail-page";
 import { NotificationTemplatesPage } from "./notification-templates-page";
 import { OverviewMetric } from "./overview-metric";
+import { RadioGroup, RadioGroupItem } from "./radio-group";
 import { RichTextEditor } from "./rich-text-editor";
 import { ScrollArea, ScrollBar } from "./scroll-area";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
@@ -82,4 +83,4 @@ const DropdownMenuTrigger = withAsChild(LocalDropdownMenuTrigger, "DropdownMenuT
 const DropdownMenuItem = withAsChild(LocalDropdownMenuItem, "DropdownMenuItem");
 const SidebarMenuButton = withAsChild(LocalSidebarMenuButton, "SidebarMenuButton");
 const SidebarMenuSubButton = withAsChild(LocalSidebarMenuSubButton, "SidebarMenuSubButton");
-export { Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ConfirmActionButton, ContractTemplateAuthoringHelp, cn, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label, NotificationDeliveriesPage, NotificationDeliveryDetailDialog, NotificationReminderRulesPage, NotificationReminderRunsPage, NotificationTemplateAuthoringHelp, NotificationTemplateDetailPage, NotificationTemplatesPage, OverviewMetric, RichTextEditor, ScrollArea, ScrollBar, Select, SelectContent, SelectItem, SelectionActionBar, SelectTrigger, SelectValue, Sheet, SheetBody, SheetContent, SheetFooter, SheetHeader, SheetTitle, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, Switch, Textarea, Toaster, useSidebar, };
+export { Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ConfirmActionButton, ContractTemplateAuthoringHelp, cn, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label, NotificationDeliveriesPage, NotificationDeliveryDetailDialog, NotificationReminderRulesPage, NotificationReminderRunsPage, NotificationTemplateAuthoringHelp, NotificationTemplateDetailPage, NotificationTemplatesPage, OverviewMetric, RadioGroup, RadioGroupItem, RichTextEditor, ScrollArea, ScrollBar, Select, SelectContent, SelectItem, SelectionActionBar, SelectTrigger, SelectValue, Sheet, SheetBody, SheetContent, SheetFooter, SheetHeader, SheetTitle, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, Switch, Textarea, Toaster, useSidebar, };

package/dist/components/notification-deliveries-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification-deliveries-page.d.ts","sourceRoot":"","sources":["../../src/components/notification-deliveries-page.tsx"],"names":[],"mappings":"AAYA,wBAAgB,0BAA0B,4CA2GzC"}
+{"version":3,"file":"notification-deliveries-page.d.ts","sourceRoot":"","sources":["../../src/components/notification-deliveries-page.tsx"],"names":[],"mappings":"AAuBA,wBAAgB,0BAA0B,4CAiLzC"}

package/dist/components/notification-deliveries-page.js

@@ -1,22 +1,85 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useNotificationDeliveries, } from "@voyantjs/notifications-react";
-import { Loader2 } from "lucide-react";
+import { useNotificationDeliveries, useNotificationDeliveryMutation, } from "@voyantjs/notifications-react";
+import { Loader2, RotateCcw, Search } from "lucide-react";
 import { useState } from "react";
 import { Badge } from "./badge";
+import { Button } from "./button";
+import { Dialog, DialogBody, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "./index";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
 export function NotificationDeliveriesPage() {
     const [channel, setChannel] = useState("all");
     const [status, setStatus] = useState("all");
+    const [selectedDelivery, setSelectedDelivery] = useState(null);
+    const deliveryMutation = useNotificationDeliveryMutation();
+    const selectedDeliveryId = selectedDelivery?.id;
     const { data, isPending } = useNotificationDeliveries({
         channel: channel === "all" ? undefined : channel,
         status: status === "all" ? undefined : status,
         limit: 50,
         offset: 0,
     });
-    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: "Deliveries" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Review notification delivery attempts, rendered payloads, and provider-level outcomes." })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs(Select, { value: channel, onValueChange: (value) => setChannel(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-[140px]", children: _jsx(SelectValue, { placeholder: "Channel" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "All channels" }), _jsx(SelectItem, { value: "email", children: "Email" }), _jsx(SelectItem, { value: "sms", children: "SMS" })] })] }), _jsxs(Select, { value: status, onValueChange: (value) => setStatus(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-[140px]", children: _jsx(SelectValue, { placeholder: "Status" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "All statuses" }), _jsx(SelectItem, { value: "pending", children: "Pending" }), _jsx(SelectItem, { value: "sent", children: "Sent" }), _jsx(SelectItem, { value: "failed", children: "Failed" }), _jsx(SelectItem, { value: "cancelled", children: "Cancelled" })] })] })] }), 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: "No deliveries yet." }) })) : 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: "To" }), _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: "Provider" }), _jsx("th", { className: "px-4 py-3", children: "Status" }), _jsx("th", { className: "px-4 py-3", children: "Created" })] }) }), _jsx("tbody", { children: 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 font-mono text-xs", children: delivery.templateSlug ?? "direct" }), _jsx("td", { className: "px-4 py-3", children: _jsx(Badge, { variant: "outline", children: delivery.channel }) }), _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"
-                                                    ? "destructive"
-                                                    : "secondary", children: delivery.status }) }), _jsx("td", { className: "px-4 py-3", children: new Date(delivery.createdAt).toLocaleString() })] }, delivery.id))) })] }) })) : null] }));
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: "Deliveries" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Review notification delivery attempts, rendered payloads, and provider-level outcomes." })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs(Select, { value: channel, onValueChange: (value) => setChannel(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-[140px]", children: _jsx(SelectValue, { placeholder: "Channel" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "All channels" }), _jsx(SelectItem, { value: "email", children: "Email" }), _jsx(SelectItem, { value: "sms", children: "SMS" })] })] }), _jsxs(Select, { value: status, onValueChange: (value) => setStatus(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-[140px]", children: _jsx(SelectValue, { placeholder: "Status" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "All statuses" }), _jsx(SelectItem, { value: "pending", children: "Pending" }), _jsx(SelectItem, { value: "sent", children: "Sent" }), _jsx(SelectItem, { value: "failed", children: "Failed" }), _jsx(SelectItem, { value: "cancelled", children: "Cancelled" })] })] })] }), 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: "No deliveries yet." }) })) : 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: "To" }), _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: "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: "Logs" })] }) }), _jsx("tbody", { children: 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 font-mono text-xs", children: delivery.templateSlug ?? "direct" }), _jsx("td", { className: "px-4 py-3", children: _jsx(Badge, { variant: "outline", children: delivery.channel }) }), _jsx("td", { className: "px-4 py-3", children: delivery.provider }), _jsxs("td", { className: "px-4 py-3", children: [_jsx(Badge, { variant: delivery.status === "sent"
+                                                    ? "default"
+                                                    : delivery.status === "failed"
+                                                        ? "destructive"
+                                                        : "secondary", children: delivery.status }), delivery.status === "failed" && delivery.errorMessage ? (_jsx("div", { className: "mt-1 max-w-[280px] truncate text-destructive text-xs", children: delivery.errorMessage })) : null] }), _jsx("td", { className: "px-4 py-3", children: new Date(delivery.createdAt).toLocaleString() }), _jsx("td", { className: "px-4 py-3 text-right", children: _jsxs("div", { className: "flex justify-end gap-1", children: [delivery.status === "failed" ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: deliveryMutation.resend.isPending, onClick: () => {
+                                                        deliveryMutation.resend.mutate(delivery.id, {
+                                                            onError(error) {
+                                                                window.alert(error instanceof Error
+                                                                    ? error.message
+                                                                    : "Notification resend failed");
+                                                            },
+                                                        });
+                                                    }, children: [deliveryMutation.resend.isPending ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(RotateCcw, { className: "mr-2 h-4 w-4" })), "Resend"] })) : null, _jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setSelectedDelivery(delivery), children: [_jsx(Search, { className: "mr-2 h-4 w-4" }), "Details"] })] }) })] }, delivery.id))) })] }) })) : null, _jsx(DeliveryDetailsDialog, { delivery: selectedDelivery, open: Boolean(selectedDelivery), onOpenChange: (open) => {
+                    if (!open)
+                        setSelectedDelivery(null);
+                }, onResend: selectedDelivery?.status === "failed" && selectedDeliveryId
+                    ? () => {
+                        deliveryMutation.resend.mutate(selectedDeliveryId, {
+                            onError(error) {
+                                window.alert(error instanceof Error ? error.message : "Notification resend failed");
+                            },
+                        });
+                    }
+                    : undefined, isResending: deliveryMutation.resend.isPending })] }));
+}
+function DeliveryDetailsDialog({ delivery, open, onOpenChange, onResend, isResending = false, }) {
+    if (!delivery)
+        return null;
+    const failureLog = readRecord(delivery.metadata?.failureLog);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "xl", children: [_jsx(DialogHeader, { children: _jsxs("div", { className: "flex items-start justify-between gap-4 pr-8", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(DialogTitle, { children: "Delivery details" }), _jsx(DialogDescription, { children: "Provider response, failure log, rendered content, and payload for this notification." })] }), onResend ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: isResending, onClick: onResend, children: [isResending ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(RotateCcw, { className: "mr-2 h-4 w-4" })), "Resend"] })) : null] }) }), _jsxs(DialogBody, { className: "space-y-5", children: [_jsxs("section", { className: "grid gap-3 sm:grid-cols-2", children: [_jsx(Detail, { label: "Delivery ID", value: delivery.id, mono: true }), _jsx(Detail, { label: "Status", value: delivery.status }), _jsx(Detail, { label: "Provider", value: delivery.provider }), _jsx(Detail, { label: "Provider message ID", value: delivery.providerMessageId ?? "—", mono: true }), _jsx(Detail, { label: "Template", value: delivery.templateSlug ?? "direct", mono: true }), _jsx(Detail, { label: "Channel", value: delivery.channel }), _jsx(Detail, { label: "Created", value: formatDateTime(delivery.createdAt) }), _jsx(Detail, { label: "Failed", value: formatDateTime(delivery.failedAt) }), _jsx(Detail, { label: "Sent", value: formatDateTime(delivery.sentAt) }), _jsx(Detail, { label: "Scheduled", value: formatDateTime(delivery.scheduledFor) })] }), delivery.errorMessage ? (_jsx(LogSection, { title: "Error message", tone: "destructive", children: delivery.errorMessage })) : null, failureLog ? (_jsx(JsonSection, { title: "Failure log", value: failureLog })) : delivery.status === "failed" ? (_jsx(LogSection, { title: "Failure log", children: "No structured failure log was captured." })) : null, _jsxs("section", { className: "grid gap-3 sm:grid-cols-2", children: [_jsx(Detail, { label: "To", value: delivery.toAddress }), _jsx(Detail, { label: "From", value: delivery.fromAddress ?? "—" }), _jsx(Detail, { label: "Subject", value: delivery.subject ?? "—" }), _jsx(Detail, { label: "Target", value: formatTarget(delivery), mono: true })] }), _jsx(JsonSection, { title: "Payload data", value: delivery.payloadData }), _jsx(JsonSection, { title: "Metadata", value: delivery.metadata }), _jsx(BodySection, { title: "Text body", value: delivery.textBody }), _jsx(BodySection, { title: "HTML body", value: delivery.htmlBody })] })] }) }));
+}
+function Detail({ label, value, mono = false }) {
+    return (_jsxs("div", { className: "rounded-md border bg-muted/20 p-3", children: [_jsx("div", { className: "text-muted-foreground text-xs uppercase tracking-wide", children: label }), _jsx("div", { className: `mt-1 break-words text-sm ${mono ? "font-mono" : ""}`, children: value || "—" })] }));
+}
+function LogSection({ title, children, tone, }) {
+    return (_jsxs("section", { className: "space-y-2", children: [_jsx("h2", { className: "font-medium text-sm", children: title }), _jsx("pre", { className: `max-h-56 overflow-auto rounded-md border p-3 text-xs ${tone === "destructive" ? "border-destructive/30 bg-destructive/10" : "bg-muted/30"}`, children: children })] }));
+}
+function JsonSection({ title, value }) {
+    if (!value)
+        return null;
+    return _jsx(LogSection, { title: title, children: JSON.stringify(value, null, 2) });
+}
+function BodySection({ title, value }) {
+    if (!value)
+        return null;
+    return _jsx(LogSection, { title: title, children: value });
+}
+function readRecord(value) {
+    return value && typeof value === "object" && !Array.isArray(value)
+        ? value
+        : null;
+}
+function formatDateTime(value) {
+    return value ? new Date(value).toLocaleString() : "—";
+}
+function formatTarget(delivery) {
+    const targetId = delivery.bookingId ??
+        delivery.invoiceId ??
+        delivery.paymentSessionId ??
+        delivery.personId ??
+        delivery.organizationId ??
+        delivery.targetId;
+    return targetId ? `${delivery.targetType}:${targetId}` : delivery.targetType;
 }

package/dist/components/notification-reminder-rule-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification-reminder-rule-dialog.d.ts","sourceRoot":"","sources":["../../src/components/notification-reminder-rule-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,8BAA8B,EAGpC,MAAM,+BAA+B,CAAA;AA6BtC,KAAK,mCAAmC,GAAG;IACzC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,IAAI,CAAC,EAAE,8BAA8B,CAAA;IACrC,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,SAAS,GACV,EAAE,mCAAmC,2CA8NrC"}
+{"version":3,"file":"notification-reminder-rule-dialog.d.ts","sourceRoot":"","sources":["../../src/components/notification-reminder-rule-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,8BAA8B,EAGpC,MAAM,+BAA+B,CAAA;AAgDtC,KAAK,mCAAmC,GAAG;IACzC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,IAAI,CAAC,EAAE,8BAA8B,CAAA;IACrC,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,SAAS,GACV,EAAE,mCAAmC,2CAiNrC"}

package/dist/components/notification-reminder-rule-dialog.js

@@ -13,16 +13,32 @@ import { Label } from "./label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
 const reminderRuleFormSchema = 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"),
     status: z.enum(["draft", "active", "archived"]).default("draft"),
-    targetType: z.enum(["booking_payment_schedule", "invoice"]),
+    targetType: z.enum([
+        "booking_confirmed",
+        "booking_payment_schedule",
+        "payment_complete",
+        "booking_cancelled_non_payment",
+    ]),
     channel: z.enum(["email", "sms"]),
     templateId: z.string().min(1, "Template is required"),
     relativeDaysFromDueDate: z.number().int().min(-365).max(365),
 });
+const reminderTargetOptions = [
+    { value: "booking_confirmed", label: "Booking confirmed" },
+    { value: "payment_complete", label: "Payment complete" },
+    { value: "booking_cancelled_non_payment", label: "Booking cancelled (non-payment)" },
+    { value: "booking_payment_schedule", label: "Booking payment schedule" },
+];
+const dueDateTargetTypes = new Set(["booking_payment_schedule"]);
+function slugifyReminderRule(value) {
+    const slug = value
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+    return slug || "notification-rule";
+}
 export function NotificationReminderRuleDialog({ open, onOpenChange, rule, onSuccess, }) {
     const isEditing = Boolean(rule);
     const { create, update } = useNotificationReminderRuleMutation();
@@ -30,7 +46,6 @@ export function NotificationReminderRuleDialog({ open, onOpenChange, rule, onSuc
         resolver: zodResolver(reminderRuleFormSchema),
         defaultValues: {
             name: "",
-            slug: "",
             status: "draft",
             targetType: "booking_payment_schedule",
             channel: "email",
@@ -39,6 +54,8 @@ export function NotificationReminderRuleDialog({ open, onOpenChange, rule, onSuc
         },
     });
     const channel = form.watch("channel");
+    const targetType = form.watch("targetType");
+    const usesDueDateTiming = dueDateTargetTypes.has(targetType);
     const { data: templates } = useNotificationTemplates({
         channel,
         status: "active",
@@ -54,9 +71,8 @@ export function NotificationReminderRuleDialog({ open, onOpenChange, rule, onSuc
                     : "");
             form.reset({
                 name: rule.name,
-                slug: rule.slug,
                 status: rule.status,
-                targetType: rule.targetType,
+                targetType: rule.targetType === "invoice" ? "booking_payment_schedule" : rule.targetType,
                 channel: rule.channel,
                 templateId: resolvedTemplateId,
                 relativeDaysFromDueDate: rule.relativeDaysFromDueDate,
@@ -70,14 +86,17 @@ export function NotificationReminderRuleDialog({ open, onOpenChange, rule, onSuc
     const onSubmit = async (values) => {
         const payload = {
             name: values.name,
-            slug: values.slug,
+            slug: rule?.slug ??
+                `${slugifyReminderRule(values.targetType)}-${slugifyReminderRule(values.name)}`,
             status: values.status,
             targetType: values.targetType,
             channel: values.channel,
             provider: null,
             templateId: values.templateId,
             templateSlug: null,
-            relativeDaysFromDueDate: values.relativeDaysFromDueDate,
+            relativeDaysFromDueDate: dueDateTargetTypes.has(values.targetType)
+                ? values.relativeDaysFromDueDate
+                : 0,
             isSystem: rule?.isSystem ?? false,
             metadata: rule?.metadata ?? null,
         };
@@ -90,32 +109,19 @@ export function NotificationReminderRuleDialog({ open, onOpenChange, rule, onSuc
         onSuccess();
     };
     const isPending = create.isPending || update.isPending;
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? "Edit Reminder Rule" : "New Reminder Rule" }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Name" }), _jsx(Input, { ...form.register("name"), placeholder: "Invoice due in 3 days" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Slug" }), _jsx(Input, { ...form.register("slug"), placeholder: "invoice-due-minus-3" })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Target" }), _jsxs(Select, { items: [
-                                                        { label: "Booking payment schedule", value: "booking_payment_schedule" },
-                                                        { label: "Invoice", value: "invoice" },
-                                                    ], value: form.watch("targetType"), onValueChange: (value) => {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? "Edit Reminder Rule" : "New Reminder Rule" }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Name" }), _jsx(Input, { ...form.register("name"), placeholder: "Payment due in 3 days" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Target" }), _jsxs(Select, { value: form.watch("targetType"), onValueChange: (value) => {
                                                         if (!value)
                                                             return;
                                                         form.setValue("targetType", value);
-                                                    }, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "booking_payment_schedule", children: "Booking payment schedule" }), _jsx(SelectItem, { value: "invoice", children: "Invoice" })] })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Status" }), _jsxs(Select, { items: [
-                                                        { label: "Draft", value: "draft" },
-                                                        { label: "Active", value: "active" },
-                                                        { label: "Archived", value: "archived" },
-                                                    ], value: form.watch("status"), onValueChange: (value) => {
+                                                    }, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: reminderTargetOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Status" }), _jsxs(Select, { value: form.watch("status"), onValueChange: (value) => {
                                                         if (!value)
                                                             return;
                                                         form.setValue("status", value);
-                                                    }, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "draft", children: "Draft" }), _jsx(SelectItem, { value: "active", children: "Active" }), _jsx(SelectItem, { value: "archived", children: "Archived" })] })] })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Channel" }), _jsxs(Select, { items: [
-                                                        { label: "Email", value: "email" },
-                                                        { label: "SMS", value: "sms" },
-                                                    ], value: form.watch("channel"), onValueChange: (value) => {
+                                                    }, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "draft", children: "Draft" }), _jsx(SelectItem, { value: "active", children: "Active" }), _jsx(SelectItem, { value: "archived", children: "Archived" })] })] })] })] }), _jsxs("div", { className: usesDueDateTiming ? "grid grid-cols-2 gap-4" : "grid gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Channel" }), _jsxs(Select, { value: form.watch("channel"), onValueChange: (value) => {
                                                         if (!value)
                                                             return;
                                                         form.setValue("channel", value);
-                                                    }, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "email", children: "Email" }), _jsx(SelectItem, { value: "sms", children: "SMS" })] })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Offset days" }), _jsx(Input, { type: "number", value: form.watch("relativeDaysFromDueDate"), onChange: (event) => form.setValue("relativeDaysFromDueDate", Number.parseInt(event.target.value || "0", 10)) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Template" }), _jsxs(Select, { items: (templates?.data ?? []).map((template) => ({
-                                                label: `${template.name} (${template.slug})`,
-                                                value: template.id,
-                                            })), value: form.watch("templateId"), onValueChange: (value) => {
+                                                    }, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "email", children: "Email" }), _jsx(SelectItem, { value: "sms", children: "SMS" })] })] })] }), usesDueDateTiming ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Send timing" }), _jsx(Input, { type: "number", value: form.watch("relativeDaysFromDueDate"), onChange: (event) => form.setValue("relativeDaysFromDueDate", Number.parseInt(event.target.value || "0", 10)) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Days from due date: -3 sends 3 days before, 0 on the due date, 3 after." })] })) : null] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Template" }), _jsxs(Select, { value: form.watch("templateId"), onValueChange: (value) => {
                                                 if (!value)
                                                     return;
                                                 form.setValue("templateId", value);

package/dist/components/notification-reminder-rules-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification-reminder-rules-page.d.ts","sourceRoot":"","sources":["../../src/components/notification-reminder-rules-page.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,6BAA6B,4CA0J5C"}
+{"version":3,"file":"notification-reminder-rules-page.d.ts","sourceRoot":"","sources":["../../src/components/notification-reminder-rules-page.tsx"],"names":[],"mappings":"AAyCA,wBAAgB,6BAA6B,4CA+J5C"}

package/dist/components/notification-reminder-rules-page.js

@@ -8,6 +8,27 @@ import { Button } from "./button";
 import { Input } from "./input";
 import { NotificationReminderRuleDialog } from "./notification-reminder-rule-dialog";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+const reminderTargetLabels = {
+    booking_confirmed: "Booking confirmed",
+    booking_payment_schedule: "Booking payment schedule",
+    payment_complete: "Payment complete",
+    booking_cancelled_non_payment: "Booking cancelled (non-payment)",
+};
+const dueDateTargetTypes = new Set([
+    "booking_payment_schedule",
+]);
+function getReminderTargetLabel(targetType) {
+    if (targetType === "invoice")
+        return "Invoice";
+    return reminderTargetLabels[targetType] ?? targetType;
+}
+function formatReminderTiming(targetType, days) {
+    if (!dueDateTargetTypes.has(targetType))
+        return "Event";
+    if (days === 0)
+        return "Due date";
+    return days < 0 ? `${Math.abs(days)} days before` : `${days} days after`;
+}
 export function NotificationReminderRulesPage() {
     const [search, setSearch] = useState("");
     const [channel, setChannel] = useState("all");
@@ -21,10 +42,10 @@ export function NotificationReminderRulesPage() {
         status: status === "all" ? undefined : status,
         targetType: targetType === "all" ? undefined : targetType,
     });
-    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: "Reminder Rules" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Schedule invoice and payment reminders against templates and channels." })] }), _jsxs(Button, { onClick: () => {
+    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: "Reminder Rules" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Schedule booking payment reminders and event notifications against templates and channels." })] }), _jsxs(Button, { onClick: () => {
                             setEditing(undefined);
                             setDialogOpen(true);
-                        }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "New Rule"] })] }), _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: "Search rules...", value: search, onChange: (event) => setSearch(event.target.value), className: "pl-9" })] }), _jsxs(Select, { value: targetType, onValueChange: (value) => setTargetType(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-[190px]", children: _jsx(SelectValue, { placeholder: "Target" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "All targets" }), _jsx(SelectItem, { value: "booking_payment_schedule", children: "Booking payment schedule" }), _jsx(SelectItem, { value: "invoice", children: "Invoice" })] })] }), _jsxs(Select, { value: channel, onValueChange: (value) => setChannel(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-[140px]", children: _jsx(SelectValue, { placeholder: "Channel" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "All channels" }), _jsx(SelectItem, { value: "email", children: "Email" }), _jsx(SelectItem, { value: "sms", children: "SMS" })] })] }), _jsxs(Select, { value: status, onValueChange: (value) => setStatus(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-[140px]", children: _jsx(SelectValue, { placeholder: "Status" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "All statuses" }), _jsx(SelectItem, { value: "draft", children: "Draft" }), _jsx(SelectItem, { value: "active", children: "Active" }), _jsx(SelectItem, { value: "archived", children: "Archived" })] })] })] }), 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: "No reminder rules yet." }) })) : 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: "Rule" }), _jsx("th", { className: "px-4 py-3", children: "Target" }), _jsx("th", { className: "px-4 py-3", children: "Channel" }), _jsx("th", { className: "px-4 py-3", children: "Offset" }), _jsx("th", { className: "px-4 py-3", children: "Status" }), _jsx("th", { className: "px-4 py-3 text-right", children: "Actions" })] }) }), _jsx("tbody", { children: data.data.map((rule) => (_jsxs("tr", { className: "border-t", children: [_jsxs("td", { className: "px-4 py-3", children: [_jsx("div", { className: "font-medium", children: rule.name }), _jsx("div", { className: "font-mono text-xs text-muted-foreground", children: rule.slug })] }), _jsx("td", { className: "px-4 py-3", children: rule.targetType }), _jsx("td", { className: "px-4 py-3", children: _jsx(Badge, { variant: "outline", children: rule.channel }) }), _jsxs("td", { className: "px-4 py-3", children: [rule.relativeDaysFromDueDate, " days"] }), _jsx("td", { className: "px-4 py-3", children: _jsx(Badge, { variant: rule.status === "active" ? "default" : "secondary", children: rule.status }) }), _jsx("td", { className: "px-4 py-3 text-right", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                        }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "New Rule"] })] }), _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: "Search rules...", value: search, onChange: (event) => setSearch(event.target.value), className: "pl-9" })] }), _jsxs(Select, { value: targetType, onValueChange: (value) => setTargetType(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-[190px]", children: _jsx(SelectValue, { placeholder: "Target" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "All targets" }), Object.entries(reminderTargetLabels).map(([value, label]) => (_jsx(SelectItem, { value: value, children: label }, value)))] })] }), _jsxs(Select, { value: channel, onValueChange: (value) => setChannel(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-[140px]", children: _jsx(SelectValue, { placeholder: "Channel" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "All channels" }), _jsx(SelectItem, { value: "email", children: "Email" }), _jsx(SelectItem, { value: "sms", children: "SMS" })] })] }), _jsxs(Select, { value: status, onValueChange: (value) => setStatus(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-[140px]", children: _jsx(SelectValue, { placeholder: "Status" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "All statuses" }), _jsx(SelectItem, { value: "draft", children: "Draft" }), _jsx(SelectItem, { value: "active", children: "Active" }), _jsx(SelectItem, { value: "archived", children: "Archived" })] })] })] }), 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: "No reminder rules yet." }) })) : 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: "Rule" }), _jsx("th", { className: "px-4 py-3", children: "Target" }), _jsx("th", { className: "px-4 py-3", children: "Channel" }), _jsx("th", { className: "px-4 py-3", children: "Timing" }), _jsx("th", { className: "px-4 py-3", children: "Status" }), _jsx("th", { className: "px-4 py-3 text-right", children: "Actions" })] }) }), _jsx("tbody", { children: data.data.map((rule) => (_jsxs("tr", { className: "border-t", children: [_jsx("td", { className: "px-4 py-3", children: _jsx("div", { className: "font-medium", children: rule.name }) }), _jsx("td", { className: "px-4 py-3", children: getReminderTargetLabel(rule.targetType) }), _jsx("td", { className: "px-4 py-3", children: _jsx(Badge, { variant: "outline", children: rule.channel }) }), _jsx("td", { className: "px-4 py-3", children: formatReminderTiming(rule.targetType, rule.relativeDaysFromDueDate) }), _jsx("td", { className: "px-4 py-3", children: _jsx(Badge, { variant: rule.status === "active" ? "default" : "secondary", children: rule.status }) }), _jsx("td", { className: "px-4 py-3 text-right", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
                                                 setEditing(rule);
                                                 setDialogOpen(true);
                                             }, children: _jsx(Pencil, { className: "h-4 w-4" }) }) })] }, rule.id))) })] }) })) : null, _jsx(NotificationReminderRuleDialog, { open: dialogOpen, onOpenChange: setDialogOpen, rule: editing, onSuccess: () => {

package/dist/components/notification-template-dialog.d.ts

@@ -5,6 +5,6 @@ type NotificationTemplateDialogProps = {
     template?: NotificationTemplateRecord;
     onSuccess: () => void;
 };
-export declare function NotificationTemplateDialog({ open, onOpenChange, template, onSuccess, }: NotificationTemplateDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationTemplateDialog(props: NotificationTemplateDialogProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=notification-template-dialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"notification-template-dialog.d.ts","sourceRoot":"","sources":["../../src/components/notification-template-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,0BAA0B,EAIhC,MAAM,+BAA+B,CAAA;AAkDtC,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;AAuED,wBAAgB,0BAA0B,CAAC,EACzC,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,SAAS,GACV,EAAE,+BAA+B,2CAghBjC"}
+{"version":3,"file":"notification-template-dialog.d.ts","sourceRoot":"","sources":["../../src/components/notification-template-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,0BAA0B,EAIhC,MAAM,+BAA+B,CAAA;AA+DtC,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"}

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

@@ -2,12 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useNotificationTemplateAuthoring, useNotificationTemplateMutation, useNotificationTemplateTools, } from "@voyantjs/notifications-react";
 import { Loader2 } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod/v4";
 import { zodResolver } from "../lib/zod-resolver";
 import { Button } from "./button";
+import { Checkbox } from "./checkbox";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "./index";
 import { Input } from "./input";
 import { Label } from "./label";
@@ -15,7 +16,6 @@ import { NotificationTemplateAuthoringHelp } from "./notification-template-autho
 import { RichTextEditor } from "./rich-text-editor";
 import { insertPlainText, insertVariableToken } from "./rich-text-variable-extension";
 import { ScrollArea } from "./scroll-area";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
 import { Switch } from "./switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
 import { Textarea } from "./textarea";
@@ -28,6 +28,13 @@ const STATUS_ITEMS = [
     { label: "Active", value: "active" },
     { label: "Archived", value: "archived" },
 ];
+const ATTACHMENT_ITEMS = [
+    { label: "Contract", value: "contract" },
+    { label: "Invoice", value: "invoice" },
+    { label: "Brochure", value: "brochure" },
+];
+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
@@ -40,6 +47,7 @@ const templateFormSchema = z.object({
     htmlTemplate: z.string().optional(),
     textTemplate: z.string().optional(),
     fromAddress: z.string().optional(),
+    attachments: z.array(templateAttachmentSchema).default([]),
     active: z.boolean(),
 });
 function parsePath(path) {
@@ -100,10 +108,44 @@ function appendTemplateValue(current, addition) {
 function variableReference(key) {
     return `{{ ${key} }}`;
 }
-export function NotificationTemplateDialog({ open, onOpenChange, template, onSuccess, }) {
+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_ITEMS.map((item) => item.value));
+    return ATTACHMENT_ITEMS.map((item) => item.value).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 { 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");
@@ -128,10 +170,14 @@ export function NotificationTemplateDialog({ open, onOpenChange, template, onSuc
             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({
@@ -143,6 +189,7 @@ export function NotificationTemplateDialog({ open, onOpenChange, template, onSuc
                 htmlTemplate: template.htmlTemplate ?? "",
                 textTemplate: template.textTemplate ?? "",
                 fromAddress: template.fromAddress ?? "",
+                attachments: template.channel === "email" ? readTemplateAttachments(template.metadata) : [],
                 active: template.status === "active",
             });
             return;
@@ -154,16 +201,28 @@ export function NotificationTemplateDialog({ open, onOpenChange, template, onSuc
     useEffect(() => {
         if (!open)
             return;
-        setInsertionTarget((current) => channel === "sms" ? "text" : current === "text" ? "body" : current);
+        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("");
-        preview.reset();
-        testSend.reset();
-    }, [defaultPreviewData, open, preview, testSend]);
+        previewResetRef.current();
+        testSendResetRef.current();
+    }, [defaultPreviewData, open]);
     const onSubmit = async (values) => {
         const payload = {
             name: values.name,
@@ -173,10 +232,12 @@ export function NotificationTemplateDialog({ open, onOpenChange, template, onSuc
             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.textTemplate || null,
+            textTemplate: values.channel === "sms" ? values.textTemplate || null : null,
             fromAddress: values.channel === "email" ? values.fromAddress || null : null,
             isSystem: template?.isSystem ?? false,
-            metadata: template?.metadata ?? null,
+            metadata: values.channel === "email"
+                ? buildTemplateMetadata(template?.metadata, values.attachments)
+                : buildTemplateMetadata(template?.metadata, []),
         };
         if (isEditing && template) {
             await update.mutateAsync({ id: template.id, input: payload });
@@ -229,7 +290,7 @@ export function NotificationTemplateDialog({ open, onOpenChange, template, onSuc
                 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: form.getValues("textTemplate") || null,
+                textTemplate: channel === "sms" ? form.getValues("textTemplate") || null : null,
                 data,
             });
         }
@@ -251,7 +312,7 @@ export function NotificationTemplateDialog({ open, onOpenChange, template, onSuc
                 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: form.getValues("textTemplate") || null,
+                text: channel === "sms" ? form.getValues("textTemplate") || null : null,
                 data,
                 targetType: "other",
             });
@@ -261,36 +322,45 @@ export function NotificationTemplateDialog({ open, onOpenChange, template, onSuc
             toast.error(error instanceof Error ? error.message : "Test send failed");
         }
     };
-    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 ? "Edit Notification Template" : "New Notification Template" }) }), _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: "Name" }), _jsx(Input, { ...form.register("name"), placeholder: "Booking confirmation" }), 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: "Slug" }), _jsx(Input, { ...form.register("slug"), placeholder: "booking-confirmation" }), 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: "Channel" }), _jsxs(Select, { items: CHANNEL_ITEMS, value: form.watch("channel"), onValueChange: (value) => {
-                                                        if (!value)
+    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 ? "Edit Notification Template" : "New Notification Template" }) }), _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: "Name" }), _jsx(Input, { ...form.register("name"), placeholder: "Booking confirmation" }), 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: "Slug" }), _jsx(Input, { ...form.register("slug"), placeholder: "booking-confirmation" }), 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: "Channel" }), _jsx("select", { className: nativeSelectClassName, value: form.watch("channel"), onChange: (event) => {
+                                                        const nextChannel = event.target.value;
+                                                        if (form.getValues("channel") === nextChannel)
                                                             return;
-                                                        form.setValue("channel", value);
-                                                    }, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: CHANNEL_ITEMS.map((item) => (_jsx(SelectItem, { value: item.value, children: item.label }, item.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Status" }), _jsxs(Select, { items: STATUS_ITEMS, value: form.watch("status"), onValueChange: (value) => {
-                                                        if (!value)
+                                                        form.setValue("channel", nextChannel, {
+                                                            shouldDirty: true,
+                                                            shouldTouch: true,
+                                                            shouldValidate: true,
+                                                        });
+                                                    }, children: CHANNEL_ITEMS.map((item) => (_jsx("option", { value: item.value, children: item.label }, item.value))) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Status" }), _jsx("select", { className: nativeSelectClassName, value: form.watch("status"), onChange: (event) => {
+                                                        const nextStatus = event.target.value;
+                                                        if (form.getValues("status") === nextStatus)
                                                             return;
-                                                        form.setValue("status", value);
-                                                    }, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: STATUS_ITEMS.map((item) => (_jsx(SelectItem, { value: item.value, children: item.label }, item.value))) })] })] })] }), channel === "email" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "From address" }), _jsx(Input, { ...form.register("fromAddress"), placeholder: "reservations@example.com" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Subject" }), _jsx(Input, { ...form.register("subjectTemplate"), placeholder: "Your booking {{ booking.reference }}" })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "HTML body" }), _jsx(RichTextEditor, { value: form.watch("htmlTemplate") ?? "", onChange: (value) => form.setValue("htmlTemplate", value, {
+                                                        form.setValue("status", nextStatus, {
+                                                            shouldDirty: true,
+                                                            shouldTouch: true,
+                                                            shouldValidate: true,
+                                                        });
+                                                    }, children: STATUS_ITEMS.map((item) => (_jsx("option", { value: item.value, children: item.label }, item.value))) })] })] }), channel === "email" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Attachments" }), _jsx("div", { className: "flex flex-wrap gap-3", children: ATTACHMENT_ITEMS.map((item) => (_jsxs("div", { className: "flex h-9 items-center gap-2 rounded-md border px-3 text-sm", children: [_jsx(Checkbox, { id: `notification-template-attachment-${item.value}`, checked: attachments.includes(item.value), onCheckedChange: (checked) => setAttachmentSelected(item.value, checked === true) }), _jsx(Label, { htmlFor: `notification-template-attachment-${item.value}`, className: "cursor-pointer text-sm font-normal", children: item.label })] }, item.value))) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "From address" }), _jsx(Input, { ...form.register("fromAddress"), placeholder: "reservations@example.com" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Subject" }), _jsx(Input, { ...form.register("subjectTemplate"), placeholder: "Your booking {{ booking.reference }}" })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "HTML body" }), _jsx(RichTextEditor, { value: form.watch("htmlTemplate") ?? "", onChange: (value) => form.setValue("htmlTemplate", value, {
                                                         shouldDirty: true,
                                                         shouldTouch: true,
                                                         shouldValidate: true,
-                                                    }), placeholder: "Compose the email body using Liquid variables...", enableVariables: true, onEditorReady: setEditorInstance })] })] })) : null, _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: channel === "sms" ? "SMS body" : "Plain-text fallback" }), _jsx(Textarea, { ...form.register("textTemplate"), placeholder: channel === "sms"
-                                                ? 'Hi {{ traveler.firstName | default: "traveler" }}, your booking is confirmed.'
-                                                : "Optional plain-text version for email clients.", rows: 6, className: "font-mono text-xs" })] }), _jsxs(Tabs, { defaultValue: "authoring", children: [_jsxs(TabsList, { className: "w-full", children: [_jsx(TabsTrigger, { value: "authoring", children: "Authoring" }), _jsx(TabsTrigger, { value: "preview", children: "Preview & Test" })] }), _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: "Insert into" }), _jsxs(Select, { items: [
-                                                                        ...(channel === "email"
-                                                                            ? [
-                                                                                { label: "Subject", value: "subject" },
-                                                                                { label: "HTML body", value: "body" },
-                                                                            ]
-                                                                            : []),
-                                                                        {
-                                                                            label: channel === "sms" ? "SMS body" : "Plain-text fallback",
-                                                                            value: "text",
-                                                                        },
-                                                                    ], value: insertionTarget, onValueChange: (value) => {
-                                                                        if (!value)
+                                                    }), placeholder: "Compose the email body using Liquid variables...", enableVariables: true, onEditorReady: setEditorInstance })] })] })) : null, channel === "sms" ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "SMS body" }), _jsx(Textarea, { ...form.register("textTemplate"), placeholder: 'Hi {{ traveler.firstName | default: "traveler" }}, your booking is confirmed.', rows: 6, className: "font-mono text-xs" })] })) : null, _jsxs(Tabs, { defaultValue: "authoring", children: [_jsxs(TabsList, { className: "w-full", children: [_jsx(TabsTrigger, { value: "authoring", children: "Authoring" }), _jsx(TabsTrigger, { value: "preview", children: "Preview & Test" })] }), _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: "Insert into" }), _jsxs("select", { className: nativeSelectClassName, value: insertionTarget, onChange: (event) => {
+                                                                        const nextTarget = event.target.value;
+                                                                        if (nextTarget === insertionTarget)
                                                                             return;
-                                                                        setInsertionTarget(value);
-                                                                    }, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [channel === "email" ? (_jsx(SelectItem, { value: "subject", children: "Subject" })) : null, channel === "email" ? (_jsx(SelectItem, { value: "body", children: "HTML body" })) : null, _jsx(SelectItem, { value: "text", children: channel === "sms" ? "SMS body" : "Plain-text fallback" })] })] })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Variables insert as Liquid tags in text fields and as inline chips in the rich-text HTML body." })] }), _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: "Preview data (JSON)" }), _jsx(Textarea, { value: previewDataInput, onChange: (event) => setPreviewDataInput(event.target.value), rows: 14, className: "font-mono text-xs", placeholder: '{"booking":{"reference":"BKG-2026-00125"}}' }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Use sample JSON to preview Liquid rendering and send a safe test message." })] }), _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, "Refresh Preview"] }) }), _jsxs("div", { className: "space-y-3 rounded-md border p-4", children: [_jsx("div", { className: "text-sm font-medium", children: "Rendered preview" }), 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: "Subject" }), _jsx("div", { className: "rounded-md border bg-muted/20 px-3 py-2 text-sm", children: preview.data?.subject || "No subject rendered yet." })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "HTML body" }), _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", 
+                                                                        setInsertionTarget(nextTarget);
+                                                                    }, children: [channel === "email" ? _jsx("option", { value: "subject", children: "Subject" }) : null, channel === "email" ? _jsx("option", { value: "body", children: "HTML body" }) : null, channel === "sms" ? _jsx("option", { value: "text", children: "SMS body" }) : null] })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Variables insert as Liquid tags in text fields and as inline chips in the rich-text HTML body." })] }), _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: "Preview data (JSON)" }), _jsx(Textarea, { value: previewDataInput, onChange: (event) => setPreviewDataInput(event.target.value), rows: 14, className: "font-mono text-xs", placeholder: '{"booking":{"reference":"BKG-2026-00125"}}' }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Use sample JSON to preview Liquid rendering and send a safe test message." })] }), _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, "Refresh Preview"] }) }), _jsxs("div", { className: "space-y-3 rounded-md border p-4", children: [_jsx("div", { className: "text-sm font-medium", children: "Rendered preview" }), 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: "Subject" }), _jsx("div", { className: "rounded-md border bg-muted/20 px-3 py-2 text-sm", children: preview.data?.subject || "No subject rendered yet." })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "HTML body" }), _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: "No HTML content rendered yet." })) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Plain-text fallback" }), _jsx("pre", { className: "whitespace-pre-wrap rounded-md border bg-muted/20 px-3 py-3 text-xs", children: preview.data?.text || "No plain-text content rendered yet." })] })] })) : (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "SMS body" }), _jsx("pre", { className: "whitespace-pre-wrap rounded-md border bg-muted/20 px-3 py-3 text-xs", children: preview.data?.text || "No SMS content rendered yet." })] }))] })] }), _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: "Test send" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Sends the current unsaved content through the configured provider path." })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: channel === "email" ? "Recipient email" : "Recipient phone" }), _jsx(Input, { value: testRecipient, onChange: (event) => setTestRecipient(event.target.value), placeholder: channel === "email" ? "qa@example.com" : "+40 721 111 222" })] }), _jsxs("div", { className: "space-y-1 text-xs text-muted-foreground", children: [_jsx("div", { children: "Provider is selected automatically by the app runtime." }), channel === "email" ? (_jsxs("div", { children: ["From: ", form.watch("fromAddress") || "Default sender"] })) : 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, "Send Test ", channel === "email" ? "Email" : "SMS"] }), 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: "Mark template active after saving" })] })] }) }), _jsxs(DialogFooter, { className: "mt-0", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: "Cancel" }), _jsxs(Button, { type: "submit", disabled: isPending, children: [isPending ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, isEditing ? "Save Changes" : "Create Template"] })] })] }) }) }));
+                                                                                            dangerouslySetInnerHTML: { __html: preview.data.html } })) : (_jsx("div", { className: "px-3 py-3 text-sm text-muted-foreground", children: "No HTML content rendered yet." })) })] })] })) : (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "SMS body" }), _jsx("pre", { className: "whitespace-pre-wrap rounded-md border bg-muted/20 px-3 py-3 text-xs", children: preview.data?.text || "No SMS content rendered yet." })] }))] })] }), _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: "Test send" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Sends the current unsaved content through the configured provider path." })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: channel === "email" ? "Recipient email" : "Recipient phone" }), _jsx(Input, { value: testRecipient, onChange: (event) => setTestRecipient(event.target.value), placeholder: channel === "email" ? "qa@example.com" : "+40 721 111 222" })] }), _jsxs("div", { className: "space-y-1 text-xs text-muted-foreground", children: [_jsx("div", { children: "Provider is selected automatically by the app runtime." }), channel === "email" ? (_jsxs("div", { children: ["From: ", form.watch("fromAddress") || "Default sender"] })) : 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, "Send Test ", channel === "email" ? "Email" : "SMS"] }), 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: "Mark template active after saving" })] })] }) }), _jsxs(DialogFooter, { className: "mt-0", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: "Cancel" }), _jsxs(Button, { type: "submit", disabled: isPending, children: [isPending ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, isEditing ? "Save Changes" : "Create Template"] })] })] }) }) }));
 }

package/dist/components/rich-text-variable-extension.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rich-text-variable-extension.d.ts","sourceRoot":"","sources":["../../src/components/rich-text-variable-extension.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAA8B,IAAI,EAAa,MAAM,cAAc,CAAA;AAK1E,eAAO,MAAM,gBAAgB,gBA+H3B,CAAA;AAEF,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,WAS9D;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAK3D"}
+{"version":3,"file":"rich-text-variable-extension.d.ts","sourceRoot":"","sources":["../../src/components/rich-text-variable-extension.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAA8B,IAAI,EAAa,MAAM,cAAc,CAAA;AAU1E,eAAO,MAAM,gBAAgB,gBA8H3B,CAAA;AAEF,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,WAS9D;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAK3D"}

package/dist/components/rich-text-variable-extension.js

@@ -1,6 +1,11 @@
 import { InputRule, mergeAttributes, Node, PasteRule } from "@tiptap/core";
 const variableInputRegex = /(?:^|\s)(\{\{\s*([^}]+)\s*\}\})$/;
-const variablePasteRegex = /(?:^|\s)(\{\{\s*([^}]+)\s*\}\})/g;
+// Paste accepts `{{ ... }}` regardless of what precedes it. The
+// live-typing rule above keeps requiring whitespace so we don't gobble
+// braces mid-word, but pasted content commonly has the variable
+// tucked between punctuation (`Document ({{ customer.document.type }}):`,
+// `["{{ foo }}"]`, etc.) and we still want those tokenised.
+const variablePasteRegex = /\{\{\s*([^}]+?)\s*\}\}/g;
 export const RichTextVariable = Node.create({
     name: "variable",
     group: "inline",
@@ -88,11 +93,10 @@ export const RichTextVariable = Node.create({
             new PasteRule({
                 find: variablePasteRegex,
                 handler: ({ state, range, match }) => {
-                    if (!match[2])
+                    if (!match[1])
                         return;
-                    const variableContent = match[2].trim();
-                    const addedPosition = match[0].startsWith(" ") ? 1 : 0;
-                    state.tr.replaceWith(range.from + addedPosition, range.to, this.type.create({
+                    const variableContent = match[1].trim();
+                    state.tr.replaceWith(range.from, range.to, this.type.create({
                         content: variableContent,
                     }));
                 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voyantjs/ui",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "license": "Apache-2.0",
   "type": "module",
   "sideEffects": false,
@@ -35,10 +35,10 @@
     "tw-animate-css": "^1.3.5",
     "vaul": "^1.1.2",
     "zod": "^4.3.6",
-    "@voyantjs/i18n": "0.20.0",
-    "@voyantjs/notifications": "0.20.0",
-    "@voyantjs/notifications-react": "0.20.0",
-    "@voyantjs/utils": "0.20.0"
+    "@voyantjs/notifications": "0.21.0",
+    "@voyantjs/notifications-react": "0.21.0",
+    "@voyantjs/i18n": "0.21.0",
+    "@voyantjs/utils": "0.21.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.11",