@cosmicdrift/kumiko-document-designer 0.363.0 → 0.364.0

package/dist/constants.d.ts

@@ -8,6 +8,9 @@ export declare const TEMPLATES_NAV_ID: "templates";
 export declare const PLATFORM_TEMPLATES_NAV_ID: "platform-templates";
 export declare const BRANDING_SCREEN_QN: "managed-pages:screen:branding-settings";
 export declare const BRANDING_QUERY_QN: "managed-pages:query:branding";
+export declare const USER_ME_QUERY_QN: "user:query:user:me";
+export declare const PROFILE_FEATURE_NAME: "user-profile";
+export declare const PROFILE_SCREEN_ID: "profile";
 export declare const DEFAULT_LAYOUT_SLUG: "default";
 export type TemplateEditorKind = "mail" | "document-pdf" | "mail-layout" | "pdf-layout";
 export declare const TEMPLATE_EDITOR_SCREENS: Partial<Record<TemplateEditorKind, string>>;

package/dist/constants.js

@@ -10,6 +10,10 @@ export const TEMPLATES_NAV_ID = "templates";
 export const PLATFORM_TEMPLATES_NAV_ID = "platform-templates";
 export const BRANDING_SCREEN_QN = "managed-pages:screen:branding-settings";
 export const BRANDING_QUERY_QN = "managed-pages:query:branding";
+// Pinned like the branding names: the user features' constants are not exported to the web barrel.
+export const USER_ME_QUERY_QN = "user:query:user:me";
+export const PROFILE_FEATURE_NAME = "user-profile";
+export const PROFILE_SCREEN_ID = "profile";
 export const DEFAULT_LAYOUT_SLUG = "default";
 // Short screen id per template kind. A kind without an entry gets no "Edit" row action.
 // The mail editor adds `mail` here and declares its screen in this feature, because the

package/dist/i18n.js

@@ -29,6 +29,8 @@ export const DOCUMENT_DESIGNER_I18N = {
     "documentDesigner.kind.layout": { en: "Layout", de: "Layout" },
     "documentDesigner.source.system": { en: "System", de: "System" },
     "documentDesigner.source.tenant": { en: "Tenant", de: "Mandant" },
+    "documentDesigner.origin.system": { en: "System template", de: "System-Vorlage" },
+    "documentDesigner.origin.override": { en: "Customised", de: "Mandanten-Anpassung" },
     "documentDesigner.status.active": { en: "Active", de: "Aktiv" },
     "documentDesigner.status.draft": { en: "Draft", de: "Entwurf" },
     "documentDesigner.status.archived": { en: "Archived", de: "Archiviert" },
@@ -77,19 +79,55 @@ export const DOCUMENT_DESIGNER_I18N = {
     "documentDesigner.appearance.title": { en: "Appearance", de: "Darstellung" },
     "documentDesigner.appearance.width": { en: "Width", de: "Breite" },
     "documentDesigner.appearance.font": { en: "Font", de: "Schrift" },
-    "documentDesigner.appearance.systemFont": {
-        en: "System font (Helvetica, Arial)",
-        de: "Systemschrift (Helvetica, Arial)",
-    },
     "documentDesigner.appearance.background": { en: "Outer background", de: "Hintergrund außen" },
-    "documentDesigner.appearance.backgroundValue": { en: "#f5f5f5", de: "#f5f5f5" },
-    "documentDesigner.appearance.pageFormat": { en: "Page format", de: "Seitenformat" },
-    "documentDesigner.appearance.hint": {
-        en: "The appearance is fixed. Custom fonts and colours will follow.",
-        de: "Darstellung ist fest vorgegeben. Eigene Schriften und Farben kommen später.",
+    "documentDesigner.appearance.font.sans": {
+        en: "System font (Arial, Helvetica)",
+        de: "Systemschrift (Arial, Helvetica)",
+    },
+    "documentDesigner.appearance.font.serif": {
+        en: "Serif font (Georgia)",
+        de: "Serifenschrift (Georgia)",
+    },
+    "documentDesigner.appearance.fontHint": {
+        en: "Custom fonts in mails come later. PDF uses the bundled framework font.",
+        de: "Eigene Schriften in Mails kommen sp\u00e4ter. PDF nutzt die geb\u00fcndelte Schrift des Frameworks.",
+    },
+    "documentDesigner.appearance.backgroundInvalid": {
+        en: "Enter a colour like #f3f2ee.",
+        de: "Eine Farbe wie #f3f2ee angeben.",
+    },
+    "documentDesigner.appearance.accentLine": {
+        en: "Accent line at the top",
+        de: "Akzentlinie oben",
+    },
+    "documentDesigner.appearance.accentLine.branding": {
+        en: "Accent colour from branding",
+        de: "Akzentfarbe aus Branding",
+    },
+    "documentDesigner.appearance.accentLine.none": { en: "None", de: "Keine" },
+    "documentDesigner.appearance.buttonStyle": { en: "Button style", de: "Button-Stil" },
+    "documentDesigner.appearance.buttonStyle.filled-rounded": {
+        en: "Filled, rounded",
+        de: "Gef\u00fcllt, abgerundet",
+    },
+    "documentDesigner.appearance.buttonStyle.filled-square": {
+        en: "Filled, square",
+        de: "Gef\u00fcllt, eckig",
+    },
+    "documentDesigner.appearance.buttonStyle.outline": { en: "Outline", de: "Umriss" },
+    "documentDesigner.appearance.fromMjml": {
+        en: "The appearance comes from this layout's MJML source.",
+        de: "Die Darstellung kommt aus der MJML-Quelle dieses Layouts.",
     },
     "documentDesigner.mjml.title": { en: "MJML source", de: "MJML-Quelle" },
-    "documentDesigner.editor.crumb": { en: "Templates", de: "Vorlagen" },
+    "documentDesigner.mjml.hint": {
+        en: "Platform admins can edit the MJML source directly. Tenants only see the draft mode.",
+        de: "Plattform-Admins k\u00f6nnen die MJML-Quelle direkt bearbeiten. Mandanten sehen nur den Entwurfs-Modus.",
+    },
+    "documentDesigner.renderer.title": { en: "Renderer", de: "Renderer" },
+    "documentDesigner.renderer.mjml": { en: "MJML", de: "MJML" },
+    "documentDesigner.renderer.chromium": { en: "Chromium (PDF)", de: "Chromium (PDF)" },
+    "documentDesigner.renderer.active": { en: "active", de: "aktiv" },
     "documentDesigner.editor.title.mail": { en: "Mail layout", de: "Mail-Layout" },
     "documentDesigner.editor.title.pdf": { en: "Letterhead", de: "Briefpapier" },
     "documentDesigner.editor.kindSwitch": { en: "Layout kind", de: "Layout-Art" },
@@ -136,8 +174,8 @@ export const DOCUMENT_DESIGNER_I18N = {
         de: "System-Layout v{version} · {active} von {total} Mandanten haben eine eigene Fassung",
     },
     "documentDesigner.editor.diff.open": {
-        en: "Difference to the system layout",
-        de: "Unterschied zum System-Layout",
+        en: "Show difference",
+        de: "Unterschied anzeigen",
     },
     "documentDesigner.editor.diff.title": {
         en: "Difference to the system layout",
@@ -148,8 +186,8 @@ export const DOCUMENT_DESIGNER_I18N = {
         de: "Ihr Layout entspricht dem System-Layout.",
     },
     "documentDesigner.editor.reset.open": {
-        en: "Reset to system layout",
-        de: "Auf System-Layout zurücksetzen",
+        en: "Reset",
+        de: "Zurücksetzen",
     },
     "documentDesigner.editor.reset.title": {
         en: "Reset to system layout?",
@@ -161,6 +199,10 @@ export const DOCUMENT_DESIGNER_I18N = {
     },
     "documentDesigner.editor.reset.confirm": { en: "Reset", de: "Zurücksetzen" },
     "documentDesigner.editor.region.header": { en: "Header", de: "Kopf" },
+    "documentDesigner.editor.logoCaption": {
+        en: "Logo · from branding, max. 180 px wide",
+        de: "Logo · aus Branding, max. 180 px breit",
+    },
     "documentDesigner.editor.region.content": { en: "Template content", de: "Inhalt der Vorlage" },
     "documentDesigner.editor.region.signature": { en: "Signature area", de: "Signatur-Bereich" },
     "documentDesigner.editor.region.footer": { en: "Footer", de: "Fuß" },
@@ -223,10 +265,6 @@ export const DOCUMENT_DESIGNER_I18N = {
         en: "Preview",
         de: "Vorschau",
     },
-    "documentDesigner.mail.header.testMail": {
-        en: "Send test mail to me",
-        de: "Test-Mail an mich",
-    },
     "documentDesigner.mail.language.de": {
         en: "German",
         de: "Deutsch",
@@ -240,8 +278,8 @@ export const DOCUMENT_DESIGNER_I18N = {
         de: "Spanisch",
     },
     "documentDesigner.mail.origin.overrides": {
-        en: 'Overrides the system template "{title}" v{version}.',
-        de: "Überschreibt die System-Vorlage „{title}“ v{version}.",
+        en: "Overrides the system template v{version}.",
+        de: "Überschreibt die System-Vorlage v{version}.",
     },
     "documentDesigner.mail.origin.tenantOnly": {
         en: "This template exists only for your tenant.",
@@ -260,8 +298,8 @@ export const DOCUMENT_DESIGNER_I18N = {
         de: "Archiviert.",
     },
     "documentDesigner.mail.origin.reset": {
-        en: "Reset to system template",
-        de: "Auf System-Vorlage zurücksetzen",
+        en: "Reset",
+        de: "Zurücksetzen",
     },
     "documentDesigner.mail.origin.system": {
         en: "You are viewing the system template v{version}. Saving creates a customisation for your tenant.",
@@ -272,21 +310,37 @@ export const DOCUMENT_DESIGNER_I18N = {
         de: "System-Vorlage v{version}. Speichern ändert sie für alle Mandanten ohne eigene Anpassung.",
     },
     "documentDesigner.mail.origin.missing": {
-        en: "There is no own version for {language}. Recipients with language {locale} get the {fallback} version.",
-        de: "Für {language} gibt es keine eigene Fassung. Empfänger mit Sprache {locale} bekommen die Fassung {fallback}.",
+        en: "There is no version for {language} yet.",
+        de: "Für {language} gibt es noch keine Fassung.",
+    },
+    "documentDesigner.mail.missing.text": {
+        en: "There is no version for {language} yet. Recipients with language {locale} get the {fallbackAdjective} version.",
+        de: "Für {language} gibt es noch keine Fassung. Empfänger mit Sprache {locale} bekommen die {fallbackAdjective} Fassung.",
+    },
+    "documentDesigner.mail.missing.textNoFallback": {
+        en: "There is no version for {language} yet.",
+        de: "Für {language} gibt es noch keine Fassung.",
+    },
+    "documentDesigner.mail.missing.copy": {
+        en: "Copy from {language}",
+        de: "Aus {language} kopieren",
+    },
+    "documentDesigner.mail.languageAdjective.de": {
+        en: "German",
+        de: "deutsche",
     },
-    "documentDesigner.mail.origin.missingNoFallback": {
-        en: "There is no own version for {language}.",
-        de: "Für {language} gibt es keine eigene Fassung.",
+    "documentDesigner.mail.languageAdjective.en": {
+        en: "English",
+        de: "englische",
+    },
+    "documentDesigner.mail.languageAdjective.es": {
+        en: "Spanish",
+        de: "spanische",
     },
     "documentDesigner.mail.origin.copyNote": {
         en: "Copying a system version does not bring images or attachments along; upload them again afterwards.",
         de: "Beim Kopieren einer System-Fassung kommen Bilder und Anhänge nicht mit; laden Sie sie danach neu hoch.",
     },
-    "documentDesigner.mail.origin.copyFrom": {
-        en: "Copy from {fallback}",
-        de: "Aus {fallback} kopieren",
-    },
     "documentDesigner.mail.origin.createBlank": {
         en: "Start empty",
         de: "Leer anlegen",
@@ -323,6 +377,14 @@ export const DOCUMENT_DESIGNER_I18N = {
         en: "System placeholders",
         de: "System-Platzhalter",
     },
+    "documentDesigner.mail.system.layout": {
+        en: "Layout",
+        de: "Layout",
+    },
+    "documentDesigner.mail.system.hint": {
+        en: "Filled in by the platform. Imprint and unsubscribe link come from the layout.",
+        de: "Füllt die Plattform. Impressum und Abmeldelink liefert das Layout.",
+    },
     "documentDesigner.mail.resource.title": {
         en: "Resources",
         de: "Ressourcen",
@@ -352,8 +414,8 @@ export const DOCUMENT_DESIGNER_I18N = {
         de: "Entfernen",
     },
     "documentDesigner.mail.resource.caption": {
-        en: "{key} · embedded as CID",
-        de: "{key} · als CID eingebettet",
+        en: "{key} · {size} · embedded as CID",
+        de: "{key} · {size} · als CID eingebettet",
     },
     "documentDesigner.mail.resource.hint": {
         en: "Inline images are sent as CID. Attachments from PDF templates are generated when the mail is sent.",
@@ -431,6 +493,18 @@ export const DOCUMENT_DESIGNER_I18N = {
         en: "Default sender of the tenant",
         de: "Standard-Absender des Mandanten",
     },
+    "documentDesigner.mail.props.senderPlaceholder": {
+        en: "Name shown to recipients",
+        de: "Name, den Empfänger sehen",
+    },
+    "documentDesigner.mail.props.senderHint": {
+        en: "The address comes from the platform's mail delivery.",
+        de: "Die Adresse kommt vom Mail-Versand der Plattform.",
+    },
+    "documentDesigner.mail.props.replyTo": {
+        en: "Reply to",
+        de: "Antwort an",
+    },
     "documentDesigner.mail.props.category": {
         en: "Category",
         de: "Kategorie",
@@ -467,6 +541,10 @@ export const DOCUMENT_DESIGNER_I18N = {
         en: "File",
         de: "Datei",
     },
+    "documentDesigner.mail.attachments.hint": {
+        en: "PDF templates are generated when the mail is sent; files go out as uploaded.",
+        de: "PDF-Vorlagen werden beim Versand erzeugt, Dateien gehen so mit, wie sie hochgeladen wurden.",
+    },
     "documentDesigner.mail.pdfLink.title": {
         en: "Attachment from PDF template",
         de: "Anhang aus PDF-Vorlage",
@@ -511,6 +589,10 @@ export const DOCUMENT_DESIGNER_I18N = {
         en: "v{version} {when}, {name}",
         de: "v{version} {when}, {name}",
     },
+    "documentDesigner.mail.versions.hint": {
+        en: "Every save creates a new version. The active one is what recipients get.",
+        de: "Jedes Speichern legt eine neue Version an. Aktiv ist die Version, die Empfänger bekommen.",
+    },
     "documentDesigner.mail.footer.missing": {
         en: 'Required placeholder "{names}" is missing in subject, preview text and content. Publishing is blocked.',
         de: "Pflicht-Platzhalter „{names}“ fehlt in Betreff, Vorschautext und Inhalt. Veröffentlichen ist gesperrt.",
@@ -539,17 +621,9 @@ export const DOCUMENT_DESIGNER_I18N = {
         en: "Discard",
         de: "Verwerfen",
     },
-    "documentDesigner.mail.activeSave.title": {
-        en: "Save as draft?",
-        de: "Als Entwurf speichern?",
-    },
-    "documentDesigner.mail.activeSave.description": {
-        en: "Saving as a draft takes the active customisation offline until you publish. Publish instead?",
-        de: "Speichern als Entwurf nimmt die aktive Anpassung offline, bis Sie veröffentlichen. Stattdessen veröffentlichen?",
-    },
-    "documentDesigner.mail.activeSave.confirm": {
-        en: "Save as draft",
-        de: "Als Entwurf speichern",
+    "documentDesigner.origin.draftBesideActive": {
+        en: "Version {active} is sent, your draft (version {draft}) is not published yet.",
+        de: "Verschickt wird Version {active}, Ihr Entwurf (Version {draft}) ist noch nicht veröffentlicht.",
     },
     "documentDesigner.mail.leave.title": {
         en: "Unsaved changes",
@@ -568,8 +642,8 @@ export const DOCUMENT_DESIGNER_I18N = {
         de: "Verwerfen",
     },
     "documentDesigner.mail.preview.bar": {
-        en: 'Preview with sample values from the placeholder schema. Rendered through "{layout}".',
-        de: "Vorschau mit Beispielwerten aus dem Platzhalter-Schema. Gerendert über „{layout}“.",
+        en: 'Preview with sample values from the placeholder schema. Rendered through "Mail layout v{version}", renderer: MJML.',
+        de: "Vorschau mit Beispielwerten aus dem Platzhalter-Schema. Gerendert über „Mail-Layout v{version}“, Renderer: MJML.",
     },
     "documentDesigner.mail.preview.barPlain": {
         en: "Preview with sample values from the placeholder schema.",
@@ -611,6 +685,14 @@ export const DOCUMENT_DESIGNER_I18N = {
         en: "Mail preview",
         de: "Mail-Vorschau",
     },
+    "documentDesigner.mail.preview.from": {
+        en: "From",
+        de: "Von",
+    },
+    "documentDesigner.mail.preview.to": {
+        en: "To",
+        de: "An",
+    },
     "documentDesigner.mail.preview.samples": {
         en: "Sample values",
         de: "Beispielwerte",
@@ -631,6 +713,10 @@ export const DOCUMENT_DESIGNER_I18N = {
         en: "Checks",
         de: "Prüfung",
     },
+    "documentDesigner.mail.preview.checksHint": {
+        en: "What the server found while rendering this mail.",
+        de: "Das hat der Server beim Rendern dieser Mail gefunden.",
+    },
     "documentDesigner.mail.testMail.title": {
         en: "Test mail",
         de: "Test-Mail",
@@ -643,13 +729,21 @@ export const DOCUMENT_DESIGNER_I18N = {
         en: "Your address",
         de: "Ihre Adresse",
     },
-    "documentDesigner.mail.testMail.prefix": {
-        en: "Subject with [TEST] prefix",
+    "documentDesigner.mail.testMail.changeAddress": {
+        en: "Change address",
+        de: "Adresse ändern",
+    },
+    "documentDesigner.mail.testMail.prefixSubject": {
+        en: "Prefix the subject with [TEST]",
         de: "Betreff mit Präfix [TEST]",
     },
     "documentDesigner.mail.testMail.attachments": {
-        en: "Attachments are sent along",
-        de: "Anhänge werden mitgesendet",
+        en: "Send attachments along",
+        de: "Anhang mitsenden",
+    },
+    "documentDesigner.mail.testMail.noAttachments": {
+        en: "This template has no attachments",
+        de: "Diese Vorlage hat keine Anhänge",
     },
     "documentDesigner.mail.testMail.send": {
         en: "Send test mail",

package/dist/web/cells.js

@@ -44,7 +44,7 @@ export function createLocalesCell(appLocales) {
 }
 export function StatusCell({ row }) {
     const t = useTranslation();
-    return withRow(row, (r) => (_jsx(StatusBadge, { tone: statusTone(r.status), testId: "document-designer-status", children: statusLabel(t, r.status, r.version) })));
+    return withRow(row, (r) => (_jsxs("span", { className: "flex flex-col items-start gap-1", children: [_jsx(StatusBadge, { tone: statusTone(r.status), testId: "document-designer-status", children: statusLabel(t, r.status, r.version) }), r.status === "active" && r.draftVersion !== null && (_jsx(StatusBadge, { tone: statusTone("draft"), testId: "document-designer-draft-status", children: statusLabel(t, "draft", r.draftVersion) }))] })));
 }
 export function UsedByCell({ row }) {
     const t = useTranslation();

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

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+export type EditorMode = "edit" | "preview";
+/** "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 = {
+    readonly busy: boolean;
+    readonly canSave: boolean;
+    readonly canPublish: boolean;
+    readonly onSave: () => void;
+    readonly onPublish: () => void;
+};
+export declare function EditorHeader({ title, stored, actions, children, }: {
+    readonly title: string;
+    readonly stored: StoredVersion | null;
+    readonly actions: EditorSaveActions;
+    /** View controls left of the save actions (mode or kind switch). */
+    readonly children: ReactNode;
+}): ReactNode;

package/dist/web/editor-header.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { ModeSwitch, StatusBadge } from "@cosmicdrift/kumiko-renderer-web";
+import { asRowStatus, statusLabel, statusTone } from "./status-label.js";
+const ORIGIN_LABEL = {
+    system: "documentDesigner.origin.system",
+    override: "documentDesigner.origin.override",
+    tenant: "documentDesigner.source.tenant",
+};
+export function originOf(isSystemRow, hasSystemVersion) {
+    return isSystemRow ? "system" : hasSystemVersion ? "override" : "tenant";
+}
+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.
+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, _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") })] }) }));
+}

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

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import { type EditorOrigin } from "./editor-header.js";
+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, }: {
+    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;
+    readonly canPublish: boolean;
+    readonly onDiscard: () => void;
+    readonly onSave: () => void;
+    readonly onPublish: () => void;
+}): ReactNode;

package/dist/web/editor-shell.js

@@ -0,0 +1,36 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { cn } 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",
+};
+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, }) {
+    return (_jsxs("div", { className: cn("grid min-h-0 flex-1", left === undefined
+            ? "grid-cols-[minmax(0,1fr)_280px]"
+            : "grid-cols-[240px_minmax(0,1fr)_280px]"), "data-testid": testId, children: [left !== undefined && (_jsx("aside", { className: "min-h-0 overflow-y-auto border-r bg-background", children: left })), _jsx("div", { className: "flex min-h-0 min-w-0 flex-col overflow-hidden bg-muted", children: center }), _jsx("aside", { className: "min-h-0 overflow-y-auto border-l bg-background", children: right })] }));
+}
+export function EditorFooter({ testIdPrefix, message, saveError, modifiedAt, dirty, busy, canSave, canPublish, onDiscard, onSave, onPublish, }) {
+    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") })] })] }));
+}