---
title: "v1.4.0"
description: "CMS pages default to static generation with on-demand revalidation, and Payload gains a form builder with an email system and automatic upload optimization."
requested_language: cs
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/cs/changelog/v1.4.0
version: changelog
docs_index: https://docs.systhema.app/cs/llms.txt
---
> This page isn't translated yet. Showing English.
## ⚠️ Breaking & Behavioral Changes
### Minimum Dependency Versions
`@systhemaui/payload` now requires **Next.js 15.4.11** or higher on version 15 (or **16.2.0+** once it exits canary). The minimum **PayloadCMS** version is bumped to **3.79.0** across all `@payloadcms/*` peer dependencies.
### Static Generation & Revalidation Overhaul
CMS pages now default to **static site generation (SSG)** instead of server-side rendering. This is a significant performance improvement but requires changes to your project's route files.
The sitemap route switches from `force-dynamic` to hourly ISR. A new `/sys/revalidate` POST route with Bearer auth enables on-demand revalidation with wildcard support. The home page now also generates proper metadata via `generatePageMetadata`.
The revalidation endpoint requires the `SYSTHEMA_API_SECRET` environment variable to be set — it's used as the Bearer token for authentication.
#### Required project changes
**`src/app/(site)/(systhema)/[...path]/page.tsx`** — Remove `export const dynamic = 'auto'` and add a long `revalidate` value:
```diff
- export const dynamic = 'auto'
export const revalidate = 2629746 // 1 month
```
**`src/app/(site)/(systhema)/page.tsx`** — Add `revalidate`, import `generatePageMetadata`, and export a `generateMetadata` function so the home page gets proper SEO metadata:
```diff
+ import type { Metadata } from 'next'
- import { RootPage } from '@systhemaui/payload/next'
+ import { RootPage, generatePageMetadata } from '@systhemaui/payload/next'
+ export const revalidate = 2629746 // 1 month
export default async function Page({ params }: { params: Promise<{ path: string }> }) {
const payload = await getPayload({ config: configPromise })
return
}
+ export async function generateMetadata(): Promise {
+ return generatePageMetadata({
+ params: Promise.resolve({ path: undefined }),
+ payloadInstance: getPayload({ config: configPromise }),
+ })
+ }
```
**`src/app/(site)/(systhema)/(sitemaps)/pages-sitemap.xml/route.ts`** — Replace `force-dynamic` with hourly ISR:
```diff
- export const dynamic = 'force-dynamic'
export const revalidate = 3600 // Revalidate every hour
```
**`src/app/(site)/(systhema)/sys/[route]/route.ts`** — Add a `POST` handler for the new revalidation API:
```diff
+ export const POST = (
+ request: NextRequest,
+ { params }: { params: Promise<{ route: string }> },
+ ): Promise =>
+ systhemaApiRoutes(request, { params }, getPayload({ config: configPromise }))
```
**`src/app/robots.ts`** — Disallow the `/api/` route:
```diff
- disallow: ['/sys/', '/admin/'],
+ disallow: ['/api/', '/sys/', '/admin/'],
```
## ✨ New Feature Highlights
### Form Builder & Email System
A full-featured form builder powered by `@payloadcms/plugin-form-builder` is now integrated into Systhema. Create forms directly in the admin panel with a drawer-based UX, unique field IDs, customizable labels, and multi-column layouts via ``. New field types include file upload with split-button design, date/datetime with validation presets, and hidden fields with IP/geo template variables. Forms can also be rendered standalone via the new `` component.
Hidden fields support template variables like `{{ip}}`, `{{geo}}`, `{{url}}`, `{{timestamp}}`, URL query parameters via `{{param:utm_source}}`, and browser metadata. These are resolved automatically on form load and included in submissions. Existing form handler integrations may need to account for the new hidden field values.
All outgoing emails are centralized through a single processing pipeline with support for file attachments, Lexical rich text editing, inline CSS styles resolved from design tokens, and humanized wildcard field names. A built-in branded email template handles layout and dark mode out of the box, but can be fully replaced with a custom `react-email` template.
#### Configuration
Forms are enabled by default in `withSysthema()`. To send form notification emails, a PayloadCMS email adapter must be configured in the base Payload config. This example uses `@payloadcms/email-resend`, but any PayloadCMS-compatible email adapter works (e.g. `@payloadcms/email-nodemailer`). If no email adapter is configured, forms still work but email features are automatically disabled.
```ts
// payload.config.ts
import { buildConfig } from 'payload'
import { withSysthema, type SysthemaPayloadPluginOptions } from '@systhemaui/payload'
import { resendAdapter } from '@payloadcms/email-resend'
const userSysthemaConfig: SysthemaPayloadPluginOptions = {
forms: {
enabled: true,
redirectRelationships: ['pages'],
fields: {
text: true, // text input with placeholder and max length
email: true, // email input with validation
number: true, // number input with min/max/step
textarea: true, // multi-line text with placeholder and max length
select: true, // dropdown select
radio: true, // radio button group
checkbox: true, // multi-option checkbox group
date: true, // date or datetime-local input with validation presets
file: true, // file upload with type/size restrictions
message: true, // instructional rich text content (not a form input)
country: false, // country selector (disabled by default)
state: false, // state/province selector (disabled by default)
},
formOverrides: {
// standard PayloadCMS collection overrides
},
formSubmissionOverrides: {
// standard PayloadCMS collection overrides
},
},
}
export default buildConfig(
withSysthema(
{
secret: process.env.PAYLOAD_SECRET || '',
db: yourDatabaseAdapter({ /* ... */ }),
email: resendAdapter({
defaultFromAddress: process.env.SYSTHEMA_EMAIL_FROM ?? 'Company ',
defaultFromName: 'Company',
apiKey: process.env.RESEND_API_KEY || '',
}),
},
userSysthemaConfig,
),
)
```
All fields support a `width` percentage for multi-column layouts via ``. The values shown above are the defaults — you only need to specify fields you want to change.
#### Environment variables
| Variable | Purpose | Example |
| ------------------------------ | ---------------------------------------------- | -------------------------------------- |
| `SYSTHEMA_EMAIL_FROM` | Default "from" address for all emails | `"Company "` |
| `SYSTHEMA_EMAIL_REPLY_TO` | Default reply-to address | `support@example.com` |
| `SYSTHEMA_EMAIL_ADMIN_ADDRESS` | Fallback recipient when form has no addressee | `admin@example.com` |
| `RESEND_API_KEY` | Resend API key (or your provider's equivalent) | `re_xxxxxxxxxxxx` |
| `NEXT_PUBLIC_SERVER_URL` | Server URL for logo/attachment resolution | `https://example.com` |
Email settings can also be managed from the admin panel via the **Emails** global (from name, from address, reply-to, logo). The precedence is: form-level settings > Emails global > environment variables.
#### Custom email template with react-email
The built-in template works out of the box, but you can replace it entirely with a `react-email` template. The `emailTemplate` option receives the pre-processed HTML body (with inline styles already applied) and an options object with `logoUrl` and `serverUrl`.
Create your template components:
```ts
// src/emails/EmailLayout.tsx
import { Html, Head, Body, Container, Img } from '@react-email/components'
import { Tailwind } from '@react-email/tailwind'
import { getEmailTailwindConfig } from '@systhemaui/core'
export function EmailLayout({
children,
logoUrl,
}: {
children: React.ReactNode
logoUrl?: string
}) {
return (
{logoUrl && 
}
{children}
)
}
```
```ts
// src/emails/FormNotificationEmail.tsx
import { EmailLayout } from './EmailLayout'
export function FormNotificationEmail({
content,
logoUrl,
}: {
content: string
logoUrl?: string
serverUrl?: string
}) {
return (
)
}
```
```ts
// src/emails/renderer.ts
import { render } from '@react-email/components'
import { FormNotificationEmail } from './FormNotificationEmail'
export async function renderEmailTemplate(
html: string,
options: { logoUrl?: string; serverUrl?: string },
): Promise {
return render(
FormNotificationEmail({
content: html,
logoUrl: options.logoUrl,
serverUrl: options.serverUrl,
}),
)
}
```
Then wire it up in your payload config:
```ts
// payload.config.ts
import { renderEmailTemplate } from './emails/renderer'
const userSysthemaConfig: SysthemaPayloadPluginOptions = {
emailTemplate: renderEmailTemplate,
}
```
### Upload Optimization
Uploaded images are now automatically optimized before storage. By default, images wider than 2560px are resized, JPEGs are compressed to 60% quality, and opaque PNGs (without actual transparency) are converted to JPEG. A 100MB file size limit is enforced both client-side (with UI feedback) and server-side.
All defaults can be customized via the `uploads` option:
```ts
const userSysthemaConfig: SysthemaPayloadPluginOptions = {
uploads: {
maxFileSize: 52428800, // 50MB
imageOptimization: {
maxWidth: 1920, // resize to max 1920px wide (default: 2560)
jpegQuality: 80, // JPEG quality 1-100 (default: 60)
convertPngToJpeg: false, // keep PNGs as-is (default: true)
pngQuality: 80, // PNG quality 1-100 (default: 60)
},
},
}
```
Set `imageOptimization: false` to disable all processing entirely.
## List of all changes
### 🚀 Features
#### core
- feat(core): add email Tailwind config with typography and color primitives (44bbc16)
#### core,react
- feat(core,react): added width="" attribute to all form field components, so we can correctly render them inside a next to each other, and also added placeholder styles to the select input (3f7ff94)
#### core,react,payload
- feat(core,react,payload): add FileField component with split-button design (1206612)
#### react,next
- feat(react,next): add DateField component and set NumberField inputMode to decimal (baf2457)
#### payload
- !feat(payload): add hidden fields, keyField, and IP/geo template variables to forms (breaking) (ab0f60d)
- feat(payload): add form builder integration with @payloadcms/plugin-form-builder (adc3f35)
- feat(payload): add RenderForm component for standalone form rendering (2ab9017)
- feat(payload): add file upload field to form builder (ff19d81)
- feat(payload): add configurable max file size to form file upload field (998d420)
- feat(payload): add configurable upload optimization and file size validation (7324fad)
- feat(payload): improve form builder admin UX with drawers, icons, and global email settings (689b3f6)
- feat(payload): add date/datetime form field with validation and step presets (07f51e2)
- feat(payload): add branded email template, file attachments, and case-insensitive field resolution (3932159)
- feat(payload): improve form builder UX with clearer labels, unique IDs, and simplified options (367fa68)
- feat(payload): render message field with Lexical richtext, simplify options display, remove date min/max/step (d81f040)
- feat(payload): add programmatic payload type generation script (1c7a459)
- feat(payload): integrate type generation into build and dev scripts (4fd4266)
- feat(payload): add /sys/revalidate route with Bearer auth and wildcard support (d69c0ce)
- feat(payload): hide collections from admin nav based on user roles (7c8a4e1)
- feat(payload): hide globals from admin nav for non-editor users and export hidden helpers (cdb2c13)
- feat(payload): add email lexical editor and inline email styles (998cbc1)
- feat(payload): resolve all typography properties in email inline styles (023e492)
- feat(payload): humanize field names in email wildcard output (b027a93)
#### templates/payload
- feat(templates/payload): add react-email template example with emailTemplate plugin option (9aa4e83)
- feat(payload-template): wire up Systhema email Tailwind config and auto-width logo (885f199)
### ♻️ Refactors
#### payload
- refactor(payload): remove date/datetime min, max, step types until custom implementation (c95089e)
#### general
- refactor: gate email features behind adapter check and refine Emails global (2a4ef81)
### 🐛 Bug fixes
#### core
- fix(core): flatten media-overlay CSS selectors and use pseudo-element for icon mask (a1cf89d)
#### core,payload
- fix(core,payload): append px unit to bare numeric token values in email styles (39af1ea)
#### react
- fix(react): disable Swiper loop when not enough slides for loop mode (c03c716)
- fix(react): stop passing required to individual checkboxes in CheckboxField (a4b7cf4)
#### react,next
- fix(react,next): suppress hydration warnings for config-dependent class names (15fcab1)
- fix(react,next,payload): added missing preload="auto" to \