@rapidmx/crm-plugin 0.1.0

package/dist/apps/shared/components/deals/PipelineManager.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import Alert from "@rapidmx/web-client/lib/components/feedback/Alert.js";
+import Button from "@rapidmx/web-client/lib/components/buttons/Button.js";
+import { createPipeline, deletePipeline, errorMessage, listPipelines, updatePipeline } from "../../crmApi.js";
+import { INPUT_CLASS, useCrm } from "../CrmShell.js";
+/**
+ * A workspace's pipelines and their stages: renaming, reordering, adding and removing stages (each with its probability, kind and
+ * "rotting" days), choosing the default pipeline, and creating and deleting pipelines. Changing them takes an admin; everyone sees
+ * them.
+ */
+export default function PipelineManager() {
+    const { workspace, canManage } = useCrm();
+    const [pipelines, setPipelines] = useState([]);
+    const [error, setError] = useState(null);
+    async function load() {
+        try {
+            setPipelines(await listPipelines(workspace.uid));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not load the pipelines."));
+        }
+    }
+    useEffect(() => {
+        void load();
+    }, [workspace.uid]);
+    async function run(action, failure) {
+        setError(null);
+        try {
+            await action();
+            await load();
+        }
+        catch (err) {
+            setError(errorMessage(err, failure));
+        }
+    }
+    return (_jsxs("div", { className: "max-w-4xl", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: "Pipelines" }), canManage && (_jsx(Button, { type: "button", className: "!w-auto", onClick: () => {
+                            const name = window.prompt("Name of the new pipeline:", "");
+                            if (name?.trim()) {
+                                void run(() => createPipeline(workspace.uid, { name: name.trim() }), "Could not create the pipeline.");
+                            }
+                        }, children: "+ New pipeline" }))] }), error && _jsx(Alert, { children: error }), _jsx("div", { className: "flex flex-col gap-6", children: pipelines.map((pipeline) => (_jsx(PipelineEditor, { pipeline: pipeline, canManage: canManage, onSave: (input) => run(() => updatePipeline(workspace.uid, pipeline.uid, { ...input }), "Could not save the pipeline."), onDelete: () => {
+                        if (window.confirm(`Delete the pipeline "${pipeline.name}"?`)) {
+                            void run(() => deletePipeline(workspace.uid, pipeline.uid), "Could not delete the pipeline.");
+                        }
+                    } }, `${pipeline.uid}-${pipeline.version}`))) })] }));
+}
+function PipelineEditor({ pipeline, canManage, onSave, onDelete, }) {
+    const [name, setName] = useState(pipeline.name);
+    const [stages, setStages] = useState(pipeline.stages);
+    const change = (index, patch) => setStages(stages.map((stage, at) => (at === index ? { ...stage, ...patch } : stage)));
+    const moveStage = (index, delta) => {
+        const next = [...stages];
+        [next[index], next[index + delta]] = [next[index + delta], next[index]];
+        setStages(next);
+    };
+    return (_jsx("section", { "aria-label": pipeline.name, className: "border border-border rounded-sm p-4", children: _jsxs("fieldset", { disabled: !canManage, children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx("input", { "aria-label": "Pipeline name", className: `${INPUT_CLASS} !w-64 font-semibold`, value: name, onChange: (event) => setName(event.target.value) }), pipeline.isDefault ? (_jsx("span", { className: "text-xs rounded-full px-2 py-0.5 bg-primary-lightest text-primary-dark", children: "Default" })) : (canManage && (_jsx("button", { type: "button", className: "text-xs text-primary-dark hover:underline", onClick: () => void onSave({ isDefault: true }), children: "Make default" })))] }), _jsxs("table", { className: "w-full text-sm border-collapse mb-3", children: [_jsx("thead", { children: _jsx("tr", { children: ["Stage", "Probability %", "Kind", "Rotting after (days)", ""].map((heading) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-1 px-1.5 border-b border-border", children: heading }, heading))) }) }), _jsx("tbody", { children: stages.map((stage, index) => (_jsxs("tr", { children: [_jsx("td", { className: "py-1 px-1.5", children: _jsx("input", { "aria-label": `Stage ${index + 1} name`, className: INPUT_CLASS, value: stage.name, onChange: (event) => change(index, { name: event.target.value }) }) }), _jsx("td", { className: "py-1 px-1.5", children: _jsx("input", { "aria-label": `Stage ${index + 1} probability`, type: "number", min: 0, max: 100, className: `${INPUT_CLASS} !w-20`, value: stage.probability, onChange: (event) => change(index, { probability: Number(event.target.value) }) }) }), _jsx("td", { className: "py-1 px-1.5", children: _jsxs("select", { "aria-label": `Stage ${index + 1} kind`, className: `${INPUT_CLASS} !w-24`, value: stage.kind, onChange: (event) => change(index, { kind: event.target.value }), children: [_jsx("option", { value: "open", children: "Open" }), _jsx("option", { value: "won", children: "Won" }), _jsx("option", { value: "lost", children: "Lost" })] }) }), _jsx("td", { className: "py-1 px-1.5", children: _jsx("input", { "aria-label": `Stage ${index + 1} rotting days`, type: "number", min: 1, className: `${INPUT_CLASS} !w-20`, value: stage.rottingDays ?? "", onChange: (event) => change(index, { rottingDays: event.target.value ? Number(event.target.value) : null }) }) }), _jsx("td", { className: "py-1 px-1.5 whitespace-nowrap text-right", children: canManage && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": `Move stage ${index + 1} up`, disabled: index === 0, className: "px-1 disabled:opacity-30", onClick: () => moveStage(index, -1), children: "\u2191" }), _jsx("button", { type: "button", "aria-label": `Move stage ${index + 1} down`, disabled: index === stages.length - 1, className: "px-1 disabled:opacity-30", onClick: () => moveStage(index, 1), children: "\u2193" }), _jsx("button", { type: "button", "aria-label": `Remove stage ${index + 1}`, className: "px-1 text-danger", onClick: () => setStages(stages.filter((_stage, at) => at !== index)), children: "\u00D7" })] })) })] }, stage.id ?? `new-${index}`))) })] }), canManage && (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setStages([...stages, { name: "New stage", probability: 50, kind: "open" }]), children: "+ Add stage" }), _jsx(Button, { type: "button", className: "!w-auto", onClick: () => void onSave({ name: name.trim(), stages: stages.map(({ rottingDays, ...stage }) => ({ ...stage, ...(rottingDays ? { rottingDays } : {}) })) }), children: "Save" }), !pipeline.isDefault && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !text-danger ml-auto", onClick: onDelete, children: "Delete pipeline" }))] }))] }) }));
+}

package/dist/apps/shared/components/deals/dealUi.d.ts

@@ -0,0 +1,7 @@
+import type { Deal, PipelineStage } from "../../crmApi.js";
+/** An amount in `currency`, in the reader's locale, without cents. A code the browser doesn't know is shown as a suffix. */
+export declare function money(amount: number, currency: string): string;
+/** How many whole days a deal has been in its stage. */
+export declare function daysInStage(deal: Pick<Deal, "stageChangedAt">, now?: Date): number;
+/** Whether an open deal has been in its stage longer than the stage's rotting days. */
+export declare function isRotting(deal: Pick<Deal, "stageChangedAt" | "status">, stage: Pick<PipelineStage, "rottingDays"> | undefined, now?: Date): boolean;

package/dist/apps/shared/components/deals/dealUi.js

@@ -0,0 +1,17 @@
+/** An amount in `currency`, in the reader's locale, without cents. A code the browser doesn't know is shown as a suffix. */
+export function money(amount, currency) {
+    try {
+        return new Intl.NumberFormat(undefined, { style: "currency", currency, maximumFractionDigits: 0 }).format(amount);
+    }
+    catch {
+        return `${Math.round(amount).toLocaleString()} ${currency}`;
+    }
+}
+/** How many whole days a deal has been in its stage. */
+export function daysInStage(deal, now = new Date()) {
+    return Math.floor((now.getTime() - new Date(deal.stageChangedAt).getTime()) / 86400000);
+}
+/** Whether an open deal has been in its stage longer than the stage's rotting days. */
+export function isRotting(deal, stage, now = new Date()) {
+    return deal.status === "open" && !!stage?.rottingDays && daysInStage(deal, now) > stage.rottingDays;
+}

package/dist/apps/shared/components/designer/BlockView.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { DesignBlock, DesignTheme } from "../../crmApi.js";
+/**
+ * A block drawn on the designer's canvas, close to how the email shows it (the preview shows exactly). Text is the block's saved, sanitized
+ * HTML; a hand-written HTML block is shown as its code, since only the sandboxed preview may draw arbitrary HTML.
+ */
+export default function BlockView({ block, theme }: {
+    block: DesignBlock;
+    theme: DesignTheme;
+}): React.JSX.Element;

package/dist/apps/shared/components/designer/BlockView.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const HEADING_SIZES = { 1: 28, 2: 22, 3: 18 };
+/**
+ * A block drawn on the designer's canvas, close to how the email shows it (the preview shows exactly). Text is the block's saved, sanitized
+ * HTML; a hand-written HTML block is shown as its code, since only the sandboxed preview may draw arbitrary HTML.
+ */
+export default function BlockView({ block, theme }) {
+    const box = { textAlign: block.align, padding: block.padding ?? 8 };
+    switch (block.type) {
+        case "text":
+            return (_jsx("div", { style: { ...box, color: block.color ?? theme.textColor, fontSize: block.fontSize ?? 15, lineHeight: 1.5 }, 
+                // The server sanitizes text blocks on save, and the editor's schema only produces what it keeps.
+                dangerouslySetInnerHTML: { __html: block.html } }));
+        case "heading":
+            return (_jsx("div", { role: "heading", "aria-level": block.level, style: { ...box, color: block.color ?? theme.textColor, fontSize: HEADING_SIZES[block.level], fontWeight: 700 }, children: block.text }));
+        case "image":
+            return (_jsx("div", { style: box, children: block.src ? (_jsx("img", { src: block.src, alt: block.alt, style: { maxWidth: "100%", width: block.width, display: "inline-block" } })) : (_jsx("div", { className: "border border-dashed border-border py-8 text-center text-sm text-text-muted", children: "Choose an image in the settings" })) }));
+        case "button":
+            return (_jsx("div", { style: { ...box, textAlign: block.align ?? "center" }, children: _jsx("span", { style: {
+                        display: "inline-block",
+                        padding: "10px 25px",
+                        background: block.backgroundColor ?? theme.buttonColor,
+                        color: block.color ?? theme.buttonTextColor,
+                        borderRadius: block.borderRadius ?? 4,
+                    }, children: block.text }) }));
+        case "divider":
+            return (_jsx("div", { style: { padding: block.padding ?? 8 }, children: _jsx("hr", { style: { border: 0, borderTop: `${block.thickness ?? 1}px solid ${block.color ?? "#e5e7eb"}` } }) }));
+        case "spacer":
+            return _jsx("div", { "aria-label": "Spacer", style: { height: block.height } });
+        case "social":
+            return (_jsx("div", { style: { ...box, textAlign: block.align ?? "center" }, className: "text-sm", children: block.links.map((link, index) => (_jsx("span", { className: "inline-block mx-1 px-2 py-0.5 rounded-full bg-surface-alt", children: link.network }, index))) }));
+        case "html":
+            return (_jsx("pre", { style: box, className: "text-xs whitespace-pre-wrap break-all bg-surface-alt text-text-muted max-h-40 overflow-hidden", children: block.html }));
+        default:
+            return (_jsxs("div", { style: { ...box, textAlign: block.align ?? "center", color: block.color ?? "#6b7280", fontSize: 12 }, children: [block.note && _jsx("p", { style: { margin: "0 0 8px" }, children: block.note }), _jsx("p", { style: { margin: "0 0 8px" }, children: "{{ workspace.name }} · {{ workspace.postal_address }}" }), _jsxs("p", { style: { margin: 0 }, children: [_jsx("u", { children: "Unsubscribe" }), " \u00B7 ", _jsx("u", { children: "Email preferences" })] })] }));
+    }
+}

package/dist/apps/shared/components/designer/Canvas.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import type { DesignBlock, MergeTag, TemplateDesign } from "../../crmApi.js";
+/** What the designer has selected: a block, a section, or the theme. */
+export type Selection = {
+    kind: "block";
+    id: string;
+} | {
+    kind: "section";
+    id: string;
+} | {
+    kind: "theme";
+};
+export interface CanvasProps {
+    design: TemplateDesign;
+    selection: Selection;
+    onSelect: (selection: Selection) => void;
+    /** A changed design; `mergeKey` names a run of edits (typing in one block) that undo takes back together. */
+    onChange: (design: TemplateDesign, mergeKey?: string) => void;
+    mergeTags: MergeTag[];
+    /** Blocks with something to fix before saving. */
+    problemIds: Set<string>;
+    /** Offers `block` for saving as a reusable block; `undefined` when the caller can't. */
+    onSaveBlock?: (block: DesignBlock) => void;
+    readOnly: boolean;
+}
+/**
+ * The email being designed, drawn close to how it will look: sections of columns of blocks. Clicking selects a block or a section
+ * (its settings show in the inspector); a text block is edited in place. Blocks move by dragging their handle - within or between
+ * columns, by pointer or keyboard (Space, the arrows, Space) - or with their up and down buttons.
+ */
+export default function Canvas(props: CanvasProps): React.JSX.Element;

package/dist/apps/shared/components/designer/Canvas.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { HiOutlineArrowDown, HiOutlineArrowUp, HiOutlineBookmark, HiOutlineDocumentDuplicate, HiOutlineTrash } from "react-icons/hi2";
+import { MdDragIndicator } from "react-icons/md";
+import BlockView from "./BlockView.js";
+import LazyTextBlockEditor from "./LazyTextBlockEditor.js";
+import { blockLabel, dropBlock, duplicateBlock, nudgeBlock, nudgeSection, removeBlock, removeSection, updateBlock } from "./designModel.js";
+function ToolButton({ label, icon: Icon, onClick, disabled }) {
+    return (_jsx("button", { type: "button", title: label, "aria-label": label, disabled: disabled, onClick: (event) => {
+            event.stopPropagation();
+            onClick();
+        }, className: "p-1 rounded-sm text-text-muted hover:text-text hover:bg-surface-alt disabled:opacity-40", children: _jsx(Icon, { "aria-hidden": true, className: "w-4 h-4" }) }));
+}
+/** Selects on Enter or Space, for elements that select on click. */
+function selectOnKey(select) {
+    return (event) => {
+        if (event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            select();
+        }
+    };
+}
+function SortableBlock({ block, index, count, props }) {
+    const { design, selection, onSelect, onChange, mergeTags, problemIds, onSaveBlock, readOnly } = props;
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: block.id, disabled: readOnly });
+    const selected = selection.kind === "block" && selection.id === block.id;
+    const label = blockLabel(block.type);
+    return (_jsxs("div", { ref: setNodeRef, style: { transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined, transition, opacity: isDragging ? 0.5 : 1 }, className: `group relative outline-offset-[-1px] ${selected ? "outline outline-2 outline-primary" : "hover:outline hover:outline-1 hover:outline-primary/50"} ${problemIds.has(block.id) ? "outline outline-2 outline-danger" : ""}`, role: "group", "aria-label": `${label} block`, tabIndex: 0, onClick: (event) => {
+            event.stopPropagation();
+            onSelect({ kind: "block", id: block.id });
+        }, onKeyDown: selectOnKey(() => onSelect({ kind: "block", id: block.id })), children: [selected && !readOnly && (_jsxs("div", { className: "absolute -top-7 right-0 z-10 flex items-center gap-0.5 bg-surface border border-border rounded-sm shadow-sm px-0.5", children: [_jsx("button", { type: "button", "aria-label": `Drag ${label}`, title: "Drag", className: "p-1 cursor-grab text-text-muted", ...attributes, ...listeners, children: _jsx(MdDragIndicator, { "aria-hidden": true, className: "w-4 h-4" }) }), _jsx(ToolButton, { label: "Move up", icon: HiOutlineArrowUp, disabled: index === 0, onClick: () => onChange(nudgeBlock(design, block.id, -1)) }), _jsx(ToolButton, { label: "Move down", icon: HiOutlineArrowDown, disabled: index === count - 1, onClick: () => onChange(nudgeBlock(design, block.id, 1)) }), _jsx(ToolButton, { label: "Duplicate", icon: HiOutlineDocumentDuplicate, onClick: () => {
+                            const copy = duplicateBlock(design, block.id);
+                            onChange(copy.design);
+                            onSelect({ kind: "block", id: copy.id });
+                        } }), onSaveBlock && _jsx(ToolButton, { label: "Save for reuse", icon: HiOutlineBookmark, onClick: () => onSaveBlock(block) }), _jsx(ToolButton, { label: "Delete block", icon: HiOutlineTrash, onClick: () => {
+                            onChange(removeBlock(design, block.id));
+                            onSelect({ kind: "theme" });
+                        } })] })), selected && !readOnly && block.type === "text" ? (_jsx("div", { style: { padding: block.padding ?? 8, textAlign: block.align }, children: _jsx(LazyTextBlockEditor, { value: block.html, mergeTags: mergeTags, onChange: (html) => onChange(updateBlock(design, block.id, { html }), `text:${block.id}`) }, block.id) })) : (_jsx(BlockView, { block: block, theme: design.theme }))] }));
+}
+function Column({ column, props }) {
+    const { setNodeRef, isOver } = useDroppable({ id: column.id, disabled: props.readOnly });
+    return (_jsxs("div", { ref: setNodeRef, className: `flex-1 min-w-0 min-h-[3rem] ${isOver ? "bg-primary-lightest/40" : ""}`, children: [_jsx(SortableContext, { items: column.blocks.map((block) => block.id), strategy: verticalListSortingStrategy, children: column.blocks.map((block, index) => (_jsx(SortableBlock, { block: block, index: index, count: column.blocks.length, props: props }, block.id))) }), column.blocks.length === 0 && _jsx("div", { className: "m-2 border border-dashed border-border py-4 text-center text-xs text-text-muted", children: "Empty column" })] }));
+}
+function Section({ section, index, props }) {
+    const { design, selection, onSelect, onChange, readOnly } = props;
+    const selected = selection.kind === "section" && selection.id === section.id;
+    const tools = selected && !readOnly && (_jsxs("div", { className: "absolute top-0 -left-9 z-10 flex flex-col bg-surface border border-border rounded-sm shadow-sm", children: [_jsx(ToolButton, { label: "Move section up", icon: HiOutlineArrowUp, disabled: index === 0, onClick: () => onChange(nudgeSection(design, section.id, -1)) }), _jsx(ToolButton, { label: "Move section down", icon: HiOutlineArrowDown, disabled: index === design.sections.length - 1, onClick: () => onChange(nudgeSection(design, section.id, 1)) }), _jsx(ToolButton, { label: "Delete section", icon: HiOutlineTrash, onClick: () => {
+                    onChange(removeSection(design, section.id));
+                    onSelect({ kind: "theme" });
+                } })] }));
+    return (_jsxs("div", { role: "group", "aria-label": `Section ${index + 1}`, tabIndex: 0, className: `relative ${selected ? "outline outline-2 outline-dashed outline-primary" : "hover:outline hover:outline-1 hover:outline-dashed hover:outline-border"}`, style: { backgroundColor: section.backgroundColor ?? design.theme.contentBackgroundColor, padding: `${section.padding ?? 0}px 0` }, onClick: () => onSelect({ kind: "section", id: section.id }), onKeyDown: selectOnKey(() => onSelect({ kind: "section", id: section.id })), children: [tools, _jsx("div", { className: "flex gap-2", children: section.columns.map((column) => (_jsx(Column, { column: column, props: props }, column.id))) })] }));
+}
+/**
+ * The email being designed, drawn close to how it will look: sections of columns of blocks. Clicking selects a block or a section
+ * (its settings show in the inspector); a text block is edited in place. Blocks move by dragging their handle - within or between
+ * columns, by pointer or keyboard (Space, the arrows, Space) - or with their up and down buttons.
+ */
+export default function Canvas(props) {
+    const { design, onChange } = props;
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    function dragEnd(event) {
+        if (event.over) {
+            const next = dropBlock(design, String(event.active.id), String(event.over.id));
+            if (next !== design) {
+                onChange(next);
+            }
+        }
+    }
+    return (_jsx("div", { className: "py-8 px-10", style: { backgroundColor: design.theme.backgroundColor, fontFamily: design.theme.fontFamily }, onClick: () => props.onSelect({ kind: "theme" }), children: _jsxs("div", { className: "mx-auto", style: { maxWidth: design.theme.width }, onClick: (event) => event.stopPropagation(), children: [_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: dragEnd, children: design.sections.map((section, index) => (_jsx(Section, { section: section, index: index, props: props }, section.id))) }), design.sections.length === 0 && _jsx("p", { className: "py-12 text-center text-sm text-text-muted bg-surface", children: "Add a section from the panel on the left to start." })] }) }));
+}

package/dist/apps/shared/components/designer/Inspector.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import type { DesignBlock, DesignSection, DesignTheme, MergeTag } from "../../crmApi.js";
+export interface BlockInspectorProps {
+    block: DesignBlock;
+    theme: DesignTheme;
+    mergeTags: MergeTag[];
+    /** The caller may write hand-written HTML (workspace admins). */
+    canManage: boolean;
+    onChange: (patch: Partial<DesignBlock>) => void;
+}
+/** The settings of the selected block. */
+export declare function BlockInspector({ block, theme, mergeTags, canManage, onChange }: BlockInspectorProps): React.JSX.Element;
+/** The settings of the selected section. */
+export declare function SectionInspector({ section, theme, onChange, }: {
+    section: DesignSection;
+    theme: DesignTheme;
+    onChange: (patch: {
+        backgroundColor?: string;
+        padding?: number;
+        columns?: number;
+    }) => void;
+}): React.JSX.Element;
+/** The design's overall look. */
+export declare function ThemeInspector({ theme, onChange }: {
+    theme: DesignTheme;
+    onChange: (patch: Partial<DesignTheme>) => void;
+}): React.JSX.Element;

package/dist/apps/shared/components/designer/Inspector.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useId, useState } from "react";
+import { INPUT_CLASS } from "../CrmShell.js";
+import { blockLabel } from "./designModel.js";
+import MergeTagPicker from "./MergeTagPicker.js";
+const NETWORKS = ["facebook", "x", "linkedin", "instagram", "youtube", "github", "web"];
+/** One labelled setting. */
+function Field({ label, children, extra }) {
+    const id = useId();
+    return (_jsxs("div", { className: "mb-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 mb-1", children: [_jsx("label", { htmlFor: id, className: "text-xs font-semibold text-text-muted", children: label }), extra] }), children(id)] }));
+}
+function TextSetting({ label, value, onChange, mergeTags, multiline }) {
+    return (_jsx(Field, { label: label, extra: mergeTags && _jsx(MergeTagPicker, { tags: mergeTags, label: `Insert merge tag into ${label.toLowerCase()}`, onPick: (tag) => onChange(`${value}{{ ${tag} }}`) }), children: (id) => multiline ? (_jsx("textarea", { id: id, className: `${INPUT_CLASS} font-mono text-xs`, rows: 10, value: value, onChange: (event) => onChange(event.target.value) })) : (_jsx("input", { id: id, className: INPUT_CLASS, value: value, onChange: (event) => onChange(event.target.value) })) }));
+}
+/**
+ * A number setting. What's typed is kept as typed, and passed on once it's a whole number in range; emptying it clears the setting
+ * (`undefined`, the default). Leaving the field shows the setting again.
+ */
+function NumberSetting({ label, value, onChange, min, max }) {
+    const shown = value === undefined ? "" : String(value);
+    const [text, setText] = useState(shown);
+    useEffect(() => {
+        // The setting changed elsewhere (undo, say): show it, unless it's what's being typed.
+        setText((current) => (current === "" ? undefined : Number(current)) === value ? current : shown);
+    }, [value]);
+    return (_jsx(Field, { label: label, children: (id) => (_jsx("input", { id: id, type: "number", min: min, max: max, className: INPUT_CLASS, value: text, onBlur: () => setText(shown), onChange: (event) => {
+                const raw = event.target.value;
+                setText(raw);
+                const parsed = Number(raw);
+                if (raw === "") {
+                    onChange(undefined);
+                }
+                else if (Number.isInteger(parsed) && parsed >= min && parsed <= max) {
+                    onChange(parsed);
+                }
+            } })) }));
+}
+/** A colour setting: a picker, plus a button back to the default unless `required`. */
+function ColorSetting({ label, value, onChange, fallback, required, }) {
+    return (_jsx(Field, { label: label, extra: !required &&
+            value !== undefined && (_jsx("button", { type: "button", className: "text-xs text-primary-dark hover:underline", onClick: () => onChange(undefined), children: "Default" })), children: (id) => _jsx("input", { id: id, type: "color", className: "h-8 w-16 border border-border rounded-sm", value: value ?? fallback, onChange: (event) => onChange(event.target.value) }) }));
+}
+function AlignSetting({ value, onChange }) {
+    return (_jsx(Field, { label: "Alignment", children: (id) => (_jsxs("select", { id: id, className: INPUT_CLASS, value: value ?? "", onChange: (event) => onChange((event.target.value || undefined)), children: [_jsx("option", { value: "", children: "Default" }), _jsx("option", { value: "left", children: "Left" }), _jsx("option", { value: "center", children: "Center" }), _jsx("option", { value: "right", children: "Right" })] })) }));
+}
+/** The settings of the selected block. */
+export function BlockInspector({ block, theme, mergeTags, canManage, onChange }) {
+    const set = (patch) => onChange(patch);
+    const common = (_jsxs(_Fragment, { children: [block.type !== "spacer" && block.type !== "divider" && _jsx(AlignSetting, { value: block.align, onChange: (align) => set({ align }) }), block.type !== "spacer" && _jsx(NumberSetting, { label: "Padding (px)", value: block.padding, min: 0, max: 80, onChange: (padding) => set({ padding }) })] }));
+    let fields;
+    switch (block.type) {
+        case "text":
+            fields = (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-xs text-text-muted mb-3", children: "Edit the text on the canvas." }), _jsx(NumberSetting, { label: "Font size (px)", value: block.fontSize, min: 10, max: 48, onChange: (fontSize) => set({ fontSize }) }), _jsx(ColorSetting, { label: "Text colour", value: block.color, fallback: theme.textColor, onChange: (color) => set({ color }) })] }));
+            break;
+        case "heading":
+            fields = (_jsxs(_Fragment, { children: [_jsx(TextSetting, { label: "Heading", value: block.text, mergeTags: mergeTags, onChange: (text) => set({ text }) }), _jsx(Field, { label: "Size", children: (id) => (_jsxs("select", { id: id, className: INPUT_CLASS, value: block.level, onChange: (event) => set({ level: Number(event.target.value) }), children: [_jsx("option", { value: 1, children: "Large" }), _jsx("option", { value: 2, children: "Medium" }), _jsx("option", { value: 3, children: "Small" })] })) }), _jsx(ColorSetting, { label: "Colour", value: block.color, fallback: theme.textColor, onChange: (color) => set({ color }) })] }));
+            break;
+        case "image":
+            fields = (_jsxs(_Fragment, { children: [_jsx(TextSetting, { label: "Image address (https://)", value: block.src, onChange: (src) => set({ src }) }), _jsx(TextSetting, { label: "Description (alt text)", value: block.alt, onChange: (alt) => set({ alt }) }), _jsx(TextSetting, { label: "Link (optional)", value: block.href ?? "", mergeTags: mergeTags, onChange: (href) => set({ href: href || undefined }) }), _jsx(NumberSetting, { label: "Width (px)", value: block.width, min: 16, max: theme.width, onChange: (width) => set({ width }) })] }));
+            break;
+        case "button":
+            fields = (_jsxs(_Fragment, { children: [_jsx(TextSetting, { label: "Label", value: block.text, mergeTags: mergeTags, onChange: (text) => set({ text }) }), _jsx(TextSetting, { label: "Link", value: block.href, mergeTags: mergeTags, onChange: (href) => set({ href }) }), _jsx(ColorSetting, { label: "Button colour", value: block.backgroundColor, fallback: theme.buttonColor, onChange: (backgroundColor) => set({ backgroundColor }) }), _jsx(ColorSetting, { label: "Label colour", value: block.color, fallback: theme.buttonTextColor, onChange: (color) => set({ color }) }), _jsx(NumberSetting, { label: "Corner radius (px)", value: block.borderRadius, min: 0, max: 40, onChange: (borderRadius) => set({ borderRadius }) })] }));
+            break;
+        case "divider":
+            fields = (_jsxs(_Fragment, { children: [_jsx(ColorSetting, { label: "Colour", value: block.color, fallback: "#e5e7eb", onChange: (color) => set({ color }) }), _jsx(NumberSetting, { label: "Thickness (px)", value: block.thickness, min: 1, max: 10, onChange: (thickness) => set({ thickness }) })] }));
+            break;
+        case "spacer":
+            fields = _jsx(NumberSetting, { label: "Height (px)", value: block.height, min: 1, max: 200, onChange: (height) => set({ height: height ?? 24 }) });
+            break;
+        case "social":
+            fields = (_jsxs("fieldset", { className: "mb-3", children: [_jsx("legend", { className: "text-xs font-semibold text-text-muted mb-1", children: "Links" }), block.links.map((link, index) => (_jsxs("div", { className: "flex gap-1 mb-1", children: [_jsx("select", { "aria-label": `Network ${index + 1}`, className: `${INPUT_CLASS} !w-28`, value: link.network, onChange: (event) => set({ links: block.links.map((entry, at) => (at === index ? { ...entry, network: event.target.value } : entry)) }), children: NETWORKS.map((network) => (_jsx("option", { value: network, children: network }, network))) }), _jsx("input", { "aria-label": `Address ${index + 1}`, className: INPUT_CLASS, value: link.href, placeholder: "https://", onChange: (event) => set({ links: block.links.map((entry, at) => (at === index ? { ...entry, href: event.target.value } : entry)) }) }), _jsx("button", { type: "button", "aria-label": `Remove link ${index + 1}`, disabled: block.links.length === 1, className: "px-2 text-danger disabled:opacity-40", onClick: () => set({ links: block.links.filter((_entry, at) => at !== index) }), children: "\u00D7" })] }, index))), block.links.length < 10 && (_jsx("button", { type: "button", className: "text-xs text-primary-dark hover:underline", onClick: () => set({ links: [...block.links, { network: "web", href: "" }] }), children: "+ Add link" }))] }));
+            break;
+        case "html":
+            fields = canManage ? (_jsxs(_Fragment, { children: [_jsx(TextSetting, { label: "HTML", value: block.html, multiline: true, mergeTags: mergeTags, onChange: (html) => set({ html }) }), _jsx("p", { className: "text-xs text-text-muted mb-3", children: "Scripts, forms and frames are removed when you save." })] })) : (_jsx("p", { className: "text-xs text-text-muted mb-3", children: "Only workspace admins can change HTML blocks." }));
+            break;
+        default:
+            fields = (_jsxs(_Fragment, { children: [_jsx(TextSetting, { label: "Note (why they get this email)", value: block.note ?? "", onChange: (note) => set({ note: note || undefined }) }), _jsx(ColorSetting, { label: "Text colour", value: block.color, fallback: "#6b7280", onChange: (color) => set({ color }) }), _jsx("p", { className: "text-xs text-text-muted mb-3", children: "The footer always shows your workspace's name and postal address, and the unsubscribe and preferences links." })] }));
+    }
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-3", children: blockLabel(block.type) }), fields, common] }));
+}
+/** The settings of the selected section. */
+export function SectionInspector({ section, theme, onChange, }) {
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-3", children: "Section" }), _jsx(Field, { label: "Columns", children: (id) => (_jsx("select", { id: id, className: INPUT_CLASS, value: section.columns.length, onChange: (event) => onChange({ columns: Number(event.target.value) }), children: [1, 2, 3, 4].map((count) => (_jsx("option", { value: count, children: count }, count))) })) }), _jsx(ColorSetting, { label: "Background", value: section.backgroundColor, fallback: theme.contentBackgroundColor, onChange: (backgroundColor) => onChange({ backgroundColor }) }), _jsx(NumberSetting, { label: "Padding (px)", value: section.padding, min: 0, max: 80, onChange: (padding) => onChange({ padding }) })] }));
+}
+/** The design's overall look. */
+export function ThemeInspector({ theme, onChange }) {
+    const colors = [
+        ["backgroundColor", "Page background"],
+        ["contentBackgroundColor", "Content background"],
+        ["textColor", "Text"],
+        ["linkColor", "Links"],
+        ["buttonColor", "Buttons"],
+        ["buttonTextColor", "Button labels"],
+    ];
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-3", children: "Theme" }), _jsx(Field, { label: "Font", children: (id) => (_jsx("select", { id: id, className: INPUT_CLASS, value: theme.fontFamily, onChange: (event) => onChange({ fontFamily: event.target.value }), children: [theme.fontFamily, "Arial, Helvetica, sans-serif", "Georgia, 'Times New Roman', serif", "Verdana, Geneva, sans-serif", "'Trebuchet MS', Helvetica, sans-serif", "'Courier New', monospace"]
+                        .filter((font, index, all) => all.indexOf(font) === index)
+                        .map((font) => (_jsx("option", { value: font, children: font.split(",")[0].replace(/'/g, "") }, font))) })) }), _jsx(NumberSetting, { label: "Width (px)", value: theme.width, min: 480, max: 800, onChange: (width) => onChange({ width: width ?? 600 }) }), colors.map(([key, label]) => (_jsx(ColorSetting, { label: label, required: true, value: theme[key], fallback: theme[key], onChange: (value) => onChange({ [key]: value }) }, key)))] }));
+}

package/dist/apps/shared/components/designer/LazyTextBlockEditor.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { TextBlockEditorProps } from "./TextBlockEditor.js";
+/**
+ * `TextBlockEditor`, loaded when a text block is first edited - TipTap and ProseMirror are a good deal of code the designer doesn't need
+ * until then, and they can't run on the server. A chunk that fails to download says so, with a retry.
+ */
+export default function LazyTextBlockEditor(props: TextBlockEditorProps): React.JSX.Element;

package/dist/apps/shared/components/designer/LazyTextBlockEditor.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+let loading;
+let loaded;
+/** Fetches the editor's chunk once. A failed download is forgotten, so asking again tries again. */
+function loadEditor() {
+    loading ?? (loading = import("./TextBlockEditor.js").then((module) => (loaded = module.default), (err) => {
+        loading = undefined;
+        throw err;
+    }));
+    return loading;
+}
+/**
+ * `TextBlockEditor`, loaded when a text block is first edited - TipTap and ProseMirror are a good deal of code the designer doesn't need
+ * until then, and they can't run on the server. A chunk that fails to download says so, with a retry.
+ */
+export default function LazyTextBlockEditor(props) {
+    const [Editor, setEditor] = useState(() => loaded ?? null);
+    const [failed, setFailed] = useState(false);
+    const [attempt, setAttempt] = useState(0);
+    useEffect(() => {
+        let current = true;
+        loadEditor().then((component) => current && setEditor(() => component), () => current && setFailed(true));
+        return () => {
+            current = false;
+        };
+    }, [attempt]);
+    if (Editor) {
+        return _jsx(Editor, { ...props });
+    }
+    if (failed) {
+        return (_jsxs("p", { role: "alert", className: "text-sm text-danger", children: ["The text editor couldn\u2019t be loaded.", " ", _jsx("button", { type: "button", className: "underline", onClick: () => {
+                        setFailed(false);
+                        setAttempt((count) => count + 1);
+                    }, children: "Try again" })] }));
+    }
+    return (_jsx("div", { "aria-busy": "true", className: "min-h-[3rem] rounded-sm border border-border bg-surface-alt text-sm text-text-muted px-2 py-1", children: "Loading the editor\u2026" }));
+}

package/dist/apps/shared/components/designer/MergeTagPicker.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { MergeTag } from "../../crmApi.js";
+/**
+ * A menu of merge tags ("First name", "Unsubscribe link"...): picking one calls `onPick` with its tag (`contact.first_name`) and resets
+ * the menu, ready for the next.
+ */
+export default function MergeTagPicker({ tags, onPick, label }: {
+    tags: MergeTag[];
+    onPick: (tag: string) => void;
+    label?: string;
+}): React.JSX.Element;

package/dist/apps/shared/components/designer/MergeTagPicker.js

@@ -0,0 +1,15 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A menu of merge tags ("First name", "Unsubscribe link"...): picking one calls `onPick` with its tag (`contact.first_name`) and resets
+ * the menu, ready for the next.
+ */
+export default function MergeTagPicker({ tags, onPick, label = "Insert merge tag" }) {
+    function pick(event) {
+        const tag = event.target.value;
+        event.target.value = "";
+        if (tag) {
+            onPick(tag);
+        }
+    }
+    return (_jsxs("select", { "aria-label": label, defaultValue: "", onChange: pick, className: "text-xs py-1 px-1.5 border border-border rounded-sm bg-surface text-text max-w-[11rem]", children: [_jsxs("option", { value: "", children: ["{{ }}", " Merge tag\u2026"] }), tags.map(({ tag, label: tagLabel }) => (_jsx("option", { value: tag, children: tagLabel }, tag)))] }));
+}

package/dist/apps/shared/components/designer/PreviewModal.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { TemplateDesign } from "../../crmApi.js";
+export interface PreviewModalProps {
+    open: boolean;
+    onClose: () => void;
+    workspaceUid: string;
+    design: TemplateDesign;
+    subject: string;
+    preheader: string;
+}
+/**
+ * The email as a reader gets it, rendered by the server (MJML and merge tags) for a made-up reader or a chosen contact: the subject, and
+ * the email at desktop or phone width - in a sandboxed frame that runs no scripts - or its plain-text part.
+ */
+export default function PreviewModal({ open, onClose, workspaceUid, design, subject, preheader }: PreviewModalProps): React.JSX.Element;

package/dist/apps/shared/components/designer/PreviewModal.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import Alert from "@rapidmx/web-client/lib/components/feedback/Alert.js";
+import Modal from "@rapidmx/web-client/lib/components/overlays/Modal.js";
+import { errorMessage, renderTemplate, searchRecords } from "../../crmApi.js";
+import { INPUT_CLASS } from "../CrmShell.js";
+/**
+ * The email as a reader gets it, rendered by the server (MJML and merge tags) for a made-up reader or a chosen contact: the subject, and
+ * the email at desktop or phone width - in a sandboxed frame that runs no scripts - or its plain-text part.
+ */
+export default function PreviewModal({ open, onClose, workspaceUid, design, subject, preheader }) {
+    const [view, setView] = useState("desktop");
+    const [contactUid, setContactUid] = useState("");
+    const [query, setQuery] = useState("");
+    const [contacts, setContacts] = useState([]);
+    const [email, setEmail] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        let current = true;
+        setError(null);
+        renderTemplate(workspaceUid, { design, subject, preheader: preheader || undefined, contactUid: contactUid || undefined }).then((rendered) => current && setEmail(rendered), (err) => {
+            if (current) {
+                setEmail(null);
+                setError(errorMessage(err, "Could not render the preview."));
+            }
+        });
+        return () => {
+            current = false;
+        };
+    }, [open, contactUid]);
+    async function findContacts() {
+        try {
+            setContacts((await searchRecords("contact", workspaceUid, { q: query, limit: 10 })).items);
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not search the contacts."));
+        }
+    }
+    return (_jsxs(Modal, { open: open, onClose: onClose, title: "Preview", children: [_jsxs("div", { className: "flex flex-wrap items-end gap-2 mb-3", children: [_jsx("div", { role: "radiogroup", "aria-label": "View", className: "flex rounded-sm border border-border overflow-hidden", children: ["desktop", "mobile", "text"].map((option) => (_jsx("button", { type: "button", role: "radio", "aria-checked": view === option, onClick: () => setView(option), className: `px-3 py-1 text-sm capitalize ${view === option ? "bg-primary-lightest text-primary-dark font-semibold" : "text-text"}`, children: option === "text" ? "Plain text" : option }, option))) }), _jsxs("form", { className: "flex gap-1 ml-auto", onSubmit: (event) => {
+                            event.preventDefault();
+                            void findContacts();
+                        }, children: [_jsx("input", { "aria-label": "Find a contact", placeholder: "Preview as contact\u2026", className: `${INPUT_CLASS} !w-44`, value: query, onChange: (event) => setQuery(event.target.value) }), _jsxs("select", { "aria-label": "Preview as", className: `${INPUT_CLASS} !w-48`, value: contactUid, onChange: (event) => setContactUid(event.target.value), children: [_jsx("option", { value: "", children: "A sample reader" }), contacts.map((contact) => (_jsx("option", { value: contact.uid, children: contact.email }, contact.uid)))] })] })] }), error && _jsx(Alert, { children: error }), email && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-sm mb-2", children: [_jsx("span", { className: "text-text-muted", children: "Subject: " }), _jsx("span", { className: "font-semibold", children: email.subject })] }), view === "text" ? (_jsx("pre", { className: "text-xs whitespace-pre-wrap border border-border rounded-sm p-3 max-h-[60vh] overflow-auto", children: email.text })) : (_jsx("iframe", { title: "Email preview", sandbox: "", srcDoc: email.html, className: "block mx-auto border border-border rounded-sm bg-white", style: { width: view === "mobile" ? 375 : "100%", minWidth: view === "mobile" ? 375 : 640, height: "60vh" } }))] }))] }));
+}

package/dist/apps/shared/components/designer/TemplateDesigner.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+/**
+ * The email template designer: the template's name, subject and preview line; a palette of blocks, section layouts and saved blocks; the
+ * canvas; and the settings of what's selected. Edits can be undone (Ctrl+Z) and redone (Ctrl+Shift+Z or Ctrl+Y); saving checks the
+ * design here first, then on the server, and refuses to overwrite a newer version saved elsewhere. The preview renders the email as it's
+ * sent, and a saved template can be sent as a test.
+ */
+export default function TemplateDesigner({ uid }: {
+    uid: string;
+}): React.JSX.Element;