@cosmicdrift/kumiko-document-designer 0.413.0 → 0.414.0

package/dist/web/client-plugin.js

@@ -7,6 +7,8 @@ import { createLocalesCell, KindCell, ModifiedCell, OriginCell, OverriddenByCell
 import { DEFAULT_TEMPLATE_LOCALES, DOCUMENT_DESIGNER_FEATURE, DocumentDesignerCells, LAYOUT_EDITOR_SCREEN_ID, MAIL_EDITOR_SCREEN_ID, PDF_TEMPLATE_EDITOR_SCREEN_ID, PLATFORM_LAYOUT_EDITOR_SCREEN_ID, } from "./constants.js";
 import { documentDesignerTranslations } from "./default-translations.js";
 import { DOCUMENT_DESIGNER_I18N } from "./i18n.js";
+import { MailPreviewRenderer } from "./mail-preview-renderer.js";
+import { PdfPreviewRenderer } from "./pdf-preview-renderer.js";
 // The editors pull tiptap, MJML preview and the page canvas; load them on first mount.
 const LazyLayoutEditor = lazy(() => import("./layout-editor.js").then((module) => ({ default: module.LayoutEditor })));
 const LazyPdfTemplateEditor = lazy(() => import("./pdf-template-editor.js").then((module) => ({ default: module.PdfTemplateEditor })));
@@ -47,6 +49,7 @@ export function documentDesignerClient(options = {}) {
             [DocumentDesignerCells.modifiedAt]: ModifiedCell,
             [DocumentDesignerCells.overriddenBy]: OverriddenByCell,
         },
+        contentPreviews: { mail: MailPreviewRenderer, pdf: PdfPreviewRenderer },
         components: {
             [LAYOUT_EDITOR_SCREEN_ID]: LayoutEditorScreen,
             [PLATFORM_LAYOUT_EDITOR_SCREEN_ID]: PlatformLayoutEditorScreen,

package/dist/web/constants.d.ts

@@ -29,3 +29,4 @@ export declare const DocumentDesignerCells: {
 };
 export declare const DEFAULT_TEMPLATE_LOCALES: readonly string[];
 export declare const TENANT_MAIL_SENDING_SCREEN_ID = "mail-foundation-tenant";
+export declare const TEMPLATE_RESOURCE_ENTITY: "template-resource";

package/dist/web/constants.js

@@ -40,3 +40,5 @@ export const DocumentDesignerCells = {
 export const DEFAULT_TEMPLATE_LOCALES = ["de", "en"];
 // Generated settings screen where a tenant admin picks its mail provider.
 export const TENANT_MAIL_SENDING_SCREEN_ID = "mail-foundation-tenant";
+// Pinned like the names above: the entity name is registered by the template-resolver feature.
+export const TEMPLATE_RESOURCE_ENTITY = "template-resource";

package/dist/web/editor-header.d.ts

@@ -1,27 +1,17 @@
 import type { ReactNode } from "react";
-export type EditorMode = "edit" | "preview";
+export type { EditorMode } from "@cosmicdrift/kumiko-renderer/web";
+export { EditorLocaleSwitch, EditorModeSwitch } from "@cosmicdrift/kumiko-renderer/web";
 /** "override" is a tenant row that replaces a system version; "tenant" has no system counterpart. */
 export type EditorOrigin = "system" | "override" | "tenant";
 export declare function originOf(isSystemRow: boolean, hasSystemVersion: boolean): EditorOrigin;
 export declare function OriginBadge({ origin }: {
     readonly origin: EditorOrigin;
 }): ReactNode;
-export declare function EditorModeSwitch({ testIdPrefix, mode, onMode, }: {
-    readonly testIdPrefix: string;
-    readonly mode: EditorMode;
-    readonly onMode: (mode: EditorMode) => void;
-}): ReactNode;
-export declare function EditorLocaleSwitch({ testIdPrefix, locales, locale, onLocale, }: {
-    readonly testIdPrefix: string;
-    readonly locales: readonly string[];
-    readonly locale: string;
-    readonly onLocale: (locale: string) => void;
-}): ReactNode;
 export type StoredVersion = {
     readonly status: string;
     readonly version: number;
 };
-export type EditorSaveActions = {
+export type DesignerSaveActions = {
     readonly busy: boolean;
     readonly canSave: boolean;
     readonly canPublish: boolean;
@@ -31,7 +21,7 @@ export type EditorSaveActions = {
 export declare function EditorHeader({ title, stored, actions, children, }: {
     readonly title: string;
     readonly stored: StoredVersion | null;
-    readonly actions: EditorSaveActions;
+    readonly actions: DesignerSaveActions;
     /** View controls left of the save actions (mode or kind switch). */
     readonly children: ReactNode;
 }): ReactNode;

package/dist/web/editor-header.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
-import { ModeSwitch, StatusBadge } from "@cosmicdrift/kumiko-renderer/web";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { StatusBadge, EditorHeader as WorkbenchHeader } from "@cosmicdrift/kumiko-renderer/web";
 import { asRowStatus, statusLabel, statusTone } from "./status-label.js";
+export { EditorLocaleSwitch, EditorModeSwitch } from "@cosmicdrift/kumiko-renderer/web";
 const ORIGIN_LABEL = {
     system: "documentDesigner.origin.system",
     override: "documentDesigner.origin.override",
@@ -14,29 +15,15 @@ export function OriginBadge({ origin }) {
     const t = useTranslation();
     return (_jsx(StatusBadge, { tone: origin === "system" ? "muted" : "accent", testId: "document-designer-editor-origin", children: t(ORIGIN_LABEL[origin]) }));
 }
-export function EditorModeSwitch({ testIdPrefix, mode, onMode, }) {
-    const t = useTranslation();
-    return (_jsx(ModeSwitch, { value: mode, onChange: onMode, ariaLabel: t("documentDesigner.mail.header.modeSwitch"), testId: `${testIdPrefix}-mode-switch`, options: [
-            { value: "edit", label: t("documentDesigner.mail.header.edit") },
-            { value: "preview", label: t("documentDesigner.mail.header.preview") },
-        ] }));
-}
-export function EditorLocaleSwitch({ testIdPrefix, locales, locale, onLocale, }) {
-    const t = useTranslation();
-    return (_jsx(ModeSwitch, { value: locale, onChange: onLocale, ariaLabel: t("documentDesigner.mail.header.localeSwitch"), testId: `${testIdPrefix}-locale-switch`, options: locales.map((code) => ({ value: code, label: code })) }));
-}
 function StoredStatus({ stored }) {
     const t = useTranslation();
     const status = asRowStatus(stored.status);
     return (_jsx(StatusBadge, { tone: statusTone(status), testId: "document-designer-editor-status", children: statusLabel(t, status, stored.version) }));
 }
-// Title, status and the save/publish actions live in the shell header. The origin badge, the
-// locale switch and the secondary action sit in the info bar below: at 1280px next to the
-// sidebar, assistant and theme toggle the header has no room for them and the title would clip.
+const DESIGNER_HEADER_TEST_IDS = {
+    save: "document-designer-header-save",
+    publish: "document-designer-header-publish",
+};
 export function EditorHeader({ title, stored, actions, children, }) {
-    const t = useTranslation();
-    const { Button, PageHeader } = usePrimitives();
-    if (PageHeader === undefined)
-        return null;
-    return (_jsx(PageHeader, { title: title, status: stored !== null && _jsx(StoredStatus, { stored: stored }), actions: _jsxs("span", { className: "flex items-center gap-2 [&_button]:px-2.5 [&_button]:text-sm", children: [children, _jsxs("span", { className: "hidden items-center gap-2 xl:flex", children: [_jsx(Button, { variant: "secondary", size: "sm", disabled: !actions.canSave, loading: actions.busy, onClick: actions.onSave, testId: "document-designer-header-save", children: t("documentDesigner.editor.save") }), _jsx(Button, { size: "sm", disabled: !actions.canPublish, onClick: actions.onPublish, testId: "document-designer-header-publish", children: t("documentDesigner.editor.publish") })] })] }) }));
+    return (_jsx(WorkbenchHeader, { title: title, status: stored !== null && _jsx(StoredStatus, { stored: stored }), actions: actions, testIds: DESIGNER_HEADER_TEST_IDS, children: children }));
 }

package/dist/web/editor-shell.d.ts

@@ -1,40 +1,13 @@
-import type { ReactNode } from "react";
+import { type InfoBarTone, EditorFooter as WorkbenchFooter, EditorInfoBar as WorkbenchInfoBar } from "@cosmicdrift/kumiko-renderer/web";
+import type { ComponentProps, ReactNode } from "react";
 import { type EditorOrigin } from "./editor-header.tsx";
-export type InfoBarTone = "active" | "muted" | "warn";
-export type FooterTone = "bad" | "warn" | "ok";
-export declare function EditorFrame({ testId, children, }: {
-    readonly testId: string;
-    readonly children: ReactNode;
-}): ReactNode;
-export declare function EditorInfoBar({ tone, testId, origin, controls, links, overlays, children, }: {
+export type { FooterTone, InfoBarTone } from "@cosmicdrift/kumiko-renderer/web";
+export { EditorBody, EditorFrame } from "@cosmicdrift/kumiko-renderer/web";
+export declare function EditorInfoBar({ origin, ...props }: Omit<ComponentProps<typeof WorkbenchInfoBar>, "origin" | "tone"> & {
     readonly tone: InfoBarTone;
-    readonly testId: string;
     readonly origin?: EditorOrigin | null;
-    /** Right side, before the links: locale switch and the editor's secondary action. */
-    readonly controls?: ReactNode;
-    readonly links?: ReactNode;
-    readonly overlays?: ReactNode;
-    readonly children: ReactNode;
-}): ReactNode;
-export declare function EditorBody({ left, center, right, testId, }: {
-    readonly left?: ReactNode;
-    readonly center: ReactNode;
-    readonly right: ReactNode;
-    readonly testId?: string;
 }): ReactNode;
-export declare function EditorFooter({ testIdPrefix, message, saveError, modifiedAt, dirty, busy, canSave, canPublish, onDiscard, onSave, onPublish, }: {
-    readonly testIdPrefix: string;
-    readonly message: {
-        readonly tone: FooterTone;
-        readonly text: string;
-    } | null;
-    readonly saveError: string | null;
-    readonly modifiedAt: string | null;
-    readonly dirty: boolean;
-    readonly busy: boolean;
-    readonly canSave: boolean;
+export declare function EditorFooter(props: Omit<ComponentProps<typeof WorkbenchFooter>, "actionTestIds" | "pendingMessage" | "onPublish" | "canPublish"> & {
     readonly canPublish: boolean;
-    readonly onDiscard: () => void;
-    readonly onSave: () => void;
     readonly onPublish: () => void;
 }): ReactNode;

package/dist/web/editor-shell.js

@@ -1,40 +1,17 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
-import { cn } from "@cosmicdrift/kumiko-renderer/web";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { EditorFooter as WorkbenchFooter, EditorInfoBar as WorkbenchInfoBar, } from "@cosmicdrift/kumiko-renderer/web";
 import { OriginBadge } from "./editor-header.js";
-import { formatRelativeWhen } from "./relative-time.js";
-const INFO_BAR_TONE = {
-    active: "bg-primary/10",
-    muted: "bg-muted",
-    warn: "bg-status-warn-surface",
+export { EditorBody, EditorFrame } from "@cosmicdrift/kumiko-renderer/web";
+const DESIGNER_ACTION_TEST_IDS = {
+    discard: "document-designer-discard",
+    save: "document-designer-save",
+    publish: "document-designer-publish",
 };
-const FOOTER_TONE = {
-    ok: { text: "text-status-ok", glyph: "✓" },
-    warn: { text: "text-status-warn", glyph: "!" },
-    bad: { text: "text-status-bad", glyph: "!" },
-};
-// Height below the shell header: the rails and the center scroll on their own.
-export function EditorFrame({ testId, children, }) {
-    return (_jsx("div", { className: "flex h-[calc(100svh-var(--shell-header-height))] min-h-[600px] flex-col", "data-testid": testId, children: children }));
-}
-export function EditorInfoBar({ tone, testId, origin, controls, links, overlays, children, }) {
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn("flex items-start gap-4 border-b px-6 py-2 text-sm", INFO_BAR_TONE[tone]), "data-testid": testId, "data-variant": tone === "warn" ? "warn" : undefined, children: [_jsxs("span", { className: "min-w-0 flex-1", children: [origin != null && _jsx(OriginBadge, { origin: origin }), " ", children] }), controls !== undefined && (_jsx("div", { className: "flex shrink-0 items-center gap-2", children: controls })), links !== undefined && _jsx("div", { className: "flex shrink-0 items-center gap-4", children: links })] }), overlays] }));
-}
-export function EditorBody({ left, center, right, testId, }) {
-    const centerColumn = (_jsx("div", { className: "flex min-h-0 min-w-0 flex-col overflow-hidden bg-muted", children: center }));
-    if (left === undefined) {
-        return (_jsxs("div", { className: "grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)_280px]", "data-testid": testId, children: [centerColumn, _jsx("aside", { className: "min-h-0 overflow-y-auto border-l bg-background", children: right })] }));
-    }
-    // Three columns leave a narrow window (1024px beside the app sidebar) too little room for the
-    // page: there both rails share the left column, one below the other, and the center keeps its width.
-    // The rail column is display:contents while wide, so both rails stay grid items of their own.
-    return (_jsx("div", { className: "@container flex min-h-0 min-w-0 flex-1", "data-testid": testId, children: _jsxs("div", { className: "grid min-h-0 min-w-0 flex-1 grid-cols-[240px_minmax(0,1fr)_280px] @max-4xl:grid-cols-[240px_minmax(0,1fr)]", children: [_jsxs("div", { className: "contents @max-4xl:block @max-4xl:min-h-0 @max-4xl:overflow-y-auto @max-4xl:border-r @max-4xl:bg-background", children: [_jsx("aside", { className: "min-h-0 overflow-y-auto border-r bg-background @max-4xl:overflow-visible @max-4xl:border-r-0 @max-4xl:border-b", children: left }), _jsx("aside", { className: "order-last min-h-0 overflow-y-auto border-l bg-background @max-4xl:overflow-visible @max-4xl:border-l-0", children: right })] }), centerColumn] }) }));
+export function EditorInfoBar({ origin, ...props }) {
+    return (_jsx(WorkbenchInfoBar, { ...props, origin: origin == null ? undefined : _jsx(OriginBadge, { origin: origin }) }));
 }
-export function EditorFooter({ testIdPrefix, message, saveError, modifiedAt, dirty, busy, canSave, canPublish, onDiscard, onSave, onPublish, }) {
+export function EditorFooter(props) {
     const t = useTranslation();
-    const { Banner, Button, Text } = usePrimitives();
-    const tone = message === null ? null : FOOTER_TONE[message.tone];
-    return (_jsxs("div", { className: "flex items-center gap-4 border-t bg-background px-6 py-3", "data-testid": `${testIdPrefix}-footer`, children: [_jsxs("div", { className: "min-w-0 flex-1 text-sm", children: [saveError !== null ? (_jsx(Banner, { variant: "error", testId: `${testIdPrefix}-save-error`, children: saveError })) : (_jsx("span", { className: cn(tone === null ? "text-muted-foreground" : tone.text), "data-testid": `${testIdPrefix}-footer-message`, "data-tone": message?.tone, children: message === null
-                            ? t("documentDesigner.editor.footer.checking")
-                            : `${tone?.glyph ?? ""} ${message.text}` })), modifiedAt !== null && (_jsxs(_Fragment, { children: [" ", _jsx(Text, { variant: "muted", testId: `${testIdPrefix}-saved-at`, children: t("documentDesigner.mail.footer.savedAt", { when: formatRelativeWhen(modifiedAt) }) })] }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [_jsx(Button, { variant: "ghost", disabled: !dirty, onClick: onDiscard, testId: "document-designer-discard", children: t("documentDesigner.editor.discard") }), _jsx(Button, { variant: "secondary", disabled: !canSave, loading: busy, onClick: onSave, testId: "document-designer-save", children: t("documentDesigner.editor.save") }), _jsx(Button, { disabled: !canPublish, onClick: onPublish, testId: "document-designer-publish", children: t("documentDesigner.editor.publish") })] })] }));
+    return (_jsx(WorkbenchFooter, { ...props, actionTestIds: DESIGNER_ACTION_TEST_IDS, pendingMessage: t("documentDesigner.editor.footer.checking") }));
 }

package/dist/web/errors.d.ts

@@ -1,6 +1,4 @@
-import type { DispatcherError } from "@cosmicdrift/kumiko-renderer/headless";
-type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+import type { DispatcherError, Translate } from "@cosmicdrift/kumiko-renderer/headless";
 export declare function isAlreadyActive(error: DispatcherError): boolean;
 /** Plain-language text for a failed call; falls back to the server message when no translation exists. */
 export declare function describeError(t: Translate, error: DispatcherError): string;
-export {};

package/dist/web/field-issue-text.d.ts

@@ -1,4 +1 @@
-import type { DispatcherError } from "@cosmicdrift/kumiko-renderer/headless";
-type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
-export declare function errorTextWithFieldIssues(error: DispatcherError, translate: Translate): string;
-export {};
+export { dispatcherErrorTextWithFieldIssues as errorTextWithFieldIssues } from "@cosmicdrift/kumiko-renderer";

package/dist/web/field-issue-text.js

@@ -1,11 +1 @@
-import { dispatcherErrorText } from "@cosmicdrift/kumiko-renderer";
-// A validation_error alone says nothing; the server names the offending field
-// and reason per issue, so the user gets those as text.
-export function errorTextWithFieldIssues(error, translate) {
-    const headline = dispatcherErrorText(error, translate);
-    const issues = (error.details?.fields ?? []).map((issue) => {
-        const text = translate(issue.i18nKey, issue.params);
-        return text === issue.i18nKey ? `${issue.path}: ${issue.code}` : text;
-    });
-    return issues.length === 0 ? headline : `${headline} ${issues.join(" ")}`;
-}
+export { dispatcherErrorTextWithFieldIssues as errorTextWithFieldIssues } from "@cosmicdrift/kumiko-renderer";

package/dist/web/index.d.ts

@@ -1,6 +1,7 @@
 export { type DocumentDesignerClientOptions, documentDesignerClient, PdfTemplateEditorScreen, } from "./client-plugin.tsx";
 export { composeLayoutHtml, type LayoutRegionValues } from "./compose-layout.ts";
+export { DOCUMENT_DESIGNER_FEATURE, MAIL_EDITOR_SCREEN_ID, PDF_TEMPLATE_EDITOR_SCREEN_ID, TEMPLATE_EDITOR_SCREENS, type TemplateEditorKind, } from "./constants.ts";
 export { documentDesignerTranslations } from "./default-translations.ts";
 export { PdfTemplateEditor, type PdfTemplateEditorProps } from "./pdf-template-editor.tsx";
 export { type PreviewRecordPicker, type PreviewRecordPickerProps, PreviewRecordPickerProvider, } from "./preview-record-picker.tsx";
-export { usageLabel, usedByLabel } from "./used-by-label.ts";
+export { templateTitle, templateTitleText, usageLabel, usedByLabel } from "./used-by-label.ts";

package/dist/web/index.js

@@ -1,6 +1,7 @@
 export { documentDesignerClient, PdfTemplateEditorScreen, } from "./client-plugin.js";
 export { composeLayoutHtml } from "./compose-layout.js";
+export { DOCUMENT_DESIGNER_FEATURE, MAIL_EDITOR_SCREEN_ID, PDF_TEMPLATE_EDITOR_SCREEN_ID, TEMPLATE_EDITOR_SCREENS, } from "./constants.js";
 export { documentDesignerTranslations } from "./default-translations.js";
 export { PdfTemplateEditor } from "./pdf-template-editor.js";
 export { PreviewRecordPickerProvider, } from "./preview-record-picker.js";
-export { usageLabel, usedByLabel } from "./used-by-label.js";
+export { templateTitle, templateTitleText, usageLabel, usedByLabel } from "./used-by-label.js";

package/dist/web/layout-editor-center.d.ts

@@ -1,6 +1,6 @@
 import type { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import type { Translate } from "@cosmicdrift/kumiko-renderer/headless";
 import type { ReactNode } from "react";
-import type { Translate } from "./layout-editor-logic.ts";
 import type { LayoutEditorBodyProps, LayoutEditorModel } from "./use-layout-editor-state.ts";
 type Banner = ReturnType<typeof usePrimitives>["Banner"];
 export declare function renderCenter(Banner: Banner, t: Translate, props: LayoutEditorBodyProps, m: LayoutEditorModel): ReactNode;

package/dist/web/layout-editor-logic.d.ts

@@ -1,10 +1,10 @@
 import { type useMutation } from "@cosmicdrift/kumiko-renderer";
+import type { Translate } from "@cosmicdrift/kumiko-renderer/headless";
 import type { FooterTone } from "./editor-shell.tsx";
 import { type LayoutAppearance, type LayoutWidth } from "./layout-meta.ts";
 import type { BrandingView, LayoutKind, LayoutSourceView, LayoutValidation, UpsertResponse, ValidationIssue } from "./layout-types.ts";
 export type EditorTab = "draft" | "mjml";
 export type Region = "header" | "signature" | "footer";
-export type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 export declare const REGION_EDITOR_IDS: Readonly<Record<Region, string>>;
 export declare const PAPER_WIDTH_CLASS: Readonly<Record<LayoutWidth, string>>;
 export type FooterMessage = {

package/dist/web/layout-editor-paper.d.ts

@@ -1,4 +1,4 @@
+import type { Translate } from "@cosmicdrift/kumiko-renderer/headless";
 import type { ReactNode } from "react";
-import type { Translate } from "./layout-editor-logic.ts";
 import type { LayoutEditorModel } from "./use-layout-editor-state.ts";
 export declare function renderPaper(t: Translate, m: LayoutEditorModel): ReactNode;

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

@@ -1,9 +1,9 @@
+import type { Translate } from "@cosmicdrift/kumiko-renderer/headless";
 import type { LinkedResourceView, MailDraft, MailVariable, PickedValues, PlaceholderType, TemplateRowView } from "./mail-types.ts";
 export declare const EMPTY_DRAFT: MailDraft;
 export declare const PLACEHOLDER_SYMBOL: Readonly<Record<PlaceholderType, string>>;
 export declare const LAYOUT_OWNED_PLACEHOLDERS: ReadonlySet<string>;
 export declare const SYSTEM_PLACEHOLDER_TYPE: Readonly<Record<string, PlaceholderType>>;
-type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 export declare function systemPlaceholderLabel(t: Translate, name: string): string;
 export declare function labelPlaceholders(line: string, variableLabels: Readonly<Record<string, string>>): string;
 export declare function systemLabelMap(t: Translate, names: readonly string[]): Readonly<Record<string, string>>;
@@ -22,4 +22,3 @@ export type SampleValueFormat = {
     readonly tenantCurrency: string | undefined;
 };
 export declare function displayValue(t: (key: string, params?: Readonly<Record<string, unknown>>) => string, value: unknown, type: PlaceholderType | undefined, format: SampleValueFormat): string;
-export {};

package/dist/web/mail-editor-logic.d.ts

@@ -1,6 +1,6 @@
+import type { Translate } from "@cosmicdrift/kumiko-renderer/headless";
 import type { EditorVocabulary } from "./mail-edit-center.tsx";
 import type { LinkedResourceView, MailDraft, MailValidation, PickedValues, TemplateRowView } from "./mail-types.ts";
-type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 export type MailEditorBodyProps = {
     readonly slug: string;
     readonly locale: string;
@@ -67,4 +67,3 @@ export declare function previewPayload(input: {
     variableSchema: Readonly<Record<string, unknown>>;
     variables?: Readonly<Record<string, unknown>> | undefined;
 };
-export {};

package/dist/web/mail-editor-logic.js

@@ -42,13 +42,11 @@ export function resourcePreviewsOfMail(resources, t) {
 }
 // Nothing is written yet in a missing language, so no placeholder may read as missing.
 export function railValidationOf(locked, validation) {
-    return locked && validation != null
-        ? { ...validation, missingRequired: [] }
-        : (validation ?? null);
+    return locked && validation !== null ? { ...validation, missingRequired: [] } : validation;
 }
 export function vocabularyOf(t, validation) {
     return {
-        names: placeholderNames(validation ?? null),
+        names: placeholderNames(validation),
         labels: {
             ...systemLabelMap(t, validation?.systemPlaceholders ?? []),
             ...variableLabelMap(t, validation?.variables ?? {}),

package/dist/web/mail-editor-model.d.ts

@@ -1,8 +1,8 @@
+import type { Translate } from "@cosmicdrift/kumiko-renderer/headless";
 import type { LeaveTarget } from "./mail-dialogs.tsx";
 import { type MailEditorBodyProps } from "./mail-editor-logic.ts";
 import type { MailDraft, MailValidation, PickedValues } from "./mail-types.ts";
 import type { MailServices, MailUiState } from "./use-mail-editor-parts.ts";
-type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 export type MailModelInput = {
     readonly props: MailEditorBodyProps;
     readonly t: Translate;
@@ -31,8 +31,8 @@ export declare function buildMailModel(input: MailModelInput): {
         setDraft: import("react").Dispatch<import("react").SetStateAction<MailDraft>>;
         settled: MailDraft;
         settle: (next: MailDraft) => void;
-        mode: import("./editor-header.tsx").EditorMode;
-        setMode: import("react").Dispatch<import("react").SetStateAction<import("./editor-header.tsx").EditorMode>>;
+        mode: import("@cosmicdrift/kumiko-renderer/web").EditorMode;
+        setMode: import("react").Dispatch<import("react").SetStateAction<import("@cosmicdrift/kumiko-renderer/web").EditorMode>>;
         creating: boolean;
         setCreating: import("react").Dispatch<import("react").SetStateAction<boolean>>;
         dialog: import("./mail-dialogs.tsx").ConfirmDialog;
@@ -102,4 +102,3 @@ export declare function buildMailModel(input: MailModelInput): {
     fieldErrors: Partial<Record<"previewText" | "subject", string>>;
 };
 export type MailEditorModel = ReturnType<typeof buildMailModel>;
-export {};

package/dist/web/mail-editor-model.js

@@ -82,7 +82,7 @@ export function buildMailModel(input) {
         templateTitleText(t, template.title),
     ]));
     const uploadTemplateId = row?.scope === "tenant" ? row.id : null;
-    const footer = locked || validation === undefined || validation === null
+    const footer = locked || validation === null
         ? null
         : footerMessage(t, validation, ui.mode === "preview" && services.testMail.availability.canSend);
     return {

package/dist/web/mail-editor-render.d.ts

@@ -1,8 +1,8 @@
 import type { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import type { Translate } from "@cosmicdrift/kumiko-renderer/headless";
 import type { ReactNode } from "react";
 import type { MailEditorBodyProps } from "./mail-editor-logic.ts";
 import type { MailEditorModel } from "./mail-editor-model.ts";
-type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 type Banner = ReturnType<typeof usePrimitives>["Banner"];
 export declare function renderMailControls(props: MailEditorBodyProps, m: MailEditorModel): ReactNode;
 export declare function renderMailBanners(Banner: Banner, t: Translate, m: MailEditorModel): ReactNode;

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

@@ -1,5 +1,5 @@
+import type { Translate } from "@cosmicdrift/kumiko-renderer/headless";
 import type { MailValidation } from "./mail-types.ts";
-type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 export declare function footerMessage(t: Translate, validation: MailValidation, offersTestMail: boolean): {
     readonly tone: "bad" | "warn" | "ok";
     readonly text: string;

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

@@ -1,6 +1,6 @@
+import type { Translate } from "@cosmicdrift/kumiko-renderer/headless";
 import { type ReactNode } from "react";
 import type { TemplateRowView } from "./mail-types.ts";
-type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 export declare function languageName(t: Translate, locale: string): string;
 export declare function MailOriginBar({ row, systemVersion, locale, isSystemAdmin, creating, controls, onReload, onResetError, }: {
     readonly row: TemplateRowView | null;
@@ -12,4 +12,3 @@ export declare function MailOriginBar({ row, systemVersion, locale, isSystemAdmi
     readonly onReload: () => void;
     readonly onResetError: (message: string) => void;
 }): ReactNode;
-export {};

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

@@ -10,7 +10,7 @@ export function renderMailPreview(props, m, controls, origin) {
             settled: ui.settled,
             variableSchema: m.variableSchema,
             pickedVariables: m.pickedVariables,
-        }), picked: m.picked, onPick: m.setPicked, validation: m.validation ?? null, slug: props.slug, locale: props.locale, fromName: ui.settled.senderName, own: services.own, origin: origin, controls: controls, testMail: {
+        }), picked: m.picked, onPick: m.setPicked, validation: m.validation, slug: props.slug, locale: props.locale, fromName: ui.settled.senderName, own: services.own, origin: origin, controls: controls, testMail: {
             availability: testMail.availability,
             pending: testMail.pending,
             onSend: m.sendTestMail,

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

@@ -0,0 +1,15 @@
+import { type PreviewRenderer } from "@cosmicdrift/kumiko-renderer";
+import type { MailPreview } from "./mail-types.ts";
+import type { OwnAddress } from "./use-own-address.ts";
+export type PreviewFormat = "html" | "text";
+export type PreviewWidth = "desktop" | "mobile";
+/** View state the mail editor keeps in its info bar; the renderer shows what it says. */
+export type MailPreviewView = {
+    readonly format: PreviewFormat;
+    readonly width: PreviewWidth;
+    readonly fromName: string;
+    readonly own: OwnAddress | null;
+};
+export declare const MailPreviewViewContext: import("react").Context<MailPreviewView>;
+export declare function isMailPreview(value: unknown): value is MailPreview;
+export declare const MailPreviewRenderer: PreviewRenderer;

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

@@ -0,0 +1,61 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { dispatcherErrorText, usePrimitives, useQuery, useTranslation, } from "@cosmicdrift/kumiko-renderer";
+import { LoadingState } from "@cosmicdrift/kumiko-renderer/web";
+import { isPlainObject } from "@cosmicdrift/kumiko-types/type-guards";
+import { createContext, useContext, useEffect } from "react";
+import { formatKilobytes } from "./mail-draft.js";
+const DEFAULT_VIEW = { format: "html", width: "desktop", fromName: "", own: null };
+export const MailPreviewViewContext = createContext(DEFAULT_VIEW);
+export function isMailPreview(value) {
+    return isPlainObject(value) && typeof value["html"] === "string";
+}
+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 })] }));
+}
+// 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 ?? null;
+    return typeof email === "string" && email !== "" ? `${name} <${email}>` : name;
+}
+function MailFrame({ preview, view, }) {
+    const t = useTranslation();
+    const { format, width, fromName } = view;
+    const recipient = recipientOf(preview, view.own);
+    const attachments = preview.attachments.flatMap((a) => attachmentText(t, a) ?? []);
+    return (_jsxs("div", { className: "mx-auto flex min-h-0 w-full max-w-[680px] flex-1 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: `min-h-[420px] flex-1 border-0 bg-background ${width === "mobile" ? "w-[375px] self-center" : "w-full"}`, "data-testid": "mail-preview-iframe" })) : (_jsx("pre", { className: "min-h-[420px] flex-1 overflow-auto whitespace-pre-wrap p-4 font-mono text-sm", "data-testid": "mail-preview-text", children: preview.text ?? "" }))] }));
+}
+// The mail target: renders through `query:preview` (admin access), which composes the layout,
+// substitutes sample values and returns subject, html and text.
+export const MailPreviewRenderer = ({ content, variables, subject, onResult, }) => {
+    const t = useTranslation();
+    const { Banner } = usePrimitives();
+    const view = useContext(MailPreviewViewContext);
+    const hasVariables = Object.keys(variables).length > 0;
+    const query = useQuery(TemplateResolverQueries.preview, {
+        slug: subject.kind === "template" ? subject.slug : "",
+        kind: "mail",
+        locale: subject.kind === "template" ? subject.locale : "",
+        content,
+        meta: subject.kind === "template" ? subject.meta : {},
+        variableSchema: subject.kind === "template" ? subject.variableSchema : undefined,
+        ...(hasVariables && { variables }),
+    }, { enabled: subject.kind === "template" });
+    const preview = query.data;
+    useEffect(() => {
+        onResult?.(preview);
+    }, [preview, onResult]);
+    return (_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, view: view }))] }));
+};

package/dist/web/mail-preview.js

@@ -1,36 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 { PreviewPane, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { ModeSwitch } from "@cosmicdrift/kumiko-renderer/web";
+import { useCallback, useMemo, useState } from "react";
 import { EditorBody, EditorInfoBar } from "./editor-shell.js";
-import { formatKilobytes } from "./mail-draft.js";
+import { isMailPreview, MailPreviewViewContext, } from "./mail-preview-renderer.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 min-h-0 w-full max-w-[680px] flex-1 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: `min-h-[420px] flex-1 border-0 bg-background ${width === "mobile" ? "w-[375px] self-center" : "w-full"}`, "data-testid": "mail-preview-iframe" })) : (_jsx("pre", { className: "min-h-[420px] flex-1 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")
@@ -38,16 +12,23 @@ function layoutText(t, preview) {
 }
 export function MailPreviewMode({ payload, validation, slug, locale, fromName, own, controls, origin, testMail, picked, onPick, }) {
     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;
+    const [preview, setPreview] = useState(null);
+    const onResult = useCallback((result) => setPreview(isMailPreview(result) ? result : null), []);
+    const view = useMemo(() => ({ format, width, fromName, own }), [format, width, fromName, own]);
     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, picked: picked, onPick: onPick }) })] }));
+                            ] })] }), children: layoutText(t, preview) }), _jsx(EditorBody, { testId: "mail-editor-preview", center: _jsx(MailPreviewViewContext.Provider, { value: view, children: _jsx(PreviewPane, { target: "mail", content: payload.content, editFormat: "document", variables: payload.variables ?? {}, subject: {
+                            kind: "template",
+                            templateKind: payload.kind,
+                            slug: payload.slug,
+                            locale: payload.locale,
+                            meta: payload.meta,
+                            variableSchema: payload.variableSchema,
+                        }, onResult: onResult }) }), right: _jsx(PreviewSide, { preview: preview, validation: validation, slug: slug, locale: locale, own: own, testMail: testMail, picked: picked, onPick: onPick }) })] }));
 }

package/dist/web/pdf-editor-actions.d.ts

@@ -1,8 +1,8 @@
 import type { useDispatcher } from "@cosmicdrift/kumiko-renderer";
+import type { Translate } from "@cosmicdrift/kumiko-renderer/headless";
 import { type Draft, type EditorState } from "./pdf-editor-draft.ts";
 import { type TemplateDetail } from "./types.ts";
 import type { PdfEditorState } from "./use-pdf-editor-state.ts";
-type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 export type PdfActionsInput = {
     readonly s: PdfEditorState;
     readonly t: Translate;
@@ -24,4 +24,3 @@ export declare function buildPdfActions(input: PdfActionsInput): {
     requestLocale: (next: string) => void;
 };
 export type PdfActions = ReturnType<typeof buildPdfActions>;
-export {};

package/dist/web/pdf-editor-actions.js

@@ -38,7 +38,7 @@ function writeActions(input) {
     }
     async function persist() {
         const { draft } = current;
-        const parentTemplateId = detail?.scope === "system" ? detail.id : detail?.parentTemplateId;
+        const parentTemplateId = detail.scope === "system" ? detail.id : detail.parentTemplateId;
         const result = await dispatcher.write(scope === "system"
             ? TemplateResolverHandlers.upsertSystem
             : TemplateResolverHandlers.upsertTenant, {
@@ -72,16 +72,14 @@ function writeActions(input) {
         setActionError(null);
         // A system save activates immediately; a tenant row needs a save first when it
         // does not exist yet or carries unsaved edits, then an explicit publish.
-        const needsSave = dirty || detail?.scope === "system";
+        const needsSave = dirty || detail.scope === "system";
         const saved = needsSave ? await persist() : null;
         const saveFailed = needsSave && saved === null;
-        // upsertSystem already activates, so only a tenant row needs the explicit publish.
-        const alreadyActivatedBySave = scope === "system" && saved !== null;
-        const templateId = saved?.id ?? detail?.id ?? null;
-        if (templateId !== null && !saveFailed && !alreadyActivatedBySave) {
-            const result = await dispatcher.write(scope === "system"
-                ? TemplateResolverHandlers.publishSystem
-                : TemplateResolverHandlers.publish, { id: templateId });
+        // A system host always saves above and upsertSystem activates, so only a tenant row publishes.
+        if (scope === "tenant" && !saveFailed) {
+            const result = await dispatcher.write(TemplateResolverHandlers.publish, {
+                id: saved?.id ?? detail.id,
+            });
             if (!result.isSuccess && !isAlreadyActive(result.error))
                 setActionError(describeError(t, result.error));
         }
@@ -123,7 +121,7 @@ function pdfActions(input) {
     async function uploadResource(file) {
         const sourceFileRefId = await uploadFileRef(file);
         const result = await dispatcher.write(TemplateResolverHandlers.resourceUpload, {
-            templateId: detail?.id,
+            templateId: detail.id,
             sourceFileRefId,
         });
         if (!result.isSuccess)

package/dist/web/pdf-editor-context.d.ts

@@ -1,10 +1,10 @@
 import type { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import type { Translate } from "@cosmicdrift/kumiko-renderer/headless";
 import type { PdfActions } from "./pdf-editor-actions.ts";
 import type { EditorState } from "./pdf-editor-draft.ts";
 import type { PdfView } from "./pdf-editor-view.ts";
 import type { TemplateDetail } from "./types.ts";
 import type { PdfEditorState } from "./use-pdf-editor-state.ts";
-type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 type Primitives = ReturnType<typeof usePrimitives>;
 export type PdfRenderContext = {
     readonly t: Translate;

package/dist/web/pdf-editor-panes.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 import type { PdfRenderContext } from "./pdf-editor-context.ts";
 export declare function renderPdfLeftRail(c: PdfRenderContext): ReactNode;
 export declare function renderPdfEditCanvas(c: PdfRenderContext): ReactNode;

package/dist/web/pdf-editor-panes.js

@@ -1,17 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PdfPreview } from "@cosmicdrift/kumiko-renderer/web";
-import { useEffect } from "react";
+import { PreviewPane } from "@cosmicdrift/kumiko-renderer";
 import { PlaceholderSection, SystemPlaceholderSection } from "./mail-left-rail.js";
 import { PageCanvas } from "./page-canvas.js";
 import { PdfResourceSection } from "./pdf-left-rail.js";
+import { serializePdfMeta } from "./pdf-meta.js";
+import { PdfPreviewControllerContext } from "./pdf-preview-renderer.js";
 import { SettingsPanel } from "./settings-panel.js";
-// Opening the preview prints the page without a click; a failed print is not retried for the same draft.
-function RunOnMount({ run }) {
-    useEffect(() => {
-        run();
-    }, [run]);
-    return null;
-}
+import { DOCUMENT_PDF_KIND } from "./types.js";
 export function renderPdfLeftRail(c) {
     const { s, view, detail, actions } = c;
     const { insert, filesAvailable, scope } = s.host;
@@ -23,16 +18,24 @@ export function renderPdfEditCanvas(c) {
     const { vocabulary } = s;
     return (_jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", onFocusCapture: insert.markFocused("body"), children: _jsx(PageCanvas, { meta: current.draft.meta, content: current.draft.content, onContentChange: (content) => actions.updateDraft({ ...current.draft, content }), regions: s.server.layout?.regions ?? null, layoutName: view.layoutName, resourceSrc: view.layoutResourceSrc, variableLabels: vocabulary.variableLabels, systemVariables: vocabulary.systemVariables, systemLabels: vocabulary.systemLabels, variableNames: vocabulary.variableNames, imageVariables: vocabulary.imageVariables, resourcePreviews: vocabulary.resourcePreviews, onEditorReady: insert.register("body") }) }));
 }
-function renderStalePreview(c) {
-    const { t, Button, s, view, actions } = c;
-    const { busy } = s.ui;
-    return (_jsxs("div", { className: "flex flex-col items-start gap-3 p-6", "data-testid": "document-designer-preview-stale", children: [view.pdfAvailable && busy === null && _jsx(RunOnMount, { run: actions.printOnce }), _jsx("p", { className: "text-sm text-muted-foreground", children: busy === "pdf"
-                    ? t("documentDesigner.preview.loading")
-                    : t("documentDesigner.preview.stale") }), _jsx(Button, { variant: "secondary", disabled: !view.pdfAvailable || busy !== null, onClick: () => void actions.generatePdf(), children: t("documentDesigner.actions.generatePdf") })] }));
-}
 export function renderPdfPreviewPane(c) {
-    const { generated } = c.s.ui;
-    return (_jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: generated !== null && c.view.generatedFresh ? (_jsx(PdfPreview, { source: { base64: generated.result.pdfBase64 }, testId: "document-designer-pdf-preview" })) : (renderStalePreview(c)) }));
+    const { s, view, actions, current, slug } = c;
+    const { busy, generated } = s.ui;
+    const controller = {
+        fresh: generated !== null && view.generatedFresh ? generated.result : null,
+        printing: busy === "pdf",
+        available: view.pdfAvailable && busy === null,
+        generate: () => void actions.generatePdf(),
+        printOnce: actions.printOnce,
+    };
+    return (_jsx(PdfPreviewControllerContext.Provider, { value: controller, children: _jsx(PreviewPane, { target: "pdf", content: current.draft.content, editFormat: "document", variables: {}, subject: {
+                kind: "template",
+                templateKind: DOCUMENT_PDF_KIND,
+                slug,
+                locale: s.doc.locale,
+                meta: serializePdfMeta(current.draft.meta),
+                variableSchema: s.server.variableSchema,
+            } }) }));
 }
 export function renderPdfSettings(c) {
     const { s, view, current, detail, actions } = c;

package/dist/web/pdf-editor-view.d.ts

@@ -1,7 +1,7 @@
+import type { Translate } from "@cosmicdrift/kumiko-renderer/headless";
 import type { EditorState } from "./pdf-editor-draft.ts";
 import { type TemplateDetail } from "./types.ts";
 import type { PdfEditorState } from "./use-pdf-editor-state.ts";
-type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 export declare function buildPdfView(input: {
     readonly t: Translate;
     readonly s: PdfEditorState;
@@ -20,8 +20,8 @@ export declare function buildPdfView(input: {
     placeholderSource: {
         canSave: boolean;
         canPublish: boolean;
-        issues: readonly import("@cosmicdrift/kumiko-framework/errors").FieldIssue[];
-        publishIssues: readonly import("@cosmicdrift/kumiko-framework/errors").FieldIssue[];
+        issues: readonly import("@cosmicdrift/kumiko-renderer/headless").FieldIssue[];
+        publishIssues: readonly import("@cosmicdrift/kumiko-renderer/headless").FieldIssue[];
         used: readonly string[];
         unknown: readonly string[];
         missingRequired: readonly string[];
@@ -41,7 +41,7 @@ export declare function buildPdfView(input: {
         system: readonly string[];
     };
     footer: {
-        readonly tone: import("./editor-shell.tsx").FooterTone;
+        readonly tone: import("@cosmicdrift/kumiko-renderer/web").FooterTone;
         readonly text: string;
     } | null;
     showOverrideLinks: boolean;
@@ -49,4 +49,3 @@ export declare function buildPdfView(input: {
     besideActiveSentence: string | null;
 };
 export type PdfView = ReturnType<typeof buildPdfView>;
-export {};

package/dist/web/pdf-footer.d.ts

@@ -1,6 +1,6 @@
+import type { Translate } from "@cosmicdrift/kumiko-renderer/headless";
 import type { FooterTone } from "./editor-shell.tsx";
 import type { ValidationResult } from "./types.ts";
-type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 export type GeneratedProbe = {
     readonly pages: number;
     readonly sizeBytes: number;
@@ -10,4 +10,3 @@ export declare function pdfFooterMessage(t: Translate, validation: ValidationRes
     readonly tone: FooterTone;
     readonly text: string;
 };
-export {};

package/dist/web/pdf-preview-renderer.d.ts

@@ -0,0 +1,14 @@
+import { type PreviewRenderer } from "@cosmicdrift/kumiko-renderer";
+import type { PdfPreviewResult } from "./types.ts";
+/** What the PDF editor knows about the printed page: print state is shared with its header and footer buttons. */
+export type PdfPreviewController = {
+    /** The printed page when it matches the current draft, else null. */
+    readonly fresh: PdfPreviewResult | null;
+    readonly printing: boolean;
+    readonly available: boolean;
+    readonly generate: () => void;
+    /** Prints once per draft; opening the preview prints without a click. */
+    readonly printOnce: () => void;
+};
+export declare const PdfPreviewControllerContext: import("react").Context<PdfPreviewController | null>;
+export declare const PdfPreviewRenderer: PreviewRenderer;

package/dist/web/pdf-preview-renderer.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { PdfPreview } from "@cosmicdrift/kumiko-renderer/web";
+import { createContext, useContext, useEffect } from "react";
+export const PdfPreviewControllerContext = createContext(null);
+function RunOnMount({ run }) {
+    useEffect(() => {
+        run();
+    }, [run]);
+    return null;
+}
+// The pdf target: the page is printed by the print service on demand (`previewPdf`, started by the
+// editor so its header and footer share the state) and shown in the PDF viewer.
+export const PdfPreviewRenderer = () => {
+    const t = useTranslation();
+    const { Button } = usePrimitives();
+    const controller = useContext(PdfPreviewControllerContext);
+    if (controller === null)
+        return null;
+    const { fresh, printing, available, generate, printOnce } = controller;
+    return (_jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: fresh !== null ? (_jsx(PdfPreview, { source: { base64: fresh.pdfBase64 }, testId: "document-designer-pdf-preview" })) : (_jsxs("div", { className: "flex flex-col items-start gap-3 p-6", "data-testid": "document-designer-preview-stale", children: [available && !printing && _jsx(RunOnMount, { run: printOnce }), _jsx("p", { className: "text-sm text-muted-foreground", children: printing ? t("documentDesigner.preview.loading") : t("documentDesigner.preview.stale") }), _jsx(Button, { variant: "secondary", disabled: !available || printing, onClick: generate, children: t("documentDesigner.actions.generatePdf") })] })) }));
+};

package/dist/web/pdf-template-editor.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 export type PdfTemplateEditorProps = {
     readonly slug: string;
     /** Template locale; defaults to "de", or the first locale the slug has. */

package/dist/web/pdf-template-editor.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
-import { useDispatcher, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { useDispatcher, usePrimitives, useSetScreenFocus, useTranslation, } from "@cosmicdrift/kumiko-renderer";
 import { ErrorState, LoadingState } from "@cosmicdrift/kumiko-renderer/web";
+import { useMemo } from "react";
+import { TEMPLATE_RESOURCE_ENTITY } from "./constants.js";
 import { EditorBody, EditorFrame } from "./editor-shell.js";
 import { describeError } from "./errors.js";
 import { buildPdfActions } from "./pdf-editor-actions.js";
 import { renderPdfFooter, renderPdfHeader, renderPdfInfoBar, renderPdfLocaleDialog, } from "./pdf-editor-chrome.js";
 import { renderPdfEditCanvas, renderPdfLeftRail, renderPdfPreviewPane, renderPdfSettings, } from "./pdf-editor-panes.js";
 import { buildPdfView } from "./pdf-editor-view.js";
+import { parsePdfMeta } from "./pdf-meta.js";
 import { DOCUMENT_PDF_KIND } from "./types.js";
 import { usePdfEditorState } from "./use-pdf-editor-state.js";
 export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChange, }) {
@@ -16,6 +19,16 @@ export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChang
     const { Button, Banner, Dialog } = usePrimitives();
     const s = usePdfEditorState({ slug, requestedLocale }, t);
     const { rowsQuery, row, current, detail, detailQuery } = s.doc;
+    // Persisted values only: unsaved draft content never reaches the focus.
+    const focus = useMemo(() => row === undefined
+        ? null
+        : {
+            entityName: TEMPLATE_RESOURCE_ENTITY,
+            recordId: row.id,
+            label: (detail !== null ? parsePdfMeta(detail.meta).title : "") || slug,
+            facts: { slug: row.slug, kind: row.kind, locale: row.locale },
+        }, [row, detail, slug]);
+    useSetScreenFocus(focus);
     if (rowsQuery.loading && rowsQuery.data === null)
         return _jsx(LoadingState, {});
     if (rowsQuery.error !== null)

package/dist/web/rail.d.ts

@@ -1,32 +1 @@
-import type { ReactNode } from "react";
-export declare function RailSection({ title, action, testId, children, }: {
-    readonly title: string;
-    readonly action?: ReactNode;
-    readonly testId?: string;
-    readonly children: ReactNode;
-}): ReactNode;
-export declare function RailField({ children }: {
-    readonly children: ReactNode;
-}): ReactNode;
-declare const TRAILING_TONE: {
-    readonly ok: "text-status-ok";
-    readonly bad: "text-status-bad";
-    readonly muted: "text-muted-foreground";
-};
-export declare function RailRow({ symbol, label, nameHint, required, trailing, trailingTone, action, bad, testId, onPress, }: {
-    readonly symbol?: string;
-    readonly label: string;
-    /** Technical name behind a translated label, shown as tooltip. */
-    readonly nameHint?: string;
-    readonly required?: boolean;
-    readonly trailing?: ReactNode;
-    readonly trailingTone?: keyof typeof TRAILING_TONE;
-    readonly action?: ReactNode;
-    readonly bad?: boolean;
-    readonly testId?: string;
-    readonly onPress?: () => void;
-}): ReactNode;
-export declare function RailHint({ children }: {
-    readonly children: ReactNode;
-}): ReactNode;
-export {};
+export { RailField, RailHint, RailRow, RailSection } from "@cosmicdrift/kumiko-renderer/web";

package/dist/web/rail.js

@@ -1,31 +1 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "@cosmicdrift/kumiko-renderer/web";
-export function RailSection({ title, action, testId, children, }) {
-    return (_jsxs("section", { className: "flex flex-col border-b pb-1", "data-testid": testId, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 px-3.5 pt-2.5 pb-1", children: [_jsx("span", { className: "min-w-0 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: title }), action !== undefined && _jsx("div", { className: "ml-auto", children: action })] }), children] }));
-}
-export function RailField({ children }) {
-    return _jsx("div", { className: "flex flex-col gap-3 px-3.5 py-2", children: children });
-}
-const TRAILING_TONE = {
-    ok: "text-status-ok",
-    bad: "text-status-bad",
-    muted: "text-muted-foreground",
-};
-// The star rides on the last word so a wrapping label never leaves it alone on a line.
-function RequiredLabel({ label }) {
-    const lastSpace = label.lastIndexOf(" ");
-    return (_jsxs(_Fragment, { children: [label.slice(0, lastSpace + 1), _jsxs("span", { className: "whitespace-nowrap", children: [label.slice(lastSpace + 1), _jsx("span", { className: "font-semibold text-status-bad", children: " *" })] })] }));
-}
-export function RailRow({ symbol, label, nameHint, required, trailing, trailingTone = "muted", action, bad, testId, onPress, }) {
-    const content = (_jsxs(_Fragment, { children: [symbol !== undefined && (_jsx("span", { className: "inline-flex h-[18px] w-[22px] shrink-0 items-center justify-center rounded-sm bg-muted font-mono text-xs text-muted-foreground", children: symbol })), _jsx("span", { className: cn(
-                // anywhere, not break-word: only it lets a file name without spaces narrow the min-content
-                // width, so the label wraps instead of running under the action.
-                "min-w-0 grow wrap-anywhere text-sm", trailing !== undefined && "min-w-min max-w-[65%] shrink-0", bad === true && "text-status-bad"), title: nameHint !== undefined && nameHint !== label ? nameHint : undefined, children: required === true ? _jsx(RequiredLabel, { label: label }) : label }), trailing !== undefined && (_jsx("span", { className: cn("min-w-0 text-xs", action !== undefined ? "basis-full wrap-anywhere" : "truncate text-right", bad === true ? "text-status-bad" : TRAILING_TONE[trailingTone]), title: typeof trailing === "string" ? trailing : undefined, children: trailing }))] }));
-    // Beside an action the row is too narrow for label and trailing text: the trailing text takes its
-    // own line and wraps there instead of being clipped to an ellipsis.
-    const rowClass = cn("flex min-h-10 min-w-0 grow items-center gap-2 px-3.5 text-left", action !== undefined && "flex-wrap gap-y-0.5 py-1");
-    return (_jsxs("div", { className: cn("flex items-center border-b", bad === true && "bg-status-bad-surface"), "data-testid": testId, "data-bad": bad === true ? "true" : undefined, children: [onPress === undefined ? (_jsx("div", { className: rowClass, children: content })) : (_jsx("button", { type: "button", onClick: onPress, className: cn(rowClass, "hover:bg-muted"), ...(testId !== undefined && { "data-testid": `${testId}-insert` }), children: content })), action !== undefined && _jsx("div", { className: "shrink-0 pr-2", children: action })] }));
-}
-export function RailHint({ children }) {
-    return _jsx("p", { className: "px-3.5 pt-1 pb-2 text-xs text-muted-foreground", children: children });
-}
+export { RailField, RailHint, RailRow, RailSection } from "@cosmicdrift/kumiko-renderer/web";

package/dist/web/status-label.d.ts

@@ -1,6 +1,6 @@
+import type { Translate } from "@cosmicdrift/kumiko-renderer/headless";
 import type { StatusBadgeTone } from "@cosmicdrift/kumiko-renderer/web";
 import type { OverviewRowView } from "./overview-row.ts";
-type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 export declare function statusTone(status: OverviewRowView["status"]): StatusBadgeTone;
 export declare function statusLabel(t: Translate, status: OverviewRowView["status"], version: number): string;
 export declare function draftBesideActiveSentence(t: Translate, row: {
@@ -11,4 +11,3 @@ export declare function draftBesideActiveSentence(t: Translate, row: {
     } | null;
 }): string | null;
 export declare function asRowStatus(status: string): OverviewRowView["status"];
-export {};

package/dist/web/use-debounced-value.d.ts

@@ -1 +1 @@
-export declare function useDebouncedValue<T>(value: T, delayMs: number): T;
+export { useDebouncedValue } from "@cosmicdrift/kumiko-renderer";

package/dist/web/use-debounced-value.js

@@ -1,11 +1 @@
-import { useEffect, useState } from "react";
-// Unlike useDeferredValue this waits for a quiet period, so a burst of
-// keystrokes triggers one server round-trip instead of one per keystroke.
-export function useDebouncedValue(value, delayMs) {
-    const [debounced, setDebounced] = useState(value);
-    useEffect(() => {
-        const timer = setTimeout(() => setDebounced(value), delayMs);
-        return () => clearTimeout(timer);
-    }, [value, delayMs]);
-    return debounced;
-}
+export { useDebouncedValue } from "@cosmicdrift/kumiko-renderer";

package/dist/web/use-layout-editor-state.d.ts

@@ -1,4 +1,5 @@
-import { type EditorTab, type Region, type Translate } from "./layout-editor-logic.ts";
+import type { Translate } from "@cosmicdrift/kumiko-renderer/headless";
+import { type EditorTab, type Region } from "./layout-editor-logic.ts";
 import type { LayoutKind, LayoutSourceView, LayoutValidation, TenantOverrideCounts } from "./layout-types.ts";
 import type { OverviewRowView } from "./overview-row.ts";
 export type LayoutEditorBodyProps = {

package/dist/web/use-mail-editor-state.d.ts

@@ -1,6 +1,6 @@
+import type { Translate } from "@cosmicdrift/kumiko-renderer/headless";
 import type { MailEditorBodyProps } from "./mail-editor-logic.ts";
 import type { MailValidation, PickedValues } from "./mail-types.ts";
-type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 export declare function useMailEditorState(props: MailEditorBodyProps, t: Translate): {
     update: (patch: Partial<import("./mail-types.ts").MailDraft>) => void;
     reset: () => void;
@@ -16,8 +16,8 @@ export declare function useMailEditorState(props: MailEditorBodyProps, t: Transl
         setDraft: import("react").Dispatch<import("react").SetStateAction<import("./mail-types.ts").MailDraft>>;
         settled: import("./mail-types.ts").MailDraft;
         settle: (next: import("./mail-types.ts").MailDraft) => void;
-        mode: import("./editor-header.tsx").EditorMode;
-        setMode: import("react").Dispatch<import("react").SetStateAction<import("./editor-header.tsx").EditorMode>>;
+        mode: import("@cosmicdrift/kumiko-renderer/web").EditorMode;
+        setMode: import("react").Dispatch<import("react").SetStateAction<import("@cosmicdrift/kumiko-renderer/web").EditorMode>>;
         creating: boolean;
         setCreating: import("react").Dispatch<import("react").SetStateAction<boolean>>;
         dialog: import("./mail-dialogs.tsx").ConfirmDialog;
@@ -86,4 +86,3 @@ export declare function useMailEditorState(props: MailEditorBodyProps, t: Transl
     } | null;
     fieldErrors: Partial<Record<"previewText" | "subject", string>>;
 };
-export {};

package/dist/web/use-pdf-editor-state.d.ts

@@ -1,7 +1,7 @@
+import type { Translate } from "@cosmicdrift/kumiko-renderer/headless";
 import type { EditorMode } from "./editor-header.tsx";
 import { type EditorState, type GeneratedPdf } from "./pdf-editor-draft.ts";
 import { type PuppeteerStatus, type TemplateDetail, type TemplateListRow, type TemplateScope, type TenantOverrides, type ValidationResult } from "./types.ts";
-type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 export declare function usePdfEditorState(input: {
     readonly slug: string;
     readonly requestedLocale: string | undefined;
@@ -74,4 +74,3 @@ export declare function usePdfEditorState(input: {
     };
 };
 export type PdfEditorState = ReturnType<typeof usePdfEditorState>;
-export {};

package/dist/web/used-by-label.d.ts

@@ -1,5 +1,5 @@
+import type { Translate } from "@cosmicdrift/kumiko-renderer/headless";
 import type { OverviewRowView, OverviewUsageView } from "./overview-row.ts";
-type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
 export declare function variableLabelText(t: Translate, name: string, label: string | undefined): string;
 export declare function templateTitleText(t: Translate, title: string): string;
 export declare function templateTitle(t: Translate, row: Pick<OverviewRowView, "title" | "slug" | "kind">): string;
@@ -9,4 +9,3 @@ export declare function usageParts(t: Translate, usage: OverviewUsageView): {
 };
 export declare function usageLabel(t: Translate, usage: OverviewUsageView): string;
 export declare function usedByLabel(t: Translate, row: OverviewRowView): string;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-document-designer",
-  "version": "0.413.0",
+  "version": "0.414.0",
   "description": "Document designer for Kumiko: template overview, layout editor (mail layout, PDF letterhead) and the PDF template editor.",
   "license": "MIT",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -20,11 +20,11 @@
     "./web/styles.css": "./src/web/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-bundled-features": "0.413.0",
-    "@cosmicdrift/kumiko-framework": "0.413.0",
-    "@cosmicdrift/kumiko-renderer": "0.413.0",
-    "@cosmicdrift/kumiko-renderer-puppeteer-client": "0.413.0",
-    "@cosmicdrift/kumiko-types": "0.413.0",
+    "@cosmicdrift/kumiko-bundled-features": "0.414.0",
+    "@cosmicdrift/kumiko-framework": "0.414.0",
+    "@cosmicdrift/kumiko-renderer": "0.414.0",
+    "@cosmicdrift/kumiko-renderer-puppeteer-client": "0.414.0",
+    "@cosmicdrift/kumiko-types": "0.414.0",
     "react": "^19.3.1"
   },
   "devDependencies": {

package/src/changes.json

@@ -1,4 +1,22 @@
 [
+  {
+    "version": "0.414.0",
+    "type": "improvement",
+    "title": "mail and PDF previews register in the preview registry",
+    "detail": "`documentDesignerClient()` registers `contentPreviews.mail` and `contentPreviews.pdf`; the mail, PDF and layout editors keep their look and mount their preview through `PreviewPane`. Their shell parts are adapters over the renderer's editor shell. Apps that mount the editors through `documentDesignerClient()` need no change; tests that render the editors without `createKumikoApp` wrap them in `ContentPreviewsProvider` with `documentDesignerClient().contentPreviews`."
+  },
+  {
+    "version": "0.414.0",
+    "type": "fix",
+    "title": "review round 2 document designer fixes",
+    "detail": "`toWorkingRow` keeps `archived` for an archived row with an open draft instead of reporting it as a draft, so find-by-id and layout-source show the template as archived and publish brings the draft back. `useEditorHandleReport` re-reports the handle when `onEditorReady` changes on a standing editor and unregisters the old callback. The repeat-bar list label ignores inherited object keys. Dead null guards in the PDF and mail editors, the redundant variable guard in the insert panel and the unused bullet-list text are removed, and the copies of `Translate`, `Primitives` and the selected-block type now come from one place. Tests cover the PDF editor's branding query without managed-pages and drop an unsafe cast."
+  },
+  {
+    "version": "0.414.0",
+    "type": "improvement",
+    "title": "Template title helpers and editor screen ids exported",
+    "detail": "`@cosmicdrift/kumiko-document-designer/web` exports `templateTitle`, `templateTitleText`, `DOCUMENT_DESIGNER_FEATURE`, `MAIL_EDITOR_SCREEN_ID`, `PDF_TEMPLATE_EDITOR_SCREEN_ID`, `TEMPLATE_EDITOR_SCREENS` and the type `TemplateEditorKind`. An app that reads the `slug` search parameter of an editor route can resolve the shown title the same way the overview does."
+  },
   {
     "version": "0.409.0",
     "type": "improvement",

package/dist/web/relative-time.d.ts

@@ -1 +0,0 @@
-export declare function formatRelativeWhen(value: string, now?: number): string;

package/dist/web/relative-time.js

@@ -1,18 +0,0 @@
-const UNITS = [
-    ["day", 86_400_000],
-    ["hour", 3_600_000],
-    ["minute", 60_000],
-];
-// Falls back to the raw value for an unparseable timestamp, like formatWhen.
-export function formatRelativeWhen(value, now = Date.now()) {
-    const then = Date.parse(value);
-    if (Number.isNaN(then))
-        return value;
-    const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
-    const elapsed = then - now;
-    for (const [unit, size] of UNITS) {
-        if (Math.abs(elapsed) >= size)
-            return formatter.format(Math.round(elapsed / size), unit);
-    }
-    return formatter.format(0, "minute");
-}