@cosmicdrift/kumiko-document-designer 0.388.0 → 0.390.0

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

@@ -0,0 +1,40 @@
+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 { PlaceholderSection, SystemPlaceholderSection } from "./mail-left-rail.js";
+import { PageCanvas } from "./page-canvas.js";
+import { PdfResourceSection } from "./pdf-left-rail.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;
+}
+export function renderPdfLeftRail(c) {
+    const { s, view, detail, actions } = c;
+    const { insert, filesAvailable, scope } = s.host;
+    return (_jsxs(_Fragment, { children: [_jsx(PlaceholderSection, { validation: view.placeholderSource, onInsert: insert.insertPlaceholder, idPrefix: "pdf" }), _jsx(SystemPlaceholderSection, { validation: view.placeholderSource, onInsert: insert.insertPlaceholder, idPrefix: "pdf", isLayoutOwned: view.layoutFills }), _jsx(PdfResourceSection, { resourceKeys: view.resourceKeys, canUpload: detail.scope === scope, filesAvailable: filesAvailable, layoutName: view.layoutName, onInsert: insert.insertResource, onUpload: actions.uploadResource })] }));
+}
+export function renderPdfEditCanvas(c) {
+    const { s, view, current, actions } = c;
+    const { insert } = s.host;
+    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)) }));
+}
+export function renderPdfSettings(c) {
+    const { s, view, current, detail, actions } = c;
+    return (_jsx(SettingsPanel, { meta: current.draft.meta, onMetaChange: (meta) => actions.updateDraft({ ...current.draft, meta }), layouts: s.server.layouts.rows, locale: s.doc.locale, version: { id: detail.id, version: detail.version, status: detail.status }, vocabulary: view.vocabulary, insert: s.host.insert, draftKey: `${current.key}:${s.ui.draftEpoch}` }));
+}

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

@@ -0,0 +1,52 @@
+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;
+    readonly slug: string;
+    readonly current: EditorState;
+    readonly detail: TemplateDetail;
+}): {
+    dirty: boolean;
+    generatedFresh: boolean;
+    canPublish: boolean;
+    pdfAvailable: boolean;
+    unavailableMessage: string;
+    pdfUnavailableNote: boolean;
+    layoutName: string;
+    layoutResourceSrc: (key: string) => string | undefined;
+    placeholderSource: {
+        canSave: boolean;
+        canPublish: boolean;
+        issues: readonly import("@cosmicdrift/kumiko-framework/errors").FieldIssue[];
+        publishIssues: readonly import("@cosmicdrift/kumiko-framework/errors").FieldIssue[];
+        used: readonly string[];
+        unknown: readonly string[];
+        missingRequired: readonly string[];
+        warnings: readonly import("./types.ts").ValidationWarning[];
+        variables: Readonly<Record<string, import("./mail-types.ts").MailVariable>>;
+        systemPlaceholders: readonly string[];
+    } | null;
+    layoutFills: (name: string) => boolean;
+    resourceKeys: string[];
+    title: string;
+    systemVersion: number | null;
+    vocabulary: {
+        names: string[];
+        labels: {
+            [x: string]: string;
+        };
+        system: readonly string[];
+    };
+    footer: {
+        readonly tone: import("./editor-shell.tsx").FooterTone;
+        readonly text: string;
+    } | null;
+    showOverrideLinks: boolean;
+    originText: string;
+    besideActiveSentence: string | null;
+};
+export type PdfView = ReturnType<typeof buildPdfView>;
+export {};

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

@@ -0,0 +1,89 @@
+import { fileUrl } from "./file-name.js";
+import { snapshotOf } from "./pdf-editor-draft.js";
+import { pdfFooterMessage } from "./pdf-footer.js";
+import { visibleSystemPlaceholders } from "./pdf-left-rail.js";
+import { draftBesideActiveSentence } from "./status-label.js";
+import { parseJsonObject } from "./template-rows.js";
+import { DEFAULT_LAYOUT_SLUG } from "./types.js";
+import { templateTitle, templateTitleText } from "./used-by-label.js";
+function originTextOf(t, s, detail, systemVersion, showOverrideLinks) {
+    const overrides = s.server.overridesQuery.data;
+    if (showOverrideLinks) {
+        const overrideCount = (overrides?.activeOverrides ?? 0) + (overrides?.draftOverrides ?? 0);
+        return overrides?.totalTenants == null
+            ? t("documentDesigner.originBar.noTotal", { count: overrideCount })
+            : t("documentDesigner.originBar.withTotal", {
+                count: overrideCount,
+                total: overrides.totalTenants,
+            });
+    }
+    if (detail.scope === "system")
+        return t("documentDesigner.mail.origin.system", { version: detail.version });
+    return systemVersion === null
+        ? t("documentDesigner.mail.origin.tenantOnly")
+        : t("documentDesigner.mail.origin.overrides", { version: systemVersion });
+}
+function footerOf(t, s) {
+    const { validation } = s.server;
+    const { generated } = s.ui;
+    if (validation === undefined || validation === null)
+        return null; // skip: nothing validated yet
+    return pdfFooterMessage(t, validation, generated === null
+        ? null
+        : {
+            pages: generated.result.pageCount,
+            sizeBytes: generated.result.sizeBytes,
+            durationMs: generated.result.durationMs,
+        });
+}
+function layoutNameOf(t, s, layoutSlugShown) {
+    const layoutTitle = s.server.layouts.rows.find((row) => row.slug === layoutSlugShown)?.title;
+    return layoutTitle === undefined ? layoutSlugShown : templateTitleText(t, layoutTitle);
+}
+function placeholderSourceOf(s) {
+    const { validation } = s.server;
+    return validation === undefined || validation === null
+        ? null
+        : {
+            ...validation,
+            variables: s.vocabulary.variables,
+            systemPlaceholders: visibleSystemPlaceholders(validation.systemPlaceholders),
+        };
+}
+export function buildPdfView(input) {
+    const { t, s, slug, current, detail } = input;
+    const { layout, validation, statusQuery, brandingLogoFile } = s.server;
+    const { generated } = s.ui;
+    const pdfAvailable = statusQuery.error === null && statusQuery.data?.available === true;
+    const unavailableMessage = statusQuery.data?.available === false ? (statusQuery.data.message ?? "") : "";
+    const layoutSlugShown = layout?.slug ?? DEFAULT_LAYOUT_SLUG;
+    const layoutName = layoutNameOf(t, s, layoutSlugShown);
+    const overviewRow = s.host.overview.rows.find((candidate) => candidate.slug === slug);
+    const systemVersion = overviewRow?.systemVersion ?? null;
+    const showOverrideLinks = s.server.showOrigin && detail.scope === "system";
+    return {
+        dirty: snapshotOf(current.draft) !== current.snapshot,
+        generatedFresh: generated !== null && generated.forSnapshot === snapshotOf(current.draft),
+        canPublish: validation?.canPublish === true,
+        pdfAvailable,
+        unavailableMessage,
+        pdfUnavailableNote: !pdfAvailable && statusQuery.loading === false,
+        layoutName,
+        layoutResourceSrc: (key) => key === "logo" && brandingLogoFile !== "" ? fileUrl(brandingLogoFile) : undefined,
+        placeholderSource: placeholderSourceOf(s),
+        layoutFills: (name) => layout !== null &&
+            (layout.html.includes(`data-variable="${name}"`) || layout.html.includes(`{{${name}}}`)),
+        resourceKeys: Object.keys(parseJsonObject(detail.linkedResources)),
+        title: overviewRow === undefined ? slug : templateTitle(t, overviewRow),
+        systemVersion,
+        vocabulary: {
+            names: s.vocabulary.variableNames,
+            labels: s.vocabulary.variableLabels,
+            system: s.vocabulary.systemVariables,
+        },
+        footer: footerOf(t, s),
+        showOverrideLinks,
+        originText: originTextOf(t, s, detail, systemVersion, showOverrideLinks),
+        besideActiveSentence: draftBesideActiveSentence(t, detail),
+    };
+}

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,159 +1,21 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TemplateResolverHandlers, TemplateResolverQueries, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
-import { useDispatcher, usePrimitives, useQuery, useTranslation, useUserRoles, } from "@cosmicdrift/kumiko-renderer";
-import { ErrorState, LoadingState, PdfPreview, uploadFileRef, } from "@cosmicdrift/kumiko-renderer/web";
-import { RendererPuppeteerClientQueries } from "@cosmicdrift/kumiko-renderer-puppeteer-client/qualified-names";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { BRANDING_QUERY_QN } from "./constants.js";
-import { EditorHeader, EditorLocaleSwitch, EditorModeSwitch, originOf, } from "./editor-header.js";
-import { EditorBody, EditorFooter, EditorFrame, EditorInfoBar } from "./editor-shell.js";
-import { describeError, isAlreadyActive } from "./errors.js";
-import { fileUrl } from "./file-name.js";
-import { systemLabelMap, variableLabelMap } from "./mail-draft.js";
-import { PlaceholderSection, SystemPlaceholderSection } from "./mail-left-rail.js";
-import { OverridesDrawer } from "./overrides-drawer.js";
-import { PageCanvas } from "./page-canvas.js";
-import { pdfFooterMessage } from "./pdf-footer.js";
-import { PdfResourceSection, visibleSystemPlaceholders } from "./pdf-left-rail.js";
-import { EMPTY_PDF_META, parsePdfMeta, serializePdfMeta } from "./pdf-meta.js";
-import { SettingsPanel } from "./settings-panel.js";
-import { draftBesideActiveSentence } from "./status-label.js";
-import { localesOf, parseJsonObject, pickRow, resolveLocale } from "./template-rows.js";
-import { DEFAULT_LAYOUT_SLUG, DOCUMENT_PDF_KIND, PDF_LAYOUT_KIND, } from "./types.js";
-import { useFilesCapability } from "./use-files-capability.js";
-import { useInsertTargets } from "./use-insert-targets.js";
-import { useOverviewRows } from "./use-overview-rows.js";
-import { templateTitle, templateTitleText } from "./used-by-label.js";
-const SETTLE_MS = 500;
-const NO_VARIABLES = {};
-// Only the label of an images variable is needed, for the Images block and its picker.
-function imageLabelSource(variables) {
-    const result = {};
-    for (const [name, info] of Object.entries(variables)) {
-        if (info.type === "images" && info.label !== undefined) {
-            result[name] = { type: "text", label: info.label };
-        }
-    }
-    return result;
-}
-function textVariablesOf(variables) {
-    const result = {};
-    for (const [name, info] of Object.entries(variables)) {
-        if (info.type === "images")
-            continue;
-        const { item, ...rest } = info;
-        const columns = Object.entries(item ?? {}).flatMap(([column, def]) => def.type === "images" ? [] : [[column, { ...def, type: def.type }]]);
-        result[name] = {
-            ...rest,
-            type: info.type,
-            ...(item !== undefined && { item: Object.fromEntries(columns) }),
-        };
-    }
-    return result;
-}
-// 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;
-}
-const draftFromDetail = (detail) => ({
-    content: detail.content,
-    meta: parsePdfMeta(detail.meta),
-});
-const snapshotOf = (draft) => JSON.stringify({ content: draft.content, meta: serializePdfMeta(draft.meta) });
+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 { ErrorState, LoadingState } from "@cosmicdrift/kumiko-renderer/web";
+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 { DOCUMENT_PDF_KIND } from "./types.js";
+import { usePdfEditorState } from "./use-pdf-editor-state.js";
 export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChange, }) {
     const t = useTranslation();
     const dispatcher = useDispatcher();
     const { Button, Banner, Dialog } = usePrimitives();
-    const insert = useInsertTargets();
-    const filesAvailable = useFilesCapability();
-    const overview = useOverviewRows(DOCUMENT_PDF_KIND);
-    const roles = useUserRoles();
-    const scope = roles?.includes("SystemAdmin") === true ? "system" : "tenant";
-    const rowsQuery = useQuery(TemplateResolverQueries.list, {
-        kind: DOCUMENT_PDF_KIND,
-    });
-    const rows = rowsQuery.data ?? [];
-    const locales = localesOf(rows, slug);
-    const locale = resolveLocale(requestedLocale, locales);
-    const row = pickRow(rows, slug, locale, scope);
-    const detailQuery = useQuery(TemplateResolverQueries.findById, { id: row?.id ?? "" }, { enabled: row !== undefined });
-    const detail = detailQuery.data !== null &&
-        detailQuery.data?.slug === slug &&
-        detailQuery.data.locale === locale
-        ? detailQuery.data
-        : null;
-    const [state, setState] = useState(null);
-    if (detail !== null && (state === null || state.key !== detail.id)) {
-        const draft = draftFromDetail(detail);
-        setState({ key: detail.id, draft, settled: draft, snapshot: snapshotOf(draft) });
-    }
-    const current = state !== null && detail !== null && state.key === detail.id ? state : null;
-    const settleTimer = useRef(null);
-    // A pending settle must not fire into an unmounted editor.
-    useEffect(() => () => {
-        if (settleTimer.current !== null)
-            clearTimeout(settleTimer.current);
-    }, []);
-    const [overridesOpen, setOverridesOpen] = useState(false);
-    const [draftEpoch, setDraftEpoch] = useState(0);
-    const [mode, setMode] = useState("edit");
-    const [busy, setBusy] = useState(null);
-    const [actionError, setActionError] = useState(null);
-    const [generated, setGenerated] = useState(null);
-    const autoPrintedFor = useRef(null);
-    const [pendingLocale, setPendingLocale] = useState(null);
-    const variableSchema = useMemo(() => parseJsonObject(detail?.variableSchema ?? null), [detail?.variableSchema]);
-    const settledMeta = current === null ? null : serializePdfMeta(current.settled.meta);
-    const validationQuery = useQuery(TemplateResolverQueries.validate, {
-        slug,
-        kind: DOCUMENT_PDF_KIND,
-        contentFormat: "html",
-        content: current?.settled.content ?? "",
-        meta: settledMeta ?? {},
-        variableSchema,
-        locale,
-        scope,
-    }, { enabled: current !== null });
-    const validation = validationQuery.data;
-    const layoutSlug = current?.settled.meta.layoutSlug ?? "";
-    const previewQuery = useQuery(TemplateResolverQueries.preview, {
-        slug,
-        kind: DOCUMENT_PDF_KIND,
-        locale,
-        content: detail?.content ?? "",
-        meta: layoutSlug === "" ? {} : { layoutSlug },
-        variableSchema,
-    }, { enabled: detail !== null });
-    const layout = previewQuery.error === null ? (previewQuery.data?.layout ?? null) : null;
-    const layouts = useOverviewRows(PDF_LAYOUT_KIND);
-    // The built-in "logo" resource of a layout is the tenant's branding logo.
-    const branding = useQuery(BRANDING_QUERY_QN, {});
-    const brandingLogoFile = branding.data?.logoFile ?? "";
-    const statusQuery = useQuery(RendererPuppeteerClientQueries.status, {});
-    const pdfAvailable = statusQuery.error === null && statusQuery.data?.available === true;
-    const unavailableMessage = statusQuery.data?.available === false ? (statusQuery.data.message ?? "") : "";
-    const showOrigin = scope === "system";
-    const overridesQuery = useQuery(TemplateResolverQueries.tenantOverrides, { slug, kind: DOCUMENT_PDF_KIND, locale }, { enabled: showOrigin && detail !== null });
-    const allVariables = validation?.variables ?? NO_VARIABLES;
-    // Photos are record data, never an inline placeholder: images variables only feed the Images block.
-    const variables = useMemo(() => textVariablesOf(allVariables), [allVariables]);
-    const imageVariables = useMemo(() => Object.keys(allVariables).filter((name) => allVariables[name]?.type === "images"), [allVariables]);
-    const systemVariables = useMemo(() => visibleSystemPlaceholders(validation?.systemPlaceholders ?? []), [validation?.systemPlaceholders]);
-    const systemLabels = useMemo(() => systemLabelMap(t, systemVariables), [t, systemVariables]);
-    const variableLabels = useMemo(() => ({
-        ...systemLabels,
-        ...variableLabelMap(t, variables),
-        ...variableLabelMap(t, imageLabelSource(allVariables)),
-    }), [systemLabels, variables, allVariables, t]);
-    const variableNames = useMemo(() => Object.keys(variables), [variables]);
-    const linkedResources = detail?.linkedResources ?? null;
-    // The editor shows resource images from the stored copies; no extra request is made here.
-    const resourcePreviews = useMemo(() => Object.fromEntries(Object.entries(parseJsonObject(linkedResources)).flatMap(([key, fileRefId]) => typeof fileRefId === "string"
-        ? [[key, { src: `/api/files/${encodeURIComponent(fileRefId)}`, caption: key }]]
-        : [])), [linkedResources]);
+    const s = usePdfEditorState({ slug, requestedLocale }, t);
+    const { rowsQuery, row, current, detail, detailQuery } = s.doc;
     if (rowsQuery.loading && rowsQuery.data === null)
         return _jsx(LoadingState, {});
     if (rowsQuery.error !== null)
@@ -163,196 +25,32 @@ export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChang
     if (current === null || detail === null) {
         return detailQuery.error !== null ? _jsx(ErrorState, { error: detailQuery.error }) : _jsx(LoadingState, {});
     }
-    const dirty = snapshotOf(current.draft) !== current.snapshot;
-    const generatedFresh = generated !== null && generated.forSnapshot === snapshotOf(current.draft);
-    function updateDraft(next) {
-        setState((previous) => (previous === null ? previous : { ...previous, draft: next }));
-        if (settleTimer.current !== null)
-            clearTimeout(settleTimer.current);
-        settleTimer.current = setTimeout(() => {
-            setState((previous) => previous === null ? previous : { ...previous, settled: previous.draft });
-        }, SETTLE_MS);
-    }
-    function resetDraft(source) {
-        const draft = draftFromDetail(source);
-        if (settleTimer.current !== null)
-            clearTimeout(settleTimer.current);
-        setState({ key: source.id, draft, settled: draft, snapshot: snapshotOf(draft) });
-        setDraftEpoch((epoch) => epoch + 1);
-        setActionError(null);
-    }
-    async function reload() {
-        await Promise.all([rowsQuery.refetch(), detailQuery.refetch(), validationQuery.refetch()]);
-    }
-    async function persist() {
-        const draft = current?.draft ?? { content: "", meta: EMPTY_PDF_META };
-        const parentTemplateId = detail?.scope === "system" ? detail.id : detail?.parentTemplateId;
-        const result = await dispatcher.write(scope === "system"
-            ? TemplateResolverHandlers.upsertSystem
-            : TemplateResolverHandlers.upsertTenant, {
-            slug,
-            kind: DOCUMENT_PDF_KIND,
-            locale,
-            content: draft.content,
-            contentFormat: "html",
-            variableSchema,
-            meta: serializePdfMeta(draft.meta),
-            ...(scope === "tenant" && parentTemplateId != null && { parentTemplateId }),
-        });
-        if (!result.isSuccess) {
-            setActionError(describeError(t, result.error));
-            return null;
-        }
-        setState((previous) => previous === null ? previous : { ...previous, snapshot: snapshotOf(draft) });
-        return result.data;
-    }
-    async function save() {
-        setBusy("save");
-        setActionError(null);
-        const saved = await persist();
-        if (saved !== null)
-            await reload();
-        setBusy(null);
-        return saved !== null;
-    }
-    async function publish() {
-        setBusy("publish");
-        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 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 });
-            if (!result.isSuccess && !isAlreadyActive(result.error))
-                setActionError(describeError(t, result.error));
-        }
-        await reload();
-        setBusy(null);
-    }
-    async function generatePdf() {
-        if (current === null)
-            return;
-        setMode("preview");
-        setBusy("pdf");
-        setActionError(null);
-        const forSnapshot = snapshotOf(current.draft);
-        const result = await dispatcher.query(RendererPuppeteerClientQueries.previewPdf, {
-            slug,
-            locale,
-            content: current.draft.content,
-            meta: serializePdfMeta(current.draft.meta),
-            variableSchema,
-        });
-        if (result.isSuccess)
-            setGenerated({ forSnapshot, result: result.data });
-        else
-            setActionError(describeError(t, result.error));
-        setBusy(null);
-    }
-    function printOnce() {
-        if (current === null || autoPrintedFor.current === snapshotOf(current.draft))
-            return;
-        autoPrintedFor.current = snapshotOf(current.draft);
-        void generatePdf();
-    }
-    async function uploadResource(file) {
-        const sourceFileRefId = await uploadFileRef(file);
-        const result = await dispatcher.write(TemplateResolverHandlers.resourceUpload, {
-            templateId: detail?.id,
-            sourceFileRefId,
-        });
-        if (!result.isSuccess)
-            throw new Error(describeError(t, result.error));
-        await detailQuery.refetch();
-    }
-    function requestLocale(next) {
-        if (next === locale)
-            return;
-        if (dirty)
-            setPendingLocale(next);
-        else
-            onLocaleChange?.(next);
-    }
-    const canPublish = validation?.canPublish === true;
-    const layoutSlugShown = layout?.slug ?? DEFAULT_LAYOUT_SLUG;
-    const layoutTitle = layouts.rows.find((row) => row.slug === layoutSlugShown)?.title;
-    const layoutName = layoutTitle === undefined ? layoutSlugShown : templateTitleText(t, layoutTitle);
-    const layoutResourceSrc = (key) => key === "logo" && brandingLogoFile !== "" ? fileUrl(brandingLogoFile) : undefined;
-    const placeholderSource = validation === undefined || validation === null
-        ? null
-        : {
-            ...validation,
-            variables,
-            systemPlaceholders: visibleSystemPlaceholders(validation.systemPlaceholders),
-        };
-    const layoutFills = (name) => layout !== null &&
-        (layout.html.includes(`data-variable="${name}"`) || layout.html.includes(`{{${name}}}`));
-    const overrideCount = (overridesQuery.data?.activeOverrides ?? 0) + (overridesQuery.data?.draftOverrides ?? 0);
-    const resourceKeys = Object.keys(parseJsonObject(detail.linkedResources));
-    const overviewRow = overview.rows.find((candidate) => candidate.slug === slug);
-    const title = overviewRow === undefined ? slug : templateTitle(t, overviewRow);
-    const systemVersion = overviewRow?.systemVersion ?? null;
-    const vocabulary = {
-        names: variableNames,
-        labels: variableLabels,
-        system: systemVariables,
+    const view = buildPdfView({ t, s, slug, current, detail });
+    const actions = buildPdfActions({
+        s,
+        t,
+        dispatcher,
+        slug,
+        current,
+        detail,
+        dirty: view.dirty,
+        onLocaleChange,
+    });
+    const context = {
+        t,
+        Button,
+        Dialog,
+        slug,
+        s,
+        actions,
+        view,
+        current,
+        detail,
+        onLocaleChange,
+        exportBundle,
     };
-    const footer = validation === undefined || validation === null
-        ? null
-        : pdfFooterMessage(t, validation, generated === null
-            ? null
-            : {
-                pages: generated.result.pageCount,
-                sizeBytes: generated.result.sizeBytes,
-                durationMs: generated.result.durationMs,
-            });
-    const showOverrideLinks = showOrigin && detail.scope === "system";
-    const originText = showOverrideLinks
-        ? overridesQuery.data?.totalTenants == null
-            ? t("documentDesigner.originBar.noTotal", { count: overrideCount })
-            : t("documentDesigner.originBar.withTotal", {
-                count: overrideCount,
-                total: overridesQuery.data.totalTenants,
-            })
-        : detail.scope === "system"
-            ? t("documentDesigner.mail.origin.system", { version: detail.version })
-            : systemVersion === null
-                ? t("documentDesigner.mail.origin.tenantOnly")
-                : t("documentDesigner.mail.origin.overrides", { version: systemVersion });
-    const besideActiveSentence = draftBesideActiveSentence(t, detail);
-    const pdfUnavailableNote = !pdfAvailable && statusQuery.loading === false;
-    return (_jsxs(EditorFrame, { testId: "pdf-template-editor", children: [_jsx(EditorHeader, { title: title, stored: { status: detail.status, version: detail.version }, actions: {
-                    busy: busy === "save",
-                    canSave: busy === null && validation?.canSave !== false,
-                    canPublish: busy === null && canPublish,
-                    onSave: () => void save(),
-                    onPublish: () => void publish(),
-                }, children: _jsx(EditorModeSwitch, { testIdPrefix: "pdf", mode: mode, onMode: setMode }) }), _jsxs(EditorInfoBar, { tone: pdfUnavailableNote ? "warn" : detail.scope === "tenant" ? "active" : "muted", testId: "pdf-origin-bar", origin: originOf(detail.scope === "system", systemVersion !== null), controls: _jsxs(_Fragment, { children: [_jsx(EditorLocaleSwitch, { testIdPrefix: "pdf", locales: locales.length > 0 ? locales : [locale], locale: locale, onLocale: requestLocale }), mode === "preview" && (_jsx(Button, { variant: "secondary", disabled: !pdfAvailable || busy !== null, loading: busy === "pdf", onClick: () => void generatePdf(), testId: "pdf-generate-header", children: t("documentDesigner.actions.generatePdf") }))] }), overlays: _jsx(OverridesDrawer, { open: overridesOpen, onOpenChange: setOverridesOpen, slug: slug, locale: locale, overrides: overridesQuery.data }), links: showOverrideLinks && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "link", onClick: () => void exportBundle(), children: t("documentDesigner.originBar.export") }), _jsx(Button, { variant: "link", onClick: () => setOverridesOpen(true), children: t("documentDesigner.originBar.showOverrides") })] })), children: [originText, besideActiveSentence !== null && ` ${besideActiveSentence}`, pdfUnavailableNote && (_jsxs(_Fragment, { children: [" ", _jsx("span", { "data-testid": "pdf-unavailable", children: unavailableMessage === ""
-                                    ? t("documentDesigner.pdfUnavailableNoReason")
-                                    : t("documentDesigner.pdfUnavailable", { message: unavailableMessage }) })] }))] }), _jsx(EditorBody, { left: mode === "edit" ? (_jsxs(_Fragment, { children: [_jsx(PlaceholderSection, { validation: placeholderSource, onInsert: insert.insertPlaceholder, idPrefix: "pdf" }), _jsx(SystemPlaceholderSection, { validation: placeholderSource, onInsert: insert.insertPlaceholder, idPrefix: "pdf", isLayoutOwned: layoutFills }), _jsx(PdfResourceSection, { resourceKeys: resourceKeys, canUpload: detail.scope === scope, filesAvailable: filesAvailable, layoutName: layoutName, onInsert: insert.insertResource, onUpload: uploadResource })] })) : undefined, center: mode === "edit" ? (_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) => updateDraft({ ...current.draft, content }), regions: layout?.regions ?? null, layoutName: layoutName, resourceSrc: layoutResourceSrc, variableLabels: variableLabels, systemVariables: systemVariables, systemLabels: systemLabels, variableNames: variableNames, imageVariables: imageVariables, resourcePreviews: resourcePreviews, onEditorReady: insert.register("body") }) })) : (_jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: generated !== null && generatedFresh ? (_jsx(PdfPreview, { source: { base64: generated.result.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: [pdfAvailable && busy === null && _jsx(RunOnMount, { run: 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: !pdfAvailable || busy !== null, onClick: () => void generatePdf(), children: t("documentDesigner.actions.generatePdf") })] })) })), right: _jsx(SettingsPanel, { meta: current.draft.meta, onMetaChange: (meta) => updateDraft({ ...current.draft, meta }), layouts: layouts.rows, locale: locale, version: { id: detail.id, version: detail.version, status: detail.status }, vocabulary: vocabulary, insert: insert, draftKey: `${current.key}:${draftEpoch}` }) }), _jsx(EditorFooter, { testIdPrefix: "pdf-editor", message: footer, saveError: actionError, modifiedAt: detail.modifiedAt ?? null, dirty: dirty, busy: busy === "save", canSave: busy === null && validation?.canSave !== false, canPublish: busy === null && canPublish, onDiscard: () => resetDraft(detail), onSave: () => void save(), onPublish: () => void publish() }), _jsx(Dialog, { open: pendingLocale !== null, onOpenChange: (open) => {
-                    if (!open)
-                        setPendingLocale(null);
-                }, title: t("documentDesigner.localeDialog.title"), description: t("documentDesigner.localeDialog.description"), confirmLabel: t("documentDesigner.localeDialog.save"), cancelLabel: t("documentDesigner.localeDialog.cancel"), onConfirm: async () => {
-                    const target = pendingLocale;
-                    if (target !== null && (await save()))
-                        onLocaleChange?.(target);
-                    setPendingLocale(null);
-                }, children: _jsx(Button, { variant: "danger-ghost", onClick: () => {
-                        const target = pendingLocale;
-                        setPendingLocale(null);
-                        resetDraft(detail);
-                        if (target !== null)
-                            onLocaleChange?.(target);
-                    }, children: t("documentDesigner.localeDialog.discard") }) })] }));
+    const editing = s.ui.mode === "edit";
+    return (_jsxs(EditorFrame, { testId: "pdf-template-editor", children: [renderPdfHeader(context), renderPdfInfoBar(context), _jsx(EditorBody, { left: editing ? renderPdfLeftRail(context) : undefined, center: editing ? renderPdfEditCanvas(context) : renderPdfPreviewPane(context), right: renderPdfSettings(context) }), renderPdfFooter(context), renderPdfLocaleDialog(context)] }));
     async function exportBundle() {
         const result = await dispatcher.query(TemplateResolverQueries.exportBundle, {
             slug,
@@ -360,7 +58,7 @@ export function PdfTemplateEditor({ slug, locale: requestedLocale, onLocaleChang
             scope: "system",
         });
         if (!result.isSuccess) {
-            setActionError(describeError(t, result.error));
+            s.ui.setActionError(describeError(t, result.error));
             return;
         }
         const url = URL.createObjectURL(new Blob([JSON.stringify(result.data, null, 2)], { type: "application/json" }));