@cosmicdrift/kumiko-samples 0.362.0 → 0.364.0

package/samples/apps/ui-walkthrough/src/app/template-seed-data.ts

@@ -0,0 +1,570 @@
+// Template content for the Nordlicht document-designer walkthrough. Pure data,
+// no framework import: seed-templates.ts feeds it through the template write
+// handlers, so every body here goes through the real sanitizer and placeholder
+// validation.
+
+export type SeedTemplate = {
+  readonly slug: string;
+  readonly kind: "mail" | "mail-layout" | "document-pdf" | "pdf-layout";
+  readonly locale: string;
+  readonly title?: string;
+  readonly content: string;
+  readonly meta?: Record<string, unknown>;
+  readonly variableSchema?: Record<string, unknown>;
+};
+
+// Document HTML marks a variable as an empty span; only link targets take {{name}}.
+const v = (name: string): string => `<span data-variable="${name}"></span>`;
+
+// Resource key of the logo image the invoice mail embeds (uploaded by seed-templates.ts).
+export const LOGO_RESOURCE_KEY = "logo-nordlicht.png";
+
+const AUTH_VARIABLE_SCHEMA = {
+  appName: { type: "text", required: true },
+  actionUrl: { type: "link", required: true },
+  validFor: { type: "text", required: true },
+  validUntil: { type: "text", required: true },
+} as const;
+
+const INVOICE_VARIABLE_SCHEMA = {
+  customerName: { type: "text", required: true },
+  invoiceNumber: { type: "text", required: true },
+  amount: { type: "money", required: true },
+  dueDate: { type: "date", required: true },
+  invoiceUrl: { type: "link", required: true },
+} as const;
+
+const DOCUMENT_LINES_SCHEMA = {
+  tenantName: { type: "text" },
+  customerName: { type: "text", required: true },
+  invoiceNumber: { type: "text", required: true },
+  invoiceDate: { type: "date", required: true },
+  total: { type: "money", required: true },
+  lines: {
+    type: "list",
+    required: true,
+    item: { description: { type: "text" }, amount: { type: "money" } },
+  },
+} as const;
+
+// Same variable names the billing notifications declare; labels follow the template language.
+type InvoiceDocumentLabels = {
+  readonly recipientAddress: string;
+  readonly invoiceNumber: string;
+  readonly invoiceDate: string;
+  readonly invoiceTotal: string;
+  readonly netTotal: string;
+  readonly vatAmount: string;
+  readonly dueDate: string;
+  readonly lines: string;
+  readonly position: string;
+  readonly description: string;
+  readonly period: string;
+  readonly net: string;
+  readonly paymentReference: string;
+  readonly iban: string;
+};
+
+function invoiceDocumentSchema(labels: InvoiceDocumentLabels) {
+  return {
+    recipientAddress: {
+      type: "text",
+      required: true,
+      label: labels.recipientAddress,
+      example: "Familie Yilmaz, Lindenstraße 14, 24103 Kiel",
+    },
+    invoiceNumber: {
+      type: "text",
+      required: true,
+      label: labels.invoiceNumber,
+      example: "RE-2026-0142",
+    },
+    invoiceDate: { type: "date", required: true, label: labels.invoiceDate, example: "2026-10-01" },
+    dueDate: { type: "date", required: true, label: labels.dueDate, example: "2026-10-15" },
+    netTotal: {
+      type: "money",
+      label: labels.netTotal,
+      example: { amount: 107900, currency: "EUR" },
+    },
+    vatAmount: {
+      type: "money",
+      label: labels.vatAmount,
+      example: { amount: 20501, currency: "EUR" },
+    },
+    invoiceTotal: {
+      type: "money",
+      required: true,
+      label: labels.invoiceTotal,
+      example: { amount: 128401, currency: "EUR" },
+    },
+    lines: {
+      type: "list",
+      required: true,
+      label: labels.lines,
+      item: {
+        position: { type: "text", label: labels.position },
+        description: { type: "text", label: labels.description },
+        period: { type: "text", label: labels.period },
+        net: { type: "money", label: labels.net },
+      },
+      example: [
+        {
+          position: "1",
+          description: "Kaltmiete Lindenstraße 14, WE 3",
+          period: "Okt 2026",
+          net: { amount: 98000, currency: "EUR" },
+        },
+        {
+          position: "2",
+          description: "Stellplatz 7",
+          period: "Okt 2026",
+          net: { amount: 9900, currency: "EUR" },
+        },
+      ],
+    },
+    paymentReference: {
+      type: "text",
+      label: labels.paymentReference,
+      example: "RE-2026-0142 / Yilmaz",
+    },
+    iban: { type: "text", label: labels.iban, example: "DE12 2105 0170 0012 3456 78" },
+  } as const;
+}
+
+const INVOICE_DOCUMENT_SCHEMA_DE = invoiceDocumentSchema({
+  recipientAddress: "Empfängeradresse",
+  invoiceNumber: "Rechnungsnummer",
+  invoiceDate: "Rechnungsdatum",
+  invoiceTotal: "Rechnungsbetrag",
+  netTotal: "Nettobetrag",
+  vatAmount: "Umsatzsteuer",
+  dueDate: "Fälligkeitsdatum",
+  lines: "Rechnungspositionen",
+  position: "Nr.",
+  description: "Bezeichnung",
+  period: "Zeitraum",
+  net: "Netto",
+  paymentReference: "Zahlungsreferenz",
+  iban: "IBAN",
+});
+
+const INVOICE_DOCUMENT_SCHEMA_EN = invoiceDocumentSchema({
+  recipientAddress: "Recipient address",
+  invoiceNumber: "Invoice number",
+  invoiceDate: "Invoice date",
+  invoiceTotal: "Invoice total",
+  netTotal: "Net amount",
+  vatAmount: "VAT",
+  dueDate: "Due date",
+  lines: "Invoice lines",
+  position: "No.",
+  description: "Description",
+  period: "Period",
+  net: "Net",
+  paymentReference: "Payment reference",
+  iban: "IBAN",
+});
+
+export const SYSTEM_PDF_LAYOUT: SeedTemplate = {
+  slug: "default",
+  kind: "pdf-layout",
+  locale: "en",
+  title: "Briefpapier",
+  content: [
+    `<div data-header><table><tbody><tr><td><img data-resource="logo" alt="Nordlicht"></td><td><p data-align="right" data-size="small">Am Hafen 12 · 24103 Kiel</p></td></tr></tbody></table></div>`,
+    "<div data-content></div>",
+    "<div data-signature></div>",
+    `<div data-footer><p>Seite ${v("page")} von ${v("pages")}</p><p>${v("tenantName")} · HRB 18422 Kiel · IBAN DE12 2105 0170 0012 3456 78</p></div>`,
+  ].join(""),
+};
+
+export const TENANT_MAIL_LAYOUT_VERSIONS: readonly string[] = [
+  [
+    `<div data-header><p><strong>${v("tenantName")}</strong></p></div>`,
+    "<div data-content></div>",
+    "<div data-signature><p>Mit freundlichen Grüßen</p></div>",
+    `<div data-footer><p>${v("tenantName")}</p></div>`,
+  ].join(""),
+  [
+    '<div data-header><img data-resource="logo" alt="Nordlicht"></div>',
+    "<div data-content></div>",
+    `<div data-signature><p>Mit freundlichen Grüßen</p><p>${v("signature")}</p><p>${v("tenantName")}</p></div>`,
+    `<div data-footer><p>${v("imprint")}</p><p><a href="https://nordlicht-immobilien.de/datenschutz">Datenschutz</a> · <a href="{{unsubscribeUrl}}">Abmeldelink</a></p></div>`,
+  ].join(""),
+];
+
+const LINES_TABLE = `<table><tbody><tr><th><p>Position</p></th><th><p data-align="right">Betrag</p></th></tr><tr data-each="lines" data-repeat-header=""><td><p>${v("description")}</p></td><td><p data-align="right">${v("amount")}</p></td></tr><tr><td><p><strong>Gesamt</strong></p></td><td><p data-align="right">${v("invoiceTotal")}</p></td></tr></tbody></table>`;
+
+// The registry of the billing notifications declares the variables, so these
+// templates carry no variableSchema of their own.
+function invoiceIssuedBody(args: {
+  readonly intro: string;
+  readonly withDueDate: boolean;
+}): string {
+  const due = args.withDueDate ? ` Bitte überweisen Sie den Betrag bis zum ${v("dueDate")}.` : "";
+  return [
+    `<h2>Ihre Rechnung ${v("invoiceNumber")}</h2>`,
+    `<p>Guten Tag ${v("recipientName")},</p>`,
+    `<p>${args.intro} ${v("invoiceNumber")} über ${v("invoiceTotal")}.${due} Die Rechnung finden Sie als PDF im Anhang und jederzeit online.</p>`,
+    '<a data-button href="{{invoiceUrl}}">Rechnung online ansehen</a>',
+    LINES_TABLE,
+    "<hr>",
+    "<p>Bei Fragen zur Rechnung antworten Sie einfach auf diese E-Mail.</p>",
+    `<p>${v("signature")}</p>`,
+  ].join("");
+}
+
+const INVOICE_ISSUED_SLUG = "billing:notify:invoice-issued";
+const INVOICE_CORRECTED_SLUG = "billing:notify:invoice-corrected";
+
+const invoiceIssuedMeta = (subject: string) => ({
+  subject,
+  previewText: "Rechnung {{invoiceNumber}} über {{invoiceTotal}}, online abrufbar",
+});
+
+const tenantInvoiceMeta = (subject: string) => ({
+  ...invoiceIssuedMeta(subject),
+  senderName: "Nordlicht Immobilien GmbH",
+  replyTo: "buchhaltung@nordlicht-immobilien.de",
+});
+
+// The platform default has a due date; the tenant drafts below drop it, which
+// is what blocks publishing in the walkthrough.
+export const SYSTEM_INVOICE_ISSUED: SeedTemplate = {
+  slug: INVOICE_ISSUED_SLUG,
+  kind: "mail",
+  locale: "de",
+  title: "Rechnung versendet",
+  content: invoiceIssuedBody({ intro: "anbei senden wir Ihnen die Rechnung", withDueDate: true }),
+  meta: invoiceIssuedMeta("Rechnung {{invoiceNumber}} von {{tenantName}}"),
+};
+
+// Saved in order: each entry becomes the next version of the same draft.
+export const INVOICE_ISSUED_DRAFT_VERSIONS: readonly SeedTemplate[] = [
+  {
+    slug: INVOICE_ISSUED_SLUG,
+    kind: "mail",
+    locale: "de",
+    title: "Rechnung versendet",
+    content: invoiceIssuedBody({
+      intro: "anbei senden wir Ihnen die Rechnung",
+      withDueDate: false,
+    }),
+    meta: tenantInvoiceMeta("Ihre Rechnung {{invoiceNumber}}"),
+  },
+  {
+    slug: INVOICE_ISSUED_SLUG,
+    kind: "mail",
+    locale: "de",
+    title: "Rechnung versendet",
+    content: invoiceIssuedBody({ intro: "anbei erhalten Sie die Rechnung", withDueDate: false }),
+    meta: tenantInvoiceMeta("Ihre Rechnung {{invoiceNumber}} von {{tenantName}}"),
+  },
+];
+
+// Separate draft for the screenshot spec, so the mail-editor e2e can change
+// "Rechnung versendet" without touching what the screenshots show.
+export const INVOICE_CORRECTED_DRAFT: SeedTemplate = {
+  slug: INVOICE_CORRECTED_SLUG,
+  kind: "mail",
+  locale: "de",
+  title: "Korrigierte Rechnung",
+  content: invoiceIssuedBody({
+    intro: "anbei erhalten Sie die korrigierte Rechnung",
+    withDueDate: false,
+  }),
+  meta: invoiceIssuedMeta("Ihre Rechnung {{invoiceNumber}} von {{tenantName}}"),
+};
+
+export const PAYMENT_REMINDER_TEMPLATES: readonly SeedTemplate[] = [
+  {
+    slug: "billing:notify:payment-reminder",
+    kind: "mail",
+    locale: "de",
+    title: "Zahlungserinnerung",
+    content: [
+      `<p>Guten Tag ${v("customerName")},</p>`,
+      `<p>zu unserer Rechnung <strong>${v("invoiceNumber")}</strong> über <strong>${v("amount")}</strong> konnten wir bis heute keinen Zahlungseingang feststellen. Fällig war der Betrag am ${v("dueDate")}.</p>`,
+      `<p>Bitte überweisen Sie den offenen Betrag in den nächsten Tagen. Die Rechnung finden Sie hier: <a href="{{invoiceUrl}}">Rechnung öffnen</a></p>`,
+      "<p>Sollten Sie bereits gezahlt haben, betrachten Sie diese Nachricht bitte als gegenstandslos.</p>",
+    ].join(""),
+    meta: { subject: "Zahlungserinnerung zu Rechnung {{invoiceNumber}}" },
+    variableSchema: INVOICE_VARIABLE_SCHEMA,
+  },
+  {
+    slug: "billing:notify:payment-reminder",
+    kind: "mail",
+    locale: "en",
+    title: "Payment reminder",
+    content: [
+      `<p>Hello ${v("customerName")},</p>`,
+      `<p>we have not received a payment for invoice <strong>${v("invoiceNumber")}</strong> of <strong>${v("amount")}</strong>, which was due on ${v("dueDate")}.</p>`,
+      `<p>Please transfer the open amount in the next few days. You can find the invoice here: <a href="{{invoiceUrl}}">Open invoice</a></p>`,
+      "<p>If you have already paid, please disregard this message.</p>",
+    ].join(""),
+    meta: { subject: "Payment reminder for invoice {{invoiceNumber}}" },
+    variableSchema: INVOICE_VARIABLE_SCHEMA,
+  },
+];
+
+function authMail(
+  notification: string,
+  locale: "de" | "en",
+  title: string,
+  subject: string,
+  paragraphs: readonly string[],
+  extraSchema: Record<string, unknown> = {},
+): SeedTemplate {
+  return {
+    slug: `auth-email-password:notify:${notification}`,
+    kind: "mail",
+    locale,
+    title,
+    content: paragraphs.join(""),
+    meta: { subject },
+    variableSchema: { ...AUTH_VARIABLE_SCHEMA, ...extraSchema },
+  };
+}
+
+export const SYSTEM_AUTH_MAILS: readonly SeedTemplate[] = [
+  authMail(
+    "password-reset",
+    "de",
+    "Passwort zurücksetzen",
+    "Passwort für {{appName}} zurücksetzen",
+    [
+      "<p>Hallo,</p>",
+      `<p>für Ihr Konto bei ${v("appName")} wurde ein neues Passwort angefordert. Über den folgenden Link können Sie es festlegen: <a href="{{actionUrl}}">Passwort zurücksetzen</a></p>`,
+      `<p>Der Link ist ${v("validFor")} gültig, bis ${v("validUntil")}. Haben Sie das nicht angefordert, können Sie diese Nachricht ignorieren.</p>`,
+    ],
+  ),
+  authMail("password-reset", "en", "Reset password", "Reset your {{appName}} password", [
+    "<p>Hello,</p>",
+    `<p>a new password was requested for your ${v("appName")} account. You can set it with this link: <a href="{{actionUrl}}">Reset password</a></p>`,
+    `<p>The link is valid for ${v("validFor")}, until ${v("validUntil")}. If you did not ask for this, you can ignore this message.</p>`,
+  ]),
+  authMail(
+    "invite",
+    "de",
+    "Einladung ins Team",
+    "Einladung zu {{appName}}",
+    [
+      "<p>Hallo,</p>",
+      `<p>Sie wurden zu ${v("appName")} eingeladen, mit der Rolle <strong>${v("role")}</strong>. Mit dem folgenden Link nehmen Sie die Einladung an: <a href="{{actionUrl}}">Einladung annehmen</a></p>`,
+      `<p>Die Einladung ist ${v("validFor")} gültig, bis ${v("validUntil")}.</p>`,
+    ],
+    { role: { type: "text", required: true } },
+  ),
+  authMail(
+    "invite",
+    "en",
+    "Team invitation",
+    "You are invited to {{appName}}",
+    [
+      "<p>Hello,</p>",
+      `<p>You have been invited to ${v("appName")} with the role <strong>${v("role")}</strong>. Accept the invitation with this link: <a href="{{actionUrl}}">Accept invitation</a></p>`,
+      `<p>The invitation is valid for ${v("validFor")}, until ${v("validUntil")}.</p>`,
+    ],
+    { role: { type: "text", required: true } },
+  ),
+  authMail(
+    "signup-activation",
+    "de",
+    "Registrierung bestätigen",
+    "Registrierung bei {{appName}} bestätigen",
+    [
+      "<p>Willkommen,</p>",
+      `<p>vielen Dank für Ihre Registrierung bei ${v("appName")}. Bitte bestätigen Sie Ihre E-Mail-Adresse: <a href="{{actionUrl}}">Registrierung bestätigen</a></p>`,
+      `<p>Der Link ist ${v("validFor")} gültig, bis ${v("validUntil")}.</p>`,
+    ],
+  ),
+  authMail(
+    "email-verification",
+    "de",
+    "E-Mail-Adresse bestätigen",
+    "E-Mail-Adresse für {{appName}} bestätigen",
+    [
+      "<p>Hallo,</p>",
+      `<p>bitte bestätigen Sie Ihre E-Mail-Adresse für ${v("appName")}: <a href="{{actionUrl}}">E-Mail-Adresse bestätigen</a></p>`,
+      `<p>Der Link ist ${v("validFor")} gültig, bis ${v("validUntil")}.</p>`,
+    ],
+  ),
+  authMail("email-verification", "en", "Confirm email address", "Confirm your {{appName}} email", [
+    "<p>Hello,</p>",
+    `<p>please confirm your email address for ${v("appName")}: <a href="{{actionUrl}}">Confirm email address</a></p>`,
+    `<p>The link is valid for ${v("validFor")}, until ${v("validUntil")}.</p>`,
+  ]),
+  authMail("account-unlock", "de", "Konto entsperren", "Ihr Konto bei {{appName}} entsperren", [
+    "<p>Hallo,</p>",
+    `<p>Ihr Konto bei ${v("appName")} wurde nach mehreren fehlgeschlagenen Anmeldungen gesperrt. Mit dem folgenden Link entsperren Sie es: <a href="{{actionUrl}}">Konto entsperren</a></p>`,
+    `<p>Der Link ist ${v("validFor")} gültig, bis ${v("validUntil")}.</p>`,
+  ]),
+  authMail("account-unlock", "en", "Unlock account", "Unlock your {{appName}} account", [
+    "<p>Hello,</p>",
+    `<p>your ${v("appName")} account was locked after several failed sign-ins. Unlock it with this link: <a href="{{actionUrl}}">Unlock account</a></p>`,
+    `<p>The link is valid for ${v("validFor")}, until ${v("validUntil")}.</p>`,
+  ]),
+];
+
+const UTILITY_ROWS = `<table><tbody><tr><th><p>Leistung</p></th><th><p>Betrag</p></th></tr><tr data-each="lines" data-repeat-header=""><td><p>${v("description")}</p></td><td><p>${v("amount")}</p></td></tr></tbody></table>`;
+
+const right = (inner: string): string => `<p data-align="right">${inner}</p>`;
+
+function invoiceRows(labels: {
+  readonly service: string;
+  readonly period: string;
+  readonly net: string;
+}): string {
+  return [
+    "<table><tbody>",
+    `<tr><th><p>#</p></th><th><p>${labels.service}</p></th><th><p>${labels.period}</p></th><th><p data-align="right">${labels.net}</p></th></tr>`,
+    `<tr data-each="lines" data-repeat-header=""><td><p>${v("position")}</p></td><td><p>${v("description")}</p></td><td><p>${v("period")}</p></td><td><p data-align="right">${v("net")}</p></td></tr>`,
+    "</tbody></table>",
+  ].join("");
+}
+
+export const SYSTEM_INVOICE_DOCUMENTS: readonly SeedTemplate[] = [
+  {
+    slug: "billing:invoice",
+    kind: "document-pdf",
+    locale: "de",
+    title: "Rechnung",
+    content: [
+      `<p data-size="small"><u>Nordlicht Immobilien GmbH · Am Hafen 12 · 24103 Kiel</u></p>`,
+      `<p>${v("recipientAddress")}</p>`,
+      right(`Rechnungsnummer: ${v("invoiceNumber")}`),
+      right(`Rechnungsdatum: ${v("invoiceDate")}`),
+      right(`Fällig am: ${v("dueDate")}`),
+      `<h1>Rechnung ${v("invoiceNumber")}</h1>`,
+      "<p>Sehr geehrte Damen und Herren,</p>",
+      "<p>wir stellen Ihnen die folgenden Leistungen in Rechnung:</p>",
+      invoiceRows({ service: "Leistung", period: "Zeitraum", net: "Netto" }),
+      right(`Nettobetrag ${v("netTotal")}`),
+      right(`Umsatzsteuer 19 % ${v("vatAmount")}`),
+      right(`<strong>Rechnungsbetrag ${v("invoiceTotal")}</strong>`),
+      `<p>Bitte überweisen Sie den Rechnungsbetrag bis zum ${v("dueDate")} unter Angabe der Referenz ${v("paymentReference")} auf ${v("iban")}.</p>`,
+      "<div data-page-break></div>",
+      "<p>Zahlungsbedingungen und Hinweise auf Seite 2 …</p>",
+    ].join(""),
+    meta: {
+      layoutSlug: "default",
+      pageFormat: "A4",
+      fileName: "rechnung-{{invoiceNumber}}.pdf",
+      metadata: { title: "Rechnung {{invoiceNumber}}" },
+    },
+    variableSchema: INVOICE_DOCUMENT_SCHEMA_DE,
+  },
+  {
+    slug: "billing:invoice",
+    kind: "document-pdf",
+    locale: "en",
+    title: "Invoice",
+    content: [
+      `<p data-size="small"><u>Nordlicht Immobilien GmbH · Am Hafen 12 · 24103 Kiel</u></p>`,
+      `<p>${v("recipientAddress")}</p>`,
+      right(`Invoice number: ${v("invoiceNumber")}`),
+      right(`Invoice date: ${v("invoiceDate")}`),
+      right(`Due on: ${v("dueDate")}`),
+      `<h1>Invoice ${v("invoiceNumber")}</h1>`,
+      "<p>Dear Sir or Madam,</p>",
+      "<p>we charge you the following services:</p>",
+      invoiceRows({ service: "Service", period: "Period", net: "Net" }),
+      right(`Net amount ${v("netTotal")}`),
+      right(`VAT 19 % ${v("vatAmount")}`),
+      right(`<strong>Total ${v("invoiceTotal")}</strong>`),
+      `<p>Please transfer the amount by ${v("dueDate")} quoting the reference ${v("paymentReference")} to ${v("iban")}.</p>`,
+      "<div data-page-break></div>",
+      "<p>Terms of payment and notes on page 2 …</p>",
+    ].join(""),
+    meta: {
+      layoutSlug: "default",
+      pageFormat: "A4",
+      fileName: "invoice-{{invoiceNumber}}.pdf",
+      metadata: { title: "Invoice {{invoiceNumber}}" },
+    },
+    variableSchema: INVOICE_DOCUMENT_SCHEMA_EN,
+  },
+];
+
+export const TENANT_UTILITY_STATEMENT: SeedTemplate = {
+  slug: "rental:utility-statement",
+  kind: "document-pdf",
+  locale: "de",
+  title: "Nebenkostenabrechnung",
+  content: [
+    `<h1>Nebenkostenabrechnung ${v("invoiceNumber")}</h1>`,
+    `<p>Abrechnungsdatum: ${v("invoiceDate")}</p>`,
+    `<p>Guten Tag ${v("customerName")},</p>`,
+    "<p>nachfolgend erhalten Sie die Abrechnung der Betriebskosten für den Abrechnungszeitraum.</p>",
+    UTILITY_ROWS,
+    `<p><strong>Ergebnis: ${v("total")}</strong></p>`,
+    "<p>Ein Guthaben überweisen wir Ihnen innerhalb von 30 Tagen, eine Nachzahlung ist zum Monatsende fällig.</p>",
+  ].join(""),
+  meta: { layoutSlug: "default", pageFormat: "A4", fileName: "Nebenkostenabrechnung.pdf" },
+  variableSchema: DOCUMENT_LINES_SCHEMA,
+};
+
+export const SYSTEM_TENANCY_CERTIFICATE: SeedTemplate = {
+  slug: "rental:tenancy-certificate",
+  kind: "document-pdf",
+  locale: "de",
+  title: "Mietbescheinigung",
+  content: [
+    "<h1>Mietbescheinigung</h1>",
+    `<p>Hiermit bestätigen wir, dass ${v("customerName")} bei uns Mieter ist und die Miete ordnungsgemäß zahlt.</p>`,
+    `<p>Ausgestellt am ${v("invoiceDate")}.</p>`,
+  ].join(""),
+  meta: { layoutSlug: "default", pageFormat: "A4", fileName: "Mietbescheinigung.pdf" },
+  variableSchema: {
+    customerName: { type: "text", required: true },
+    invoiceDate: { type: "date", required: true },
+  },
+};
+
+// Two other tenants customise the invoice for the "Anpassungen der Mandanten" drawer: one
+// published copy with a second save, one draft.
+export type TenantInvoiceOverride = {
+  readonly tenantId: string;
+  readonly tenantKey: string;
+  readonly tenantName: string;
+  readonly adminEmail: string;
+  readonly adminName: string;
+  readonly status: "active" | "draft";
+  readonly versions: readonly SeedTemplate[];
+};
+
+const SYSTEM_INVOICE_DE = SYSTEM_INVOICE_DOCUMENTS[0] as SeedTemplate;
+const INVOICE_INTRO = "<p>wir stellen Ihnen die folgenden Leistungen in Rechnung:</p>";
+
+function invoiceWithIntro(sentence: string): SeedTemplate {
+  return {
+    ...SYSTEM_INVOICE_DE,
+    content: SYSTEM_INVOICE_DE.content.replace(INVOICE_INTRO, `<p>${sentence}</p>`),
+  };
+}
+
+export const TENANT_INVOICE_OVERRIDES: readonly TenantInvoiceOverride[] = [
+  {
+    tenantId: "00000000-0000-4000-8000-000000000004",
+    tenantKey: "kuestenwohnen",
+    tenantName: "Küstenwohnen Kiel GmbH",
+    adminEmail: "verwaltung@kuestenwohnen-kiel.de",
+    adminName: "M. Petersen",
+    status: "active",
+    versions: [
+      invoiceWithIntro("für den genannten Zeitraum stellen wir Ihnen Folgendes in Rechnung:"),
+      invoiceWithIntro(
+        "für den genannten Zeitraum stellen wir Ihnen Folgendes in Rechnung. Die Nebenkosten rechnen wir jährlich ab.",
+      ),
+    ],
+  },
+  {
+    tenantId: "00000000-0000-4000-8000-000000000005",
+    tenantKey: "hansa-wohnbau",
+    tenantName: "Hansa Wohnbau eG",
+    adminEmail: "rechnungswesen@hansa-wohnbau.de",
+    adminName: "K. Lorenzen",
+    status: "draft",
+    versions: [invoiceWithIntro("nachfolgend die Abrechnung für Ihre Wohnung:")],
+  },
+];

package/samples/apps/ui-walkthrough/src/features/billing/feature.ts

@@ -0,0 +1,72 @@
+import { defineFeature, templateVariable } from "@cosmicdrift/kumiko-framework/engine";
+import { toKeyFirst } from "../translations";
+import { billingTranslations } from "./i18n";
+
+// Both mails are sent by the host app's billing run, not by an event trigger in
+// this sample; they exist so the template overview has real senders to show.
+const INVOICE_ISSUED_VARIABLES = {
+  recipientName: templateVariable.text({
+    label: "Empfängername",
+    required: true,
+    example: "Familie Yilmaz",
+  }),
+  recipientEmail: templateVariable.text({
+    label: "Empfänger-Adresse",
+    example: "yilmaz.familie@example.org",
+  }),
+  invoiceNumber: templateVariable.text({
+    label: "Rechnungsnummer",
+    required: true,
+    example: "RE-2026-0142",
+  }),
+  invoiceTotal: templateVariable.money({
+    label: "Rechnungsbetrag",
+    required: true,
+    example: { amount: 128450, currency: "EUR" },
+  }),
+  dueDate: templateVariable.date({
+    label: "Fälligkeitsdatum",
+    required: true,
+    example: "2026-10-30",
+  }),
+  invoiceUrl: templateVariable.link({
+    label: "Link zur Rechnung",
+    required: true,
+    example: "https://nordlicht-immobilien.de/rechnungen/RE-2026-0142",
+  }),
+  lines: templateVariable.list(
+    {
+      description: templateVariable.text({ label: "Bezeichnung" }),
+      amount: templateVariable.money({ label: "Betrag" }),
+    },
+    {
+      label: "Rechnungspositionen",
+      required: true,
+      example: [
+        { description: "Kaltmiete Oktober 2026, Lindenstraße 14 WE 3", amount: 98000 },
+        { description: "Betriebskostenvorauszahlung Oktober 2026", amount: 24500 },
+        { description: "Stellplatz 7, Oktober 2026", amount: 5950 },
+      ],
+    },
+  ),
+  paymentReference: templateVariable.text({
+    label: "Zahlungsreferenz",
+    example: "RE-2026-0142 / Yilmaz",
+  }),
+} as const;
+
+const PAYMENT_REMINDER_VARIABLES = {
+  customerName: templateVariable.text({ required: true }),
+  invoiceNumber: templateVariable.text({ required: true }),
+  amount: templateVariable.money({ required: true }),
+  dueDate: templateVariable.date({ required: true }),
+  invoiceUrl: templateVariable.link({ required: true }),
+} as const;
+
+export const billingFeature = defineFeature("billing", (r) => {
+  r.translations({ keys: toKeyFirst(billingTranslations) });
+
+  r.notification("invoice-issued", { variables: INVOICE_ISSUED_VARIABLES });
+  r.notification("invoice-corrected", { variables: INVOICE_ISSUED_VARIABLES });
+  r.notification("payment-reminder", { variables: PAYMENT_REMINDER_VARIABLES });
+});

package/samples/apps/ui-walkthrough/src/features/billing/i18n.ts

@@ -0,0 +1,18 @@
+import type { TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
+
+// The keys follow the document-designer's "used by" lookup:
+// `<feature>:feature.label` and `<feature>:notify.<notification>.label`.
+export const billingTranslations: TranslationsByLocale = {
+  de: {
+    "billing:feature.label": "Rechnungen",
+    "billing:notify.invoice-issued.label": "Rechnung gestellt",
+    "billing:notify.invoice-corrected.label": "Rechnung korrigiert",
+    "billing:notify.payment-reminder.label": "Mahnlauf",
+  },
+  en: {
+    "billing:feature.label": "Invoices",
+    "billing:notify.invoice-issued.label": "Invoice issued",
+    "billing:notify.invoice-corrected.label": "Invoice corrected",
+    "billing:notify.payment-reminder.label": "Dunning run",
+  },
+};

package/samples/apps/ui-walkthrough/src/features/billing/index.ts

@@ -0,0 +1,2 @@
+export { billingFeature } from "./feature";
+export { billingClient } from "./web";

package/samples/apps/ui-walkthrough/src/features/billing/web/index.ts

@@ -0,0 +1,7 @@
+import type { ClientFeatureDefinition } from "@cosmicdrift/kumiko-renderer-web";
+import { billingTranslations } from "../i18n";
+
+export const billingClient: ClientFeatureDefinition = {
+  name: "billing",
+  translations: billingTranslations,
+};