@cosmicdrift/kumiko-document-designer 0.0.0-stage → 0.364.0

package/dist/web/mail-preview-side.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+import type { MailPreview, MailValidation } from "./mail-types.js";
+import type { OwnAddress } from "./use-own-address.js";
+export type TestMailControls = {
+    readonly pending: boolean;
+    readonly onSend: () => void;
+    readonly includeAttachments: boolean;
+    readonly onIncludeAttachments: (next: boolean) => void;
+    readonly prefixSubject: boolean;
+    readonly onPrefixSubject: (next: boolean) => void;
+};
+export declare function PreviewSide({ preview, validation, slug, locale, own, testMail, }: {
+    readonly preview: MailPreview | null;
+    readonly validation: MailValidation | null;
+    readonly slug: string;
+    readonly locale: string;
+    readonly own: OwnAddress;
+    readonly testMail: TestMailControls;
+}): ReactNode;

package/dist/web/mail-preview-side.js

@@ -0,0 +1,57 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { useNav, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { useState } from "react";
+import { displayValue } from "./mail-draft.js";
+import { usePreviewRecordPicker } from "./preview-record-picker.js";
+import { RailField, RailHint, RailRow, RailSection } from "./rail.js";
+const noop = () => undefined;
+// Check params list names as arrays; the message templates expect one string.
+function checkText(t, check) {
+    const params = Object.fromEntries(Object.entries(check.params ?? {}).map(([name, value]) => [
+        name,
+        Array.isArray(value) ? value.join(", ") : value,
+    ]));
+    const translated = t(check.i18nKey, params);
+    return translated === check.i18nKey ? check.code : translated;
+}
+function SampleValues({ preview, validation, picked, }) {
+    const t = useTranslation();
+    const values = { ...(preview?.sampleValues ?? {}), ...(picked ?? {}) };
+    const names = Object.keys(validation?.variables ?? values);
+    return (_jsx(_Fragment, { children: names.map((name) => {
+            const missing = validation?.missingRequired.includes(name) === true;
+            return (_jsx(RailRow, { testId: `mail-sample-${name}`, label: validation?.variables[name]?.label ?? name, bad: missing, trailing: missing
+                    ? t("documentDesigner.mail.preview.missingInContent")
+                    : displayValue(t, values[name]) }, name));
+        }) }));
+}
+function RecordPickerLink({ slug, locale, onPick, }) {
+    const picker = usePreviewRecordPicker();
+    const { Button, Modal } = usePrimitives();
+    const [open, setOpen] = useState(false);
+    if (picker === null)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "link", onClick: () => setOpen(true), testId: "mail-record-picker-open", children: picker.label }), _jsx(Modal, { open: open, onOpenChange: setOpen, title: picker.label, testId: "mail-record-picker-modal", children: picker.renderPicker({
+                    slug,
+                    locale,
+                    onPick: (values) => {
+                        onPick(values);
+                        setOpen(false);
+                    },
+                }) })] }));
+}
+function TestMailRecipient({ own }) {
+    const t = useTranslation();
+    const nav = useNav();
+    const { Field, Input, Link } = usePrimitives();
+    const { profileScreenId } = own;
+    return (_jsxs(RailField, { children: [_jsx(Field, { id: "mail-test-recipient", label: t("documentDesigner.mail.testMail.recipient"), children: _jsx(Input, { kind: "text", id: "mail-test-recipient", name: "mail-test-recipient", testId: "mail-test-recipient", value: own.email ?? t("documentDesigner.mail.testMail.ownAddress"), onChange: noop, disabled: true }) }), profileScreenId !== null && (_jsx(Link, { href: nav.hrefFor({ screenId: profileScreenId }), onPress: () => nav.navigate({ screenId: profileScreenId }), testId: "mail-test-recipient-edit", children: t("documentDesigner.mail.testMail.changeAddress") }))] }));
+}
+export function PreviewSide({ preview, validation, slug, locale, own, testMail, }) {
+    const t = useTranslation();
+    const { Button, Field, Input, Text } = usePrimitives();
+    const hasAttachments = preview?.attachments.some((a) => a.kind !== "inline") === true;
+    const [picked, setPicked] = useState(null);
+    return (_jsxs("div", { "data-testid": "mail-preview-side", children: [_jsxs(RailSection, { title: t("documentDesigner.mail.preview.samples"), action: _jsx(RecordPickerLink, { slug: slug, locale: locale, onPick: setPicked }), children: [_jsx(SampleValues, { preview: preview, validation: validation, picked: picked }), _jsx(RailHint, { children: t("documentDesigner.mail.preview.samplesHint") })] }), _jsxs(RailSection, { title: t("documentDesigner.mail.testMail.title"), children: [_jsx(TestMailRecipient, { own: own }), _jsxs(RailField, { children: [_jsx(Field, { id: "mail-test-prefix", label: t("documentDesigner.mail.testMail.prefixSubject"), layout: "inline", children: _jsx(Input, { kind: "boolean", id: "mail-test-prefix", name: "mail-test-prefix", value: testMail.prefixSubject, onChange: testMail.onPrefixSubject }) }), hasAttachments ? (_jsx(Field, { id: "mail-test-attachments", label: t("documentDesigner.mail.testMail.attachments"), layout: "inline", children: _jsx(Input, { kind: "boolean", id: "mail-test-attachments", name: "mail-test-attachments", value: testMail.includeAttachments, onChange: testMail.onIncludeAttachments }) })) : (_jsx(Text, { variant: "muted", testId: "mail-test-no-attachments", children: t("documentDesigner.mail.testMail.noAttachments") })), _jsx(Button, { variant: "secondary", width: "full", disabled: testMail.pending, loading: testMail.pending, onClick: testMail.onSend, testId: "mail-test-send", children: t("documentDesigner.mail.testMail.send") })] }), _jsx(RailHint, { children: t("documentDesigner.mail.testMail.hint") })] }), _jsxs(RailSection, { title: t("documentDesigner.mail.preview.checks"), testId: "mail-preview-checks", children: [(preview?.checks ?? []).map((check) => (_jsx(RailRow, { testId: `mail-check-${check.code}`, symbol: check.ok ? "✓" : "!", label: checkText(t, check), bad: !check.ok }, check.code))), _jsx(RailHint, { children: t("documentDesigner.mail.preview.checksHint") })] })] }));
+}

package/dist/web/mail-preview.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+import type { EditorOrigin } from "./editor-header.js";
+import { type TestMailControls } from "./mail-preview-side.js";
+import type { MailValidation } from "./mail-types.js";
+import type { OwnAddress } from "./use-own-address.js";
+export type PreviewPayload = {
+    readonly slug: string;
+    readonly kind: "mail";
+    readonly locale: string;
+    readonly content: string;
+    readonly meta: Readonly<Record<string, unknown>>;
+    readonly variableSchema: unknown;
+};
+export declare function MailPreviewMode({ payload, validation, slug, locale, fromName, own, controls, origin, testMail, }: {
+    readonly payload: PreviewPayload;
+    readonly validation: MailValidation | null;
+    readonly slug: string;
+    readonly locale: string;
+    readonly fromName: string;
+    readonly own: OwnAddress;
+    readonly controls: ReactNode;
+    readonly origin: EditorOrigin | null;
+    readonly testMail: TestMailControls;
+}): ReactNode;

package/dist/web/mail-preview.js

@@ -0,0 +1,54 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { dispatcherErrorText, usePrimitives, useQuery, useTranslation, } from "@cosmicdrift/kumiko-renderer";
+import { LoadingState, ModeSwitch } from "@cosmicdrift/kumiko-renderer-web";
+import { useState } from "react";
+import { EditorBody, EditorInfoBar } from "./editor-shell.js";
+import { formatKilobytes } from "./mail-draft.js";
+import { PreviewSide } from "./mail-preview-side.js";
+function attachmentText(t, attachment) {
+    switch (attachment.kind) {
+        case "inline":
+            return null;
+        case "file":
+            return `⎘ ${attachment.name} · ${formatKilobytes(attachment.sizeBytes)}`;
+        case "rendered-pdf":
+            return `⎘ ${attachment.name} · ${t("documentDesigner.mail.preview.generatedOnSend")}`;
+    }
+}
+function HeadRow({ label, children, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsx("span", { className: "min-w-0", children: children })] }));
+}
+function MailFrame({ preview, format, width, fromName, recipient, }) {
+    const t = useTranslation();
+    const attachments = preview.attachments.flatMap((a) => attachmentText(t, a) ?? []);
+    return (_jsxs("div", { className: "mx-auto flex w-full max-w-[680px] flex-col border bg-card shadow-md", "data-testid": "mail-preview-frame", children: [_jsxs("div", { className: "grid grid-cols-[80px_minmax(0,1fr)] gap-y-1 border-b px-5 py-3.5 text-sm", children: [_jsx(HeadRow, { label: t("documentDesigner.mail.preview.from"), children: _jsx("span", { "data-testid": "mail-preview-from", children: fromName === "" ? t("documentDesigner.mail.props.senderDefault") : fromName }) }), recipient !== null && (_jsx(HeadRow, { label: t("documentDesigner.mail.preview.to"), children: _jsx("span", { "data-testid": "mail-preview-to", children: recipient }) })), _jsx(HeadRow, { label: t("documentDesigner.mail.meta.subject"), children: _jsx("span", { className: "font-medium", "data-testid": "mail-preview-subject", children: preview.subject ?? "" }) }), attachments.length > 0 && (_jsx(HeadRow, { label: t("documentDesigner.mail.preview.attachments"), children: _jsx("span", { className: "flex flex-col items-start gap-1", "data-testid": "mail-preview-attachments", children: attachments.map((line) => (_jsx("span", { className: "rounded border bg-muted px-2 py-0.5 text-xs", children: line }, line))) }) }))] }), format === "html" ? (_jsx("iframe", { title: t("documentDesigner.mail.preview.frameTitle"), sandbox: "", srcDoc: preview.displayHtml ?? preview.html, className: `h-[560px] border-0 bg-background ${width === "mobile" ? "w-[375px] self-center" : "w-full"}`, "data-testid": "mail-preview-iframe" })) : (_jsx("pre", { className: "h-[560px] overflow-auto whitespace-pre-wrap p-4 font-mono text-sm", "data-testid": "mail-preview-text", children: preview.text ?? "" }))] }));
+}
+// The preview mail goes to the example recipient of the sample values, not to the test-mail address.
+function recipientOf(preview, own) {
+    const { recipientName: name, recipientEmail: email } = preview.sampleValues;
+    if (typeof name !== "string" || name === "")
+        return own.email;
+    return typeof email === "string" && email !== "" ? `${name} <${email}>` : name;
+}
+function layoutText(t, preview) {
+    return preview?.mailLayout == null
+        ? t("documentDesigner.mail.preview.barPlain")
+        : t("documentDesigner.mail.preview.bar", { version: preview.mailLayout.version });
+}
+export function MailPreviewMode({ payload, validation, slug, locale, fromName, own, controls, origin, testMail, }) {
+    const t = useTranslation();
+    const { Banner } = usePrimitives();
+    const [format, setFormat] = useState("html");
+    const [width, setWidth] = useState("desktop");
+    const query = useQuery(TemplateResolverQueries.preview, payload);
+    const preview = query.data;
+    return (_jsxs(_Fragment, { children: [_jsx(EditorInfoBar, { tone: "muted", testId: "mail-preview-bar", origin: origin, controls: controls, links: _jsxs(_Fragment, { children: [_jsx(ModeSwitch, { value: format, onChange: setFormat, ariaLabel: t("documentDesigner.mail.preview.formatSwitch"), testId: "mail-preview-format", options: [
+                                { value: "html", label: t("documentDesigner.mail.preview.html") },
+                                { value: "text", label: t("documentDesigner.mail.preview.text") },
+                            ] }), _jsx(ModeSwitch, { value: width, onChange: setWidth, ariaLabel: t("documentDesigner.mail.preview.widthSwitch"), testId: "mail-preview-width", options: [
+                                { value: "desktop", label: t("documentDesigner.mail.preview.desktop") },
+                                { value: "mobile", label: t("documentDesigner.mail.preview.mobile") },
+                            ] })] }), children: layoutText(t, preview) }), _jsx(EditorBody, { testId: "mail-editor-preview", center: _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-3 overflow-auto px-8 py-6", children: [query.error !== null && (_jsx(Banner, { variant: "error", testId: "mail-preview-error", children: dispatcherErrorText(query.error, t) })), preview === null ? (query.error === null && _jsx(LoadingState, {})) : (_jsx(MailFrame, { preview: preview, format: format, width: width, fromName: fromName, recipient: recipientOf(preview, own) }))] }), right: _jsx(PreviewSide, { preview: preview, validation: validation, slug: slug, locale: locale, own: own, testMail: testMail }) })] }));
+}

package/dist/web/mail-right-rail.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import type { LinkedResourceView, MailDraft } from "./mail-types.js";
+import type { OverviewRowView } from "./overview-row.js";
+export declare function layoutOptionLabel(t: (key: string, params?: Readonly<Record<string, unknown>>) => string, layout: OverviewRowView): string;
+export declare function AttachmentSection({ attachments, pdfTitles, canEdit, onAddPdf, onRemove, }: {
+    readonly attachments: readonly LinkedResourceView[];
+    readonly pdfTitles: ReadonlyMap<string, string>;
+    readonly canEdit: boolean;
+    readonly onAddPdf: () => void;
+    readonly onRemove: (key: string) => void;
+}): ReactNode;
+export declare function PropertiesSection({ draft, layouts, onChange, }: {
+    readonly draft: MailDraft;
+    readonly layouts: readonly OverviewRowView[];
+    readonly onChange: (patch: Partial<MailDraft>) => void;
+}): ReactNode;
+export declare function UsageSection({ slug }: {
+    readonly slug: string;
+}): ReactNode;

package/dist/web/mail-right-rail.js

@@ -0,0 +1,57 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { usePrimitives, useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { DEFAULT_LAYOUT_SLUG } from "../constants.js";
+import { RailField, RailHint, RailRow, RailSection } from "./rail.js";
+import { usageParts } from "./used-by-label.js";
+export function layoutOptionLabel(t, layout) {
+    // A layout has no registry title; the slug would read like an id, so name it by kind.
+    const title = layout.title === layout.slug
+        ? t(`documentDesigner.editor.title.${layout.kind === "mail-layout" ? "mail" : "pdf"}`)
+        : layout.title;
+    return t(layout.origin === "tenant"
+        ? "documentDesigner.mail.props.layoutTenant"
+        : "documentDesigner.mail.props.layoutSystem", { title, version: layout.version });
+}
+function UsageRows({ slug }) {
+    const t = useTranslation();
+    const { data } = useQuery(TemplateResolverQueries.usage, {
+        slug,
+        kind: "mail",
+    });
+    return (_jsx(_Fragment, { children: (data?.usedBy ?? []).map((usage) => {
+            const parts = usageParts(t, usage);
+            return (_jsx(RailRow, { label: t("documentDesigner.mail.usage.line", parts), testId: "mail-usage-row" }, `${usage.feature}:${usage.notification}`));
+        }) }));
+}
+export function AttachmentSection({ attachments, pdfTitles, canEdit, onAddPdf, onRemove, }) {
+    const t = useTranslation();
+    const { Button } = usePrimitives();
+    return (_jsxs(RailSection, { title: t("documentDesigner.mail.attachments.title"), testId: "mail-editor-attachments", action: _jsx(Button, { variant: "link", disabled: !canEdit, onClick: onAddPdf, testId: "mail-attachment-pdf-open", children: t("documentDesigner.mail.attachments.addPdf") }), children: [attachments.length === 0 && _jsx(RailRow, { label: t("documentDesigner.mail.attachments.none") }), attachments.map((attachment) => (_jsx(RailRow, { testId: "mail-attachment-row", symbol: "\u2398", label: attachment.kind === "pdf"
+                    ? t("documentDesigner.mail.attachments.pdfRow", {
+                        title: pdfTitles.get(attachment.templateSlug) ?? attachment.templateSlug,
+                    })
+                    : attachment.kind === "file"
+                        ? attachment.fileName
+                        : attachment.key, trailing: attachment.kind === "pdf"
+                    ? attachment.fileName
+                    : t("documentDesigner.mail.attachments.file"), action: _jsx(Button, { variant: "danger-ghost", size: "sm", onClick: () => onRemove(attachment.key), testId: `mail-attachment-remove-${attachment.key}`, children: t("documentDesigner.mail.resource.remove") }) }, attachment.key))), _jsx(RailHint, { children: t("documentDesigner.mail.attachments.hint") })] }));
+}
+export function PropertiesSection({ draft, layouts, onChange, }) {
+    const t = useTranslation();
+    const { Field, Input } = usePrimitives();
+    const layoutValue = draft.layoutSlug === "" ? DEFAULT_LAYOUT_SLUG : draft.layoutSlug;
+    const categoryValue = draft.category === "" ? "transactional" : draft.category;
+    return (_jsxs(RailSection, { title: t("documentDesigner.mail.props.title"), testId: "mail-editor-properties", children: [_jsx(RailField, { children: _jsx(Field, { id: "mail-layout", label: t("documentDesigner.mail.props.layout"), children: _jsx(Input, { kind: "select", id: "mail-layout", name: "mail-layout", value: layoutValue, display: "dropdown", onChange: (next) => onChange({ layoutSlug: next }), options: layouts.map((layout) => ({
+                            value: layout.slug,
+                            label: layoutOptionLabel(t, layout),
+                        })) }) }) }), _jsx(RailField, { children: _jsx(Field, { id: "mail-sender", label: t("documentDesigner.mail.props.sender"), children: _jsx(Input, { kind: "text", id: "mail-sender", name: "mail-sender", testId: "mail-sender", value: draft.senderName, onChange: (next) => onChange({ senderName: next }), placeholder: t("documentDesigner.mail.props.senderPlaceholder") }) }) }), _jsx(RailHint, { children: t("documentDesigner.mail.props.senderHint") }), _jsx(RailField, { children: _jsx(Field, { id: "mail-reply-to", label: t("documentDesigner.mail.props.replyTo"), children: _jsx(Input, { kind: "email", id: "mail-reply-to", name: "mail-reply-to", testId: "mail-reply-to", value: draft.replyTo, onChange: (next) => onChange({ replyTo: next }) }) }) }), _jsx(RailField, { children: _jsx(Field, { id: "mail-category", label: t("documentDesigner.mail.props.category"), children: _jsx(Input, { kind: "select", id: "mail-category", name: "mail-category", value: categoryValue, display: "dropdown", onChange: (next) => onChange({ category: next === "marketing" ? "marketing" : "transactional" }), options: [
+                            { value: "transactional", label: t("documentDesigner.mail.props.transactional") },
+                            { value: "marketing", label: t("documentDesigner.mail.props.marketing") },
+                        ] }) }) }), _jsx(RailHint, { children: t("documentDesigner.mail.props.categoryHint") })] }));
+}
+export function UsageSection({ slug }) {
+    const t = useTranslation();
+    return (_jsxs(RailSection, { title: t("documentDesigner.mail.usage.title"), testId: "mail-editor-usage", children: [_jsx(UsageRows, { slug: slug }), _jsx(RailHint, { children: t("documentDesigner.mail.usage.hint") })] }));
+}

package/dist/web/mail-types.d.ts

@@ -0,0 +1,117 @@
+import type { ValidationIssue } from "./layout-types.js";
+import type { ServedVersionView } from "./types.js";
+export type PlaceholderType = "text" | "money" | "date" | "link" | "list";
+export type MailVariable = {
+    readonly type: PlaceholderType;
+    readonly label?: string;
+    readonly required?: boolean;
+    readonly example?: unknown;
+    readonly item?: Readonly<Record<string, {
+        readonly type: PlaceholderType;
+        readonly label?: string;
+    }>>;
+};
+export type MailWarning = {
+    readonly code: string;
+    readonly detail: string;
+    readonly i18nKey: string;
+};
+export type MailValidation = {
+    readonly canSave: boolean;
+    readonly canPublish: boolean;
+    readonly issues: readonly ValidationIssue[];
+    readonly publishIssues: readonly ValidationIssue[];
+    readonly used: readonly string[];
+    readonly unknown: readonly string[];
+    readonly missingRequired: readonly string[];
+    readonly warnings: readonly MailWarning[];
+    readonly variables: Readonly<Record<string, MailVariable>>;
+    readonly systemPlaceholders: readonly string[];
+};
+export type PreviewAttachment = {
+    readonly kind: "inline";
+    readonly name: string;
+    readonly sizeBytes: number;
+} | {
+    readonly kind: "file";
+    readonly name: string;
+    readonly sizeBytes: number;
+} | {
+    readonly kind: "rendered-pdf";
+    readonly name: string;
+    readonly templateSlug: string;
+};
+export type PreviewCheck = {
+    readonly code: string;
+    readonly ok: boolean;
+    readonly i18nKey: string;
+    readonly params?: Readonly<Record<string, unknown>>;
+};
+export type MailPreview = {
+    readonly subject: string | null;
+    readonly html: string;
+    readonly displayHtml?: string;
+    readonly text: string | null;
+    readonly attachments: readonly PreviewAttachment[];
+    readonly mailLayout?: {
+        readonly slug: string;
+        readonly scope: string;
+        readonly version: number;
+    } | null;
+    readonly sampleValues: Readonly<Record<string, unknown>>;
+    readonly checks: readonly PreviewCheck[];
+};
+export type TemplateRowSummary = {
+    readonly id: string;
+    readonly slug: string;
+    readonly kind: string;
+    readonly locale: string;
+    readonly scope: "tenant" | "system";
+    readonly status: string;
+    readonly modifiedAt: string;
+};
+export type TemplateRowView = {
+    readonly id: string;
+    readonly version: number;
+    readonly slug: string;
+    readonly locale: string;
+    readonly scope: "tenant" | "system";
+    readonly status: string;
+    readonly content: string;
+    readonly variableSchema: unknown;
+    readonly linkedResources: unknown;
+    readonly meta: unknown;
+    readonly modifiedAt: string | null;
+    readonly active?: ServedVersionView | null;
+};
+export type MailCategory = "" | "transactional" | "marketing";
+export type MailDraft = {
+    readonly subject: string;
+    readonly previewText: string;
+    readonly layoutSlug: string;
+    readonly category: MailCategory;
+    readonly senderName: string;
+    readonly replyTo: string;
+    readonly body: string;
+};
+export type LinkedResourceView = {
+    readonly kind: "image";
+    readonly key: string;
+    readonly fileRefId: string;
+} | {
+    readonly kind: "file";
+    readonly key: string;
+    readonly fileRefId: string;
+    readonly fileName: string;
+} | {
+    readonly kind: "pdf";
+    readonly key: string;
+    readonly templateSlug: string;
+    readonly fileName: string;
+};
+export type UpsertResponse = {
+    readonly id: string;
+};
+export type SendTestResponse = {
+    readonly subject: string;
+};

package/dist/web/mail-types.js

@@ -0,0 +1 @@
+export {};

package/dist/web/mail-upload-modal.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export type UploadedResource = {
+    readonly key: string;
+    readonly purpose: "image" | "attachment";
+};
+type UploadTarget = {
+    readonly templateId: string;
+    readonly takenKeys: readonly string[];
+    readonly onUploaded: (uploaded: UploadedResource) => void;
+};
+export declare function UploadModal({ open, onOpenChange, target, }: {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly target: UploadTarget;
+}): ReactNode;
+export {};

package/dist/web/mail-upload-modal.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { TemplateResolverHandlers } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { dispatcherErrorText, useMutation, usePrimitives, useTranslation, } from "@cosmicdrift/kumiko-renderer";
+import { useState } from "react";
+import { fetchStoredFileName } from "./file-name.js";
+import { uniqueResourceKey } from "./mail-draft.js";
+const IMAGE_ACCEPT = ["image/png", "image/jpeg", "image/gif", "image/webp"];
+function useResourceUpload(target) {
+    const t = useTranslation();
+    const resourceUpload = useMutation(TemplateResolverHandlers.resourceUpload);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const upload = async (fileRefId, purpose) => {
+        if (fileRefId === null)
+            return;
+        setError(null);
+        setBusy(true);
+        try {
+            const fileName = await fetchStoredFileName(fileRefId);
+            if (fileName === null) {
+                setError(t("documentDesigner.mail.upload.noFileName"));
+                return;
+            }
+            const key = uniqueResourceKey(fileName, target.takenKeys);
+            const result = await resourceUpload.mutate({
+                sourceFileRefId: fileRefId,
+                templateId: target.templateId,
+                key,
+                purpose,
+                ...(purpose === "attachment" && { fileName }),
+            });
+            if (!result.isSuccess) {
+                setError(dispatcherErrorText(result.error, t));
+                return;
+            }
+            target.onUploaded({ key, purpose });
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return { upload, error, busy };
+}
+export function UploadModal({ open, onOpenChange, target, }) {
+    const t = useTranslation();
+    const { Banner, Field, Input, Modal, Text } = usePrimitives();
+    const { upload, error, busy } = useResourceUpload({
+        ...target,
+        onUploaded: (uploaded) => {
+            onOpenChange(false);
+            target.onUploaded(uploaded);
+        },
+    });
+    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, title: t("documentDesigner.mail.upload.title"), testId: "mail-upload-modal", children: _jsxs("div", { className: "flex flex-col gap-4", children: [error !== null && (_jsx(Banner, { variant: "error", testId: "mail-upload-error", children: error })), busy && _jsx(Text, { variant: "muted", children: t("documentDesigner.mail.upload.busy") }), _jsx(Field, { id: "mail-upload-image", label: t("documentDesigner.mail.upload.image"), description: t("documentDesigner.mail.upload.imageHint"), children: _jsx(Input, { kind: "file", id: "mail-upload-image", name: "mail-upload-image", value: null, accept: IMAGE_ACCEPT, disabled: busy, onChange: (fileId) => void upload(fileId, "image") }) }), _jsx(Field, { id: "mail-upload-attachment", label: t("documentDesigner.mail.upload.attachment"), description: t("documentDesigner.mail.upload.attachmentHint"), children: _jsx(Input, { kind: "file", id: "mail-upload-attachment", name: "mail-upload-attachment", value: null, disabled: busy, onChange: (fileId) => void upload(fileId, "attachment") }) })] }) }));
+}

package/dist/web/mail-versions.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+export declare function VersionsSection({ rowId, currentVersion, currentStatus, }: {
+    readonly rowId: string | null;
+    readonly currentVersion: number;
+    readonly currentStatus: string;
+}): ReactNode;

package/dist/web/mail-versions.js

@@ -0,0 +1,43 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { formatWhen, useAppFeatures, useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { StatusBadge } from "@cosmicdrift/kumiko-renderer-web";
+import { RailHint, RailRow, RailSection } from "./rail.js";
+import { asRowStatus, statusLabel, statusTone } from "./status-label.js";
+const AUDIT_FEATURE = "audit";
+const AUDIT_LIST_QUERY = "audit:query:list";
+const MEMBER_DIRECTORY_QUERY = "tenant:query:member-directory";
+const VERSION_LIMIT = 20;
+function VersionRows({ rowId, currentVersion, currentStatus, }) {
+    const t = useTranslation();
+    const audit = useQuery(AUDIT_LIST_QUERY, {
+        aggregateType: "template-resource",
+        aggregateId: rowId,
+        limit: VERSION_LIMIT,
+    });
+    const members = useQuery(MEMBER_DIRECTORY_QUERY, { limit: 200 });
+    const names = new Map((members.data?.rows ?? []).map((member) => [member.id, member.label]));
+    const status = asRowStatus(currentStatus);
+    // The event log has one entry per change; show each version once, newest first.
+    const seen = new Set();
+    const versions = (audit.data?.rows ?? []).filter((row) => {
+        if (seen.has(row.version))
+            return false;
+        seen.add(row.version);
+        return true;
+    });
+    return (_jsx(_Fragment, { children: versions.map((row) => (_jsx(RailRow, { testId: `mail-version-${row.version}`, label: t("documentDesigner.mail.versions.line", {
+                version: row.version,
+                when: formatWhen(row.createdAt),
+                name: names.get(row.createdBy) ?? "–",
+            }), trailing: row.version === currentVersion ? (_jsx(StatusBadge, { tone: statusTone(status), children: statusLabel(t, status, row.version) })) : undefined }, row.version))) }));
+}
+// Hidden when the audit feature is not mounted, so no failing query shows up as an error.
+export function VersionsSection({ rowId, currentVersion, currentStatus, }) {
+    const t = useTranslation();
+    const features = useAppFeatures();
+    if (rowId === null || !features.some((feature) => feature.featureName === AUDIT_FEATURE)) {
+        return null;
+    }
+    return (_jsxs(RailSection, { title: t("documentDesigner.mail.versions.title"), testId: "mail-editor-versions", children: [_jsx(VersionRows, { rowId: rowId, currentVersion: currentVersion, currentStatus: currentStatus }), _jsx(RailHint, { children: t("documentDesigner.mail.versions.hint") })] }));
+}

package/dist/web/origin-bar.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+import type { LayoutKind, LayoutSourceView, TemplateDiff, TenantOverrideCounts } from "./layout-types.js";
+export declare function DiffView({ data, mode, }: {
+    readonly data: TemplateDiff;
+    readonly mode?: "diff" | "full";
+}): ReactNode;
+export declare function DiffPanel({ tenantId }: {
+    readonly tenantId: string;
+}): ReactNode;
+export declare function DiffDrawer({ tenantId, onClose, }: {
+    readonly tenantId: string;
+    readonly onClose: () => void;
+}): ReactNode;
+export declare function OriginBar({ isSystemAdmin, source, kind, userCount, overrides, onReset, onResetError, }: {
+    readonly isSystemAdmin: boolean;
+    readonly source: LayoutSourceView;
+    readonly kind: LayoutKind;
+    readonly userCount: number;
+    readonly overrides: TenantOverrideCounts | null;
+    readonly onReset: () => void;
+    readonly onResetError: (message: string) => void;
+}): ReactNode;

package/dist/web/origin-bar.js

@@ -0,0 +1,104 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { TemplateResolverHandlers, TemplateResolverQueries, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { dispatcherErrorText, useMutation, usePrimitives, useQuery, useTranslation, } from "@cosmicdrift/kumiko-renderer";
+import { EmptyState, ErrorState, LoadingState } from "@cosmicdrift/kumiko-renderer-web";
+import { useState } from "react";
+import { originOf } from "./editor-header.js";
+import { EditorInfoBar } from "./editor-shell.js";
+import { draftBesideActiveSentence } from "./status-label.js";
+const DIFF_MARK = {
+    same: " ",
+    added: "+",
+    removed: "-",
+};
+const DIFF_TONE = {
+    same: "text-muted-foreground",
+    added: "bg-status-ok-surface text-status-ok",
+    removed: "bg-status-bad-surface text-status-bad",
+};
+function metaValueText(value) {
+    if (value === undefined || value === null)
+        return "–";
+    return typeof value === "string" ? value : JSON.stringify(value);
+}
+// "full" shows the tenant's version as it reads (everything but the removed system blocks).
+export function DiffView({ data, mode = "diff", }) {
+    const t = useTranslation();
+    if (mode === "diff" && data.identical) {
+        return _jsx(EmptyState, { title: t("documentDesigner.editor.diff.identical") });
+    }
+    // Diff blocks have no identity beyond their position.
+    const entries = data.blocks
+        .map((block, position) => ({ block, key: `block-${position}` }))
+        .filter(({ block }) => mode === "diff" || block.change !== "removed");
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("ul", { className: "flex flex-col gap-1", "data-testid": "document-designer-diff", children: entries.map(({ block, key }) => (_jsxs("li", { "data-change": block.change, className: `whitespace-pre-wrap rounded px-2 py-1 font-mono text-xs ${DIFF_TONE[block.change]}`, children: [mode === "diff" && `${DIFF_MARK[block.change]} `, block.content] }, key))) }), mode === "diff" && data.meta.length > 0 && (_jsx("ul", { className: "flex flex-col gap-1", "data-testid": "document-designer-diff-meta", children: data.meta.map((entry) => (_jsxs("li", { className: "rounded bg-muted px-2 py-1 font-mono text-xs", children: [entry.key, ": ", metaValueText(entry.system), " \u2192 ", metaValueText(entry.tenant)] }, entry.key))) }))] }));
+}
+export function DiffPanel({ tenantId }) {
+    const { data, loading, error, refetch } = useQuery(TemplateResolverQueries.diffToSystem, { id: tenantId });
+    if (error !== null)
+        return _jsx(ErrorState, { error: error, onRetry: () => void refetch() });
+    if (loading || data === null)
+        return _jsx(LoadingState, {});
+    return _jsx(DiffView, { data: data });
+}
+export function DiffDrawer({ tenantId, onClose, }) {
+    const t = useTranslation();
+    const { Drawer, Modal } = usePrimitives();
+    const title = t("documentDesigner.editor.diff.title");
+    const body = _jsx(DiffPanel, { tenantId: tenantId });
+    const onOpenChange = (open) => {
+        if (!open)
+            onClose();
+    };
+    return Drawer === undefined ? (_jsx(Modal, { open: true, onOpenChange: onOpenChange, title: title, children: body })) : (_jsx(Drawer, { open: true, onOpenChange: onOpenChange, title: title, children: body }));
+}
+function originText(t, args) {
+    const { isSystemAdmin, source, kind, userCount, overrides } = args;
+    const systemVersion = source.system?.version ?? 0;
+    if (isSystemAdmin) {
+        if (overrides === null)
+            return t("documentDesigner.editor.origin.platformPlain", { version: systemVersion });
+        return overrides.totalTenants === null
+            ? t("documentDesigner.editor.origin.platformCount", {
+                version: systemVersion,
+                active: overrides.activeOverrides,
+            })
+            : t("documentDesigner.editor.origin.platformOfTotal", {
+                version: systemVersion,
+                active: overrides.activeOverrides,
+                total: overrides.totalTenants,
+            });
+    }
+    const usesKey = kind === "mail-layout" ? "mails" : "pdfs";
+    if (source.tenant !== null) {
+        return t(`documentDesigner.editor.origin.tenant.${usesKey}`, {
+            version: systemVersion,
+            count: userCount,
+        });
+    }
+    return source.system === null
+        ? t("documentDesigner.editor.origin.none")
+        : t("documentDesigner.editor.origin.system");
+}
+export function OriginBar({ isSystemAdmin, source, kind, userCount, overrides, onReset, onResetError, }) {
+    const t = useTranslation();
+    const { Button, Dialog } = usePrimitives();
+    const [diffOpen, setDiffOpen] = useState(false);
+    const [resetOpen, setResetOpen] = useState(false);
+    const resetToSystem = useMutation(TemplateResolverHandlers.resetToSystem);
+    const { tenant, system } = source;
+    const besideActive = isSystemAdmin || tenant === null ? null : draftBesideActiveSentence(t, tenant);
+    const canDiff = tenant !== null && system?.contentFormat === "html";
+    const canReset = tenant !== null && system !== null && !isSystemAdmin;
+    const links = (_jsxs(_Fragment, { children: [canDiff && (_jsx(Button, { variant: "link", onClick: () => setDiffOpen(true), testId: "document-designer-diff-open", children: t("documentDesigner.editor.diff.open") })), canReset && (_jsx(Button, { variant: "link", onClick: () => setResetOpen(true), testId: "document-designer-reset-open", children: t("documentDesigner.editor.reset.open") }))] }));
+    return (_jsxs(EditorInfoBar, { tone: tenant !== null ? "active" : "muted", testId: "document-designer-origin-bar", origin: originOf(tenant === null, system !== null), links: links, overlays: _jsxs(_Fragment, { children: [diffOpen && tenant !== null && (_jsx(DiffDrawer, { tenantId: tenant.id, onClose: () => setDiffOpen(false) })), _jsx(Dialog, { open: resetOpen, onOpenChange: setResetOpen, title: t("documentDesigner.editor.reset.title"), description: t("documentDesigner.editor.reset.description"), confirmLabel: t("documentDesigner.editor.reset.confirm"), variant: "danger", onConfirm: async () => {
+                        if (tenant === null)
+                            return;
+                        const result = await resetToSystem.mutate({ id: tenant.id });
+                        if (result.isSuccess)
+                            onReset();
+                        else
+                            onResetError(dispatcherErrorText(result.error, t));
+                    } })] }), children: [originText(t, { isSystemAdmin, source, kind, userCount, overrides }), besideActive !== null && ` ${besideActive}`] }));
+}

package/dist/web/overrides-drawer.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+import { type TenantOverrides } from "./types.js";
+export type OverridesDrawerProps = {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly slug: string;
+    readonly locale: string;
+    readonly overrides: TenantOverrides | null;
+};
+export declare function OverridesDrawer({ open, onOpenChange, slug, locale, overrides, }: OverridesDrawerProps): ReactNode;