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

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { DEFAULT_TEMPLATE_LOCALES, DOCUMENT_DESIGNER_FEATURE, LAYOUT_EDITOR_SCREEN_ID, MAIL_EDITOR_SCREEN_ID, PDF_TEMPLATE_EDITOR_SCREEN_ID, PLATFORM_TEMPLATES_NAV_ID, PLATFORM_TEMPLATES_SCREEN_ID, TEMPLATE_EDITOR_SCREENS, TEMPLATES_NAV_ID, TEMPLATES_SCREEN_ID, type TemplateEditorKind, } from "./constants.js";
+export { createDocumentDesignerFeature } from "./feature.js";

package/dist/index.js

@@ -0,0 +1,2 @@
+export { DEFAULT_TEMPLATE_LOCALES, DOCUMENT_DESIGNER_FEATURE, LAYOUT_EDITOR_SCREEN_ID, MAIL_EDITOR_SCREEN_ID, PDF_TEMPLATE_EDITOR_SCREEN_ID, PLATFORM_TEMPLATES_NAV_ID, PLATFORM_TEMPLATES_SCREEN_ID, TEMPLATE_EDITOR_SCREENS, TEMPLATES_NAV_ID, TEMPLATES_SCREEN_ID, } from "./constants.js";
+export { createDocumentDesignerFeature } from "./feature.js";

package/dist/list-definition.d.ts

@@ -0,0 +1,6 @@
+import { type ListColumnSpec, type ListFacetSpec, type RowAction } from "@cosmicdrift/kumiko-framework/engine";
+export declare function templateColumns(options: {
+    readonly platform: boolean;
+}): ListColumnSpec[];
+export declare const TEMPLATE_FACETS: readonly ListFacetSpec[];
+export declare function templateRowActions(): RowAction[];

package/dist/list-definition.js

@@ -0,0 +1,109 @@
+import { i18nKey, } from "@cosmicdrift/kumiko-framework/engine";
+import { DocumentDesignerCells, TEMPLATE_EDITOR_SCREENS, } from "./constants.js";
+function cell(component) {
+    return { react: { __component: component } };
+}
+const BASE_COLUMNS = [
+    {
+        field: "title",
+        label: i18nKey("documentDesigner.col.template"),
+        renderer: cell(DocumentDesignerCells.title),
+    },
+    {
+        field: "kindGroup",
+        label: i18nKey("documentDesigner.col.kind"),
+        renderer: cell(DocumentDesignerCells.kind),
+    },
+    {
+        field: "origin",
+        label: i18nKey("documentDesigner.col.origin"),
+        renderer: cell(DocumentDesignerCells.origin),
+    },
+    {
+        field: "locales",
+        label: i18nKey("documentDesigner.col.locales"),
+        hideOnNarrow: true,
+        renderer: cell(DocumentDesignerCells.locales),
+    },
+    {
+        field: "status",
+        label: i18nKey("documentDesigner.col.status"),
+        renderer: cell(DocumentDesignerCells.status),
+    },
+    {
+        field: "usedBy",
+        label: i18nKey("documentDesigner.col.usedBy"),
+        hideOnNarrow: true,
+        renderer: cell(DocumentDesignerCells.usedBy),
+    },
+    {
+        field: "modifiedAt",
+        label: i18nKey("documentDesigner.col.modifiedAt"),
+        hideOnNarrow: true,
+        renderer: cell(DocumentDesignerCells.modifiedAt),
+    },
+];
+const OVERRIDDEN_BY_COLUMN = {
+    field: "overriddenBy",
+    label: i18nKey("documentDesigner.col.overriddenBy"),
+    virtual: true,
+    hideOnNarrow: true,
+    renderer: cell(DocumentDesignerCells.overriddenBy),
+};
+export function templateColumns(options) {
+    return options.platform ? [...BASE_COLUMNS, OVERRIDDEN_BY_COLUMN] : [...BASE_COLUMNS];
+}
+export const TEMPLATE_FACETS = [
+    {
+        field: "kindGroup",
+        type: "select",
+        label: i18nKey("documentDesigner.facet.kind"),
+        options: [
+            { value: "mail", label: i18nKey("documentDesigner.kind.mail") },
+            { value: "pdf", label: i18nKey("documentDesigner.kind.pdf") },
+            { value: "layout", label: i18nKey("documentDesigner.kind.layout") },
+        ],
+    },
+    {
+        field: "origin",
+        type: "select",
+        label: i18nKey("documentDesigner.facet.origin"),
+        options: [
+            { value: "system", label: i18nKey("documentDesigner.source.system") },
+            { value: "tenant", label: i18nKey("documentDesigner.source.tenant") },
+        ],
+    },
+    {
+        field: "status",
+        type: "select",
+        label: i18nKey("documentDesigner.facet.status"),
+        options: [
+            { value: "active", label: i18nKey("documentDesigner.status.active") },
+            { value: "draft", label: i18nKey("documentDesigner.status.draft") },
+            { value: "archived", label: i18nKey("documentDesigner.status.archived") },
+        ],
+    },
+];
+const EDITABLE_KINDS = [
+    "mail",
+    "document-pdf",
+    "mail-layout",
+    "pdf-layout",
+];
+export function templateRowActions() {
+    return EDITABLE_KINDS.flatMap((kind) => {
+        const screen = TEMPLATE_EDITOR_SCREENS[kind];
+        if (screen === undefined)
+            return [];
+        return [
+            {
+                kind: "navigate",
+                id: `edit-${kind}`,
+                label: i18nKey("documentDesigner.action.edit"),
+                screen,
+                params: { pick: ["slug", "kind"] },
+                visible: { field: "kind", eq: kind },
+            },
+        ];
+    });
+}

package/dist/web/cells.d.ts

@@ -0,0 +1,10 @@
+import { type ColumnRendererComponent, type ColumnRendererProps } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+export declare function TitleCell({ row }: ColumnRendererProps): ReactNode;
+export declare function KindCell({ row }: ColumnRendererProps): ReactNode;
+export declare function OriginCell({ row }: ColumnRendererProps): ReactNode;
+export declare function createLocalesCell(appLocales: readonly string[]): ColumnRendererComponent;
+export declare function StatusCell({ row }: ColumnRendererProps): ReactNode;
+export declare function UsedByCell({ row }: ColumnRendererProps): ReactNode;
+export declare function ModifiedCell({ row }: ColumnRendererProps): ReactNode;
+export declare function OverriddenByCell({ row }: ColumnRendererProps): ReactNode;

package/dist/web/cells.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { toInstant } from "@cosmicdrift/kumiko-headless";
+import { formatWhen, useQuery, useTranslation, } from "@cosmicdrift/kumiko-renderer";
+import { StatusBadge } from "@cosmicdrift/kumiko-renderer-web";
+import { parseOverviewRow } from "./overview-row.js";
+import { statusLabel, statusTone } from "./status-label.js";
+import { usedByLabel } from "./used-by-label.js";
+const EMPTY_MARK = "–";
+function withRow(row, render) {
+    const parsed = parseOverviewRow(row);
+    return parsed === null ? EMPTY_MARK : render(parsed);
+}
+export function TitleCell({ row }) {
+    return withRow(row, (r) => (_jsxs("div", { children: [_jsx("div", { className: "font-medium", children: r.title }), _jsx("span", { className: "block max-w-40 truncate font-mono text-xs text-muted-foreground", title: r.slug, children: r.slug })] })));
+}
+const KIND_KEY = {
+    mail: "documentDesigner.kind.mail",
+    "document-pdf": "documentDesigner.kind.pdf",
+    "mail-layout": "documentDesigner.kind.layout",
+    "pdf-layout": "documentDesigner.kind.layout",
+};
+export function KindCell({ row }) {
+    const t = useTranslation();
+    return withRow(row, (r) => t(KIND_KEY[r.kind]));
+}
+export function OriginCell({ row }) {
+    const t = useTranslation();
+    return withRow(row, (r) => (_jsx(StatusBadge, { tone: r.origin === "tenant" ? "accent" : "muted", testId: "document-designer-origin", children: t(r.origin === "tenant" ? "documentDesigner.source.tenant" : "documentDesigner.source.system") })));
+}
+export function createLocalesCell(appLocales) {
+    return function LocalesCell({ row }) {
+        return withRow(row, (r) => {
+            if (r.kind === "mail-layout" || r.kind === "pdf-layout")
+                return EMPTY_MARK;
+            const present = new Set(r.locales);
+            const shown = [...appLocales, ...r.locales.filter((l) => !appLocales.includes(l))];
+            return (_jsx("span", { className: "inline-flex gap-1", children: shown.map((locale) => (_jsx("span", { "data-testid": `document-designer-locale-${locale}`, "data-present": present.has(locale), className: present.has(locale)
+                        ? "rounded border border-transparent bg-muted px-1.5 text-xs font-medium uppercase"
+                        : "rounded border border-dashed px-1.5 text-xs uppercase text-muted-foreground", children: locale }, locale))) }));
+        });
+    };
+}
+export function StatusCell({ row }) {
+    const t = useTranslation();
+    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();
+    return withRow(row, (r) => {
+        const label = usedByLabel(t, r);
+        return (_jsx("span", { className: "block max-w-28 truncate", title: label, children: label }));
+    });
+}
+// Date only keeps the column narrow enough for the overview to fit without
+// horizontal scroll; the full timestamp stays reachable via the tooltip.
+function formatModifiedDate(value) {
+    try {
+        return toInstant(value).toLocaleString(undefined, { dateStyle: "medium" });
+    }
+    catch {
+        return value;
+    }
+}
+export function ModifiedCell({ row }) {
+    return withRow(row, (r) => r.modifiedAt === "" ? (EMPTY_MARK) : (_jsx("span", { className: "whitespace-nowrap", title: formatWhen(r.modifiedAt), children: formatModifiedDate(r.modifiedAt) })));
+}
+function OverriddenByCount({ slug, kind, }) {
+    const t = useTranslation();
+    const { data } = useQuery(TemplateResolverQueries.tenantOverrides, {
+        slug,
+        kind,
+    });
+    if (data === null)
+        return EMPTY_MARK;
+    const label = data.totalTenants === null
+        ? t("documentDesigner.overriddenBy.tenants", { active: data.activeOverrides })
+        : t("documentDesigner.overriddenBy.ofTotal", {
+            active: data.activeOverrides,
+            total: data.totalTenants,
+        });
+    return _jsx("span", { className: "whitespace-nowrap", children: label });
+}
+export function OverriddenByCell({ row }) {
+    return withRow(row, (r) => r.origin === "system" ? _jsx(OverriddenByCount, { slug: r.slug, kind: r.kind }) : EMPTY_MARK);
+}

package/dist/web/client-plugin.d.ts

@@ -0,0 +1,12 @@
+import type { ClientFeatureDefinition } from "@cosmicdrift/kumiko-renderer-web";
+import type { ReactNode } from "react";
+/**
+ * Custom screen body: the template comes from the URL (`?slug=...&locale=...`),
+ * because custom screens receive no props.
+ */
+export declare function PdfTemplateEditorScreen(): ReactNode;
+export type DocumentDesignerClientOptions = {
+    /** Locales shown as boxes in the overview's languages column; templates in other locales are appended. */
+    readonly appLocales?: readonly string[];
+};
+export declare function documentDesignerClient(options?: DocumentDesignerClientOptions): ClientFeatureDefinition;

package/dist/web/client-plugin.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @runtime client
+import { textBlocksClient } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { mergeTranslations, translationsByLocaleFromKeys, useNav, } from "@cosmicdrift/kumiko-renderer";
+import { DEFAULT_TEMPLATE_LOCALES, DOCUMENT_DESIGNER_FEATURE, DocumentDesignerCells, LAYOUT_EDITOR_SCREEN_ID, MAIL_EDITOR_SCREEN_ID, PDF_TEMPLATE_EDITOR_SCREEN_ID, } from "../constants.js";
+import { DOCUMENT_DESIGNER_I18N } from "../i18n.js";
+import { createLocalesCell, KindCell, ModifiedCell, OriginCell, OverriddenByCell, StatusCell, TitleCell, UsedByCell, } from "./cells.js";
+import { documentDesignerTranslations } from "./i18n.js";
+import { LayoutEditor } from "./layout-editor.js";
+import { createMailEditor } from "./mail-editor.js";
+import { PdfTemplateEditor } from "./pdf-template-editor.js";
+/**
+ * Custom screen body: the template comes from the URL (`?slug=...&locale=...`),
+ * because custom screens receive no props.
+ */
+export function PdfTemplateEditorScreen() {
+    const { searchParams, setSearchParams } = useNav();
+    const slug = searchParams["slug"];
+    if (slug === undefined || slug === "")
+        return null;
+    return (_jsx(PdfTemplateEditor, { slug: slug, ...(searchParams["locale"] !== undefined && { locale: searchParams["locale"] }), onLocaleChange: (locale) => setSearchParams({ locale }) }));
+}
+export function documentDesignerClient(options = {}) {
+    return {
+        name: DOCUMENT_DESIGNER_FEATURE,
+        columnRenderers: {
+            [DocumentDesignerCells.title]: TitleCell,
+            [DocumentDesignerCells.kind]: KindCell,
+            [DocumentDesignerCells.origin]: OriginCell,
+            [DocumentDesignerCells.locales]: createLocalesCell(options.appLocales ?? DEFAULT_TEMPLATE_LOCALES),
+            [DocumentDesignerCells.status]: StatusCell,
+            [DocumentDesignerCells.usedBy]: UsedByCell,
+            [DocumentDesignerCells.modifiedAt]: ModifiedCell,
+            [DocumentDesignerCells.overriddenBy]: OverriddenByCell,
+        },
+        components: {
+            [LAYOUT_EDITOR_SCREEN_ID]: LayoutEditor,
+            [PDF_TEMPLATE_EDITOR_SCREEN_ID]: PdfTemplateEditorScreen,
+            [MAIL_EDITOR_SCREEN_ID]: createMailEditor(options.appLocales ?? DEFAULT_TEMPLATE_LOCALES),
+        },
+        translations: mergeTranslations(mergeTranslations(textBlocksClient().translations ?? {}, documentDesignerTranslations), translationsByLocaleFromKeys(DOCUMENT_DESIGNER_I18N)),
+    };
+}

package/dist/web/compose-layout.d.ts

@@ -0,0 +1,6 @@
+export type LayoutRegionValues = {
+    readonly header: string;
+    readonly signature: string;
+    readonly footer: string;
+};
+export declare function composeLayoutHtml(regions: LayoutRegionValues): string;

package/dist/web/compose-layout.js

@@ -0,0 +1,13 @@
+// An untouched rich-text editor reports an empty paragraph rather than "".
+const EMPTY_REGION = /^(\s|<p>(\s|<br\s*\/?>)*<\/p>)*$/;
+// Same top-level div contract the server reads with readLayoutRegions: empty regions are
+// left out, the content slot is always present.
+export function composeLayoutHtml(regions) {
+    const region = (name, regionHtml) => EMPTY_REGION.test(regionHtml) ? "" : `<div data-${name}>${regionHtml}</div>`;
+    return [
+        region("header", regions.header),
+        "<div data-content></div>",
+        region("signature", regions.signature),
+        region("footer", regions.footer),
+    ].join("");
+}

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") })] })] }));
+}

package/dist/web/errors.d.ts

@@ -0,0 +1,6 @@
+import type { DispatcherError } from "@cosmicdrift/kumiko-headless";
+type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+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/errors.js

@@ -0,0 +1,24 @@
+// @runtime client
+import { TemplateResolverErrors } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
+function reasonOf(error) {
+    const reason = propertyOf(error.details, "reason");
+    return typeof reason === "string" ? reason : undefined;
+}
+export function isAlreadyActive(error) {
+    return (error.code === TemplateResolverErrors.alreadyActive ||
+        reasonOf(error) === TemplateResolverErrors.alreadyActive);
+}
+const REASON_KEYS = {
+    [TemplateResolverErrors.resourceTooLarge]: "documentDesigner.error.resourceTooLarge",
+    [TemplateResolverErrors.resourceUnsupportedImage]: "documentDesigner.error.resourceUnsupportedImage",
+};
+/** Plain-language text for a failed call; falls back to the server message when no translation exists. */
+export function describeError(t, error) {
+    const reason = reasonOf(error);
+    const reasonKey = reason === undefined ? undefined : REASON_KEYS[reason];
+    if (reasonKey !== undefined)
+        return t(reasonKey);
+    const translated = t(error.i18nKey, error.i18nParams);
+    return translated === error.i18nKey ? error.message : translated;
+}

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

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

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

@@ -0,0 +1,12 @@
+// @runtime client
+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(" ")}`;
+}

package/dist/web/file-name.d.ts

@@ -0,0 +1,2 @@
+export declare function fetchStoredFileName(fileRefId: string): Promise<string | null>;
+export declare const fileUrl: (fileRefId: string) => string;

package/dist/web/file-name.js

@@ -0,0 +1,17 @@
+// @runtime client
+// The upload input only hands back the FileRef id; resources are keyed and named after the file.
+export async function fetchStoredFileName(fileRefId) {
+    try {
+        const res = await fetch(`/api/files/${encodeURIComponent(fileRefId)}/meta`);
+        if (!res.ok)
+            return null;
+        const meta = await res.json();
+        if (typeof meta !== "object" || meta === null || !("fileName" in meta))
+            return null;
+        return typeof meta.fileName === "string" ? meta.fileName : null;
+    }
+    catch {
+        return null;
+    }
+}
+export const fileUrl = (fileRefId) => `/api/files/${encodeURIComponent(fileRefId)}`;

package/dist/web/i18n.d.ts

@@ -0,0 +1,2 @@
+import type { TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
+export declare const documentDesignerTranslations: TranslationsByLocale;