@navette-js/forms 1.0.0-beta.3 → 1.0.0-beta.5

package/lib/index.js

@@ -1,8 +1,8 @@
 // @navette-js/forms — form fields (Field, TextInput, Select, Checkbox…) and server-side validation.
-import { Attributes, HtmlString, e, evaluate, icon, js, views, configured } from '@navette-js/support';
+import { Attributes, HtmlString, cls, e, evaluate, icon, js, sanitizeHtml, views, configured } from '@navette-js/support';
 import { createHash } from 'node:crypto';
 import { t } from '@navette-js/support/i18n';
-import { Component, Icon as SchemaIcon, Schema, Text, childSchema, renderInlineItems, slug } from '@navette-js/schemas';
+import { Component, Icon as SchemaIcon, Schema, Text, childSchema, renderInlineItems, renderSlot, slug } from '@navette-js/schemas';
 import { Action } from '@navette-js/actions';
 import { loadingIndicator } from '@navette-js/support';
 import { randomUUID } from 'node:crypto';
@@ -12,11 +12,16 @@ import TextAlign from '@tiptap/extension-text-align';
 import Subscript from '@tiptap/extension-subscript';
 import Superscript from '@tiptap/extension-superscript';
 import Highlight from '@tiptap/extension-highlight';
-import Image from '@tiptap/extension-image';
+import { RICH_CONTENT_EXTENSIONS, SizedImage, customRichContentExtensions, registerTextColors, sanitizeCssColor, TextColor, textColorsForJs } from "./rich-content.js";
+export { CustomBlockNode, GridColumnNode, GridNode, LeadNode, MentionNode, MentionProvider, MergeTagNode, registerRichContentExtensions, RichContentCustomBlock, RichContentRenderer, sanitizeCssColor, SizedImage, SmallMark, TextColor, TextColorMark } from "./rich-content.js";
+import { RichEditorTool } from "./rich-editor-tool.js";
+export { RichEditorTool } from "./rich-editor-tool.js";
+import { RICH_EDITOR_TOOL_DEFINITIONS } from "./rich-editor-tools.js";
+export { RICH_EDITOR_TOOL_DEFINITIONS } from "./rich-editor-tools.js";
 import { TableKit } from '@tiptap/extension-table';
 import { fileURLToPath } from 'node:url';
 import nodePath from 'node:path';
-import { copyFileSync, existsSync, mkdirSync, readFileSync, statSync, writeFileSync } from 'node:fs';
+import { constants as fsConstants, closeSync, copyFileSync, existsSync, mkdirSync, openSync, readFileSync, readSync, statSync, writeFileSync } from 'node:fs';
 views.namespace('filament-forms', fileURLToPath(new URL('../views', import.meta.url)));
 let colorManager = null;
 export const useColorManager = (manager) => { colorManager = manager; };
@@ -28,7 +33,7 @@ const phpNumber = (n) => {
     const [mantissa, exponent] = n.toPrecision(14).split('e');
     return `${mantissa.replace(/\.?0+$/, '')}E${exponent}`;
 };
-const blank = (v) => v === null || v === undefined || v === '' || (Array.isArray(v) && v.length === 0);
+import { isBlank as blank, stringRule, parseRegex } from "./rules.js";
 const headline = (s) => s.replace(/[_-]+/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (c) => c.toUpperCase()).replace(/ (.)/g, (_, c) => ' ' + c.toLowerCase());
 export class Field extends Component {
     _label = null;
@@ -41,7 +46,16 @@ export class Field extends Component {
     _dehydrated = null;
     _hiddenLabel = false;
     _helperText = null;
+    _liveMode = null;
+    _validationAttribute = null;
+    _validationMessages = {};
+    _markedAsRequired = null;
     constructor(name) { super(); this._name = name; }
+    /** Sends the state to the server as soon as it changes (`onBlur`: when the field loses focus). `false` turns it off. */
+    live(condition = true) { this._liveMode = condition === false ? null : typeof condition === 'object' && condition.onBlur ? 'blur' : 'live'; return this; }
+    isLive() { return this._liveMode !== null; }
+    /** `wire:model` directive of the field, with its live modifiers. */
+    wireModel() { return `wire:model${this._liveMode ? '.live' : ''}${this._liveMode === 'blur' ? '.blur' : ''}`; }
     hasStatePath() { return true; }
     getName() { return this._name; }
     getId() { return this.getKey(); }
@@ -52,6 +66,9 @@ export class Field extends Component {
     default(value) { this._default = value; return this; }
     /** Helper text shown under the field. */
     helperText(text) { this._helperText = text; return this; }
+    _belowContent = null;
+    /** Text, components or actions under the control (after the helper text). Strings are escaped. */
+    belowContent(content) { this._belowContent = content; return this; }
     /** Helper text id, linked to the control through `aria-describedby`. */
     getHelperTextId() { return this._helperText !== null ? `${this.getId()}-helper-text` : null; }
     /** Keeps the label for screen readers only. */
@@ -110,7 +127,125 @@ export class Field extends Component {
     getDefaultState() { return typeof this._default === 'function' ? this._default() : this._default; }
     /** Shapes a record value as it enters the form (hydration). */
     hydrateState(value) { return value; }
-    rule(rule) { this._rules.push(rule); return this; }
+    /** Adds a rule: an object `{ name, passes, message }`, or a Laravel-style string (`'max:255'`, `'regex:/^[a-z]+$/'`). */
+    rule(rule, condition = true) {
+        if (typeof rule === 'string') {
+            const spec = rule;
+            // Built now, so that an unknown or malformed rule fails when the form is declared.
+            const probe = stringRule(spec, { numeric: false, name: this._name ?? '' });
+            if (!probe)
+                return this;
+            const build = () => stringRule(spec, { numeric: this.hasNumericValidation(), name: this._name ?? '' });
+            rule = { name: probe.name, implicit: probe.implicit, passes: (value, ctx) => build().passes(value, ctx), message: (attribute) => build().message(attribute) };
+        }
+        if (condition === false)
+            return this;
+        if (condition === true) {
+            this._rules.push(rule);
+            return this;
+        }
+        const inner = rule;
+        this._rules.push({ ...inner, passes: async (value, ctx) => !(await condition(ctx)) || inner.passes(value, ctx) });
+        return this;
+    }
+    /** Several rules at once: `rules(['required', 'max:255'])` or `rules('required|max:255')`. */
+    rules(rules, condition = true) {
+        for (const rule of typeof rules === 'string' ? rules.split('|').filter((item) => item.trim() !== '') : rules)
+            this.rule(rule, condition);
+        return this;
+    }
+    /** Value checked by the rules (a subclass may trim it, for instance). */
+    stateForValidation(state) { return state; }
+    /** Sizes (`min`, `max`, `size`, `between`) compare the number, not the text length. */
+    hasNumericValidation() { return false; }
+    /** Name of the field in validation messages (the lowercased label by default). */
+    validationAttribute(name) { this._validationAttribute = name; return this; }
+    /** Custom messages by rule name (`{ required: 'Tell us your name.', max: 'Too long.' }`); `:attribute` is replaced by the field name. */
+    validationMessages(messages) { this._validationMessages = { ...this._validationMessages, ...messages }; return this; }
+    _loadStateFromRelationships = null;
+    _saveRelationships = null;
+    /** Fills the field from the record's relationships (after the record's own values): `(record, ctx) => state`. */
+    loadStateFromRelationshipsUsing(callback) { this._loadStateFromRelationships = callback; return this; }
+    /** Saves the field into the record's relationships, once the record is created or updated. Such a field is not in the saved data. */
+    saveRelationshipsUsing(callback) { this._saveRelationships = callback; return this; }
+    /** Whether the field saves itself through `saveRelationshipsUsing()` (and is then left out of the saved data). */
+    async savesRelationships() { return this._saveRelationships !== null; }
+    async loadStateFromRelationships(record) { return this._loadStateFromRelationships ? { state: await this._loadStateFromRelationships(record, this.context()) } : null; }
+    async saveRelationships(record) { if (this._saveRelationships)
+        await this._saveRelationships({ record, state: await this.dehydrateState(this.context().state), ctx: this.context() }); }
+    /** Shows (or hides, with `false`) the required asterisk, regardless of `required()`. */
+    markAsRequired(condition = true) { this._markedAsRequired = condition; return this; }
+    async isMarkedAsRequired() { return this._markedAsRequired ?? (await this.isRequired()); }
+    stringRuleWith(name, parameters = []) { return this.rule(parameters.length ? `${name}:${parameters.map(String).join(',')}` : name); }
+    /** The value must match the pattern (a RegExp, or a `/pattern/flags` string). */
+    regex(pattern) { const re = typeof pattern === 'string' ? parseRegex(pattern) : pattern; return this.rule({ name: 'regex', passes: (v) => { re.lastIndex = 0; return re.test(String(v)); }, message: (a) => `The ${a} field format is invalid.` }); }
+    notRegex(pattern) { const re = typeof pattern === 'string' ? parseRegex(pattern) : pattern; return this.rule({ name: 'not_regex', passes: (v) => { re.lastIndex = 0; return !re.test(String(v)); }, message: (a) => `The ${a} field format is invalid.` }); }
+    alpha() { return this.stringRuleWith('alpha'); }
+    alphaDash() { return this.stringRuleWith('alpha_dash'); }
+    alphaNum() { return this.stringRuleWith('alpha_num'); }
+    ascii() { return this.stringRuleWith('ascii'); }
+    uuid() { return this.stringRuleWith('uuid'); }
+    ulid() { return this.stringRuleWith('ulid'); }
+    json() { return this.stringRuleWith('json'); }
+    ip() { return this.stringRuleWith('ip'); }
+    ipv4() { return this.stringRuleWith('ipv4'); }
+    ipv6() { return this.stringRuleWith('ipv6'); }
+    macAddress() { return this.stringRuleWith('mac_address'); }
+    hexColor() { return this.stringRuleWith('hex_color'); }
+    multipleOf(value) { return this.stringRuleWith('multiple_of', [value]); }
+    /** The value must be one of these (a list, or the values of an enum-like object). */
+    in(values) { const allowed = (Array.isArray(values) ? values : Object.values(values)).map(String); return this.rule({ name: 'in', passes: (v) => (Array.isArray(v) ? v : [v]).every((item) => allowed.includes(String(item))), message: (a) => `The selected ${a} is invalid.` }); }
+    notIn(values) { const denied = values.map(String); return this.rule({ name: 'not_in', passes: (v) => (Array.isArray(v) ? v : [v]).every((item) => !denied.includes(String(item))), message: (a) => `The selected ${a} is invalid.` }); }
+    /** `in()` with the values of an enum-like object. */
+    enum(values) { return this.in(values); }
+    startsWith(prefixes) { return this.stringRuleWith('starts_with', [prefixes].flat()); }
+    endsWith(suffixes) { return this.stringRuleWith('ends_with', [suffixes].flat()); }
+    doesntStartWith(prefixes) { return this.stringRuleWith('doesnt_start_with', [prefixes].flat()); }
+    doesntEndWith(suffixes) { return this.stringRuleWith('doesnt_end_with', [suffixes].flat()); }
+    /** The field must equal `<name>_confirmation` (or the given field) of the same form. */
+    confirmed(field = null) { return this.rule(field ? `confirmed:${field}` : 'confirmed'); }
+    same(field) { return this.stringRuleWith('same', [field]); }
+    different(field) { return this.stringRuleWith('different', [field]); }
+    /** Compares with a number or another field of the same form. */
+    gt(fieldOrValue) { return this.stringRuleWith('gt', [fieldOrValue]); }
+    gte(fieldOrValue) { return this.stringRuleWith('gte', [fieldOrValue]); }
+    lt(fieldOrValue) { return this.stringRuleWith('lt', [fieldOrValue]); }
+    lte(fieldOrValue) { return this.stringRuleWith('lte', [fieldOrValue]); }
+    /** No duplicates in a list value (tags, multiple select, checkbox list). */
+    distinct() { return this.stringRuleWith('distinct'); }
+    /** Required when another field of the form has one of these values (`requiredIf('type', 'company')`). */
+    requiredIf(field, values) { return this.stringRuleWith('required_if', [field, ...[values].flat()]); }
+    requiredUnless(field, values) { return this.stringRuleWith('required_unless', [field, ...[values].flat()]); }
+    requiredIfAccepted(field) { return this.stringRuleWith('required_if_accepted', [field]); }
+    requiredWith(fields) { return this.stringRuleWith('required_with', [fields].flat()); }
+    requiredWithAll(fields) { return this.stringRuleWith('required_with_all', [fields].flat()); }
+    requiredWithout(fields) { return this.stringRuleWith('required_without', [fields].flat()); }
+    requiredWithoutAll(fields) { return this.stringRuleWith('required_without_all', [fields].flat()); }
+    prohibited(condition = true) { return condition ? this.stringRuleWith('prohibited') : this; }
+    prohibitedIf(field, values) { return this.stringRuleWith('prohibited_if', [field, ...[values].flat()]); }
+    prohibitedUnless(field, values) { return this.stringRuleWith('prohibited_unless', [field, ...[values].flat()]); }
+    prohibits(fields) { return this.stringRuleWith('prohibits', [fields].flat()); }
+    /**
+     * The value must exist: in a column of the host's data adapter (`exists()`, `exists({ column })`), in another adapter
+     * (`exists({ adapter: new ObjectionAdapter(Brand), column: 'id' })`), or according to a function.
+     */
+    exists(check = {}) {
+        return this.rule({
+            name: 'exists',
+            passes: async (value, ctx) => {
+                if (typeof check === 'function')
+                    return check(value, ctx);
+                const adapter = check.adapter ?? ctx.livewire.getDataAdapter?.();
+                if (!adapter)
+                    throw new Error('exists(): no data adapter (pass one with { adapter }).');
+                for (const item of Array.isArray(value) ? value : [value])
+                    if (!(await adapter.exists(check.column ?? this._name, item, null)))
+                        return false;
+                return true;
+            },
+            message: (a) => `The selected ${a} is invalid.`,
+        });
+    }
     /** `unique` rule: the value must not exist in the column of the same name; `ignoreRecord` excludes the record being edited. */
     unique(options = {}) {
         return this.rule({
@@ -144,13 +279,16 @@ export class Field extends Component {
         if ((await this.isDisabled()) && this._dehydrated !== true)
             return [];
         // An empty string is treated as missing.
-        const value = this.context().state === '' ? null : this.context().state;
-        const attribute = (await this.getLabel()).toLowerCase();
+        const raw = this.stateForValidation(this.context().state);
+        const value = raw === '' ? null : raw;
+        const attribute = this._validationAttribute ?? (await this.getLabel()).toLowerCase();
         for (const rule of await this.getValidationRules()) {
-            if (rule.name !== 'required' && blank(value))
+            if (rule.name !== 'required' && !rule.implicit && blank(value))
                 continue;
-            if (!(await rule.passes(value, this.context())))
-                return [rule.message(attribute)];
+            if (!(await rule.passes(value, this.context()))) {
+                const custom = this._validationMessages[rule.name];
+                return [custom === undefined ? rule.message(attribute) : typeof custom === 'function' ? custom(attribute) : custom.replace(/:attribute/g, attribute)];
+            }
         }
         return [];
     }
@@ -169,8 +307,10 @@ export class Field extends Component {
         // Helper text: a small inline schema under the control.
         if (this._helperText !== null)
             html += `<div id="${e(this.getHelperTextId())}" class="fi-sc fi-inline fi-sc-has-gap fi-sc-dense"><div x-data="filamentSchemaComponent(${e(js({ key: null, exposedMethods: [], path: this.getStatePath(), containerPath: this.container.getStatePath() }))})"><div class="fi-sc-component"><span class="fi-sc-text">${e(this._helperText)}</span></div></div></div>`;
+        if (this._belowContent !== null)
+            html += await renderSlot(this, this._belowContent, this.getKey());
         return views.render('filament-forms::components.field-wrapper', {
-            id: this.getId(), label: await this.getLabel(), required: (await this.isRequired()) && !(await this.isDisabled()),
+            id: this.getId(), label: await this.getLabel(), required: (await this.isMarkedAsRequired()) && !(await this.isDisabled()),
             labelPrefix: options.labelPrefix ?? '', hiddenLabel: this._hiddenLabel, after: options.after ?? '', afterLabel: this._hiddenLabel ? '' : await this.renderAfterLabel(), labelAsDiv: options.labelAsDiv === true, focusable: options.focusable === true, html, errorMessage: errors[0] ?? null, wrapperClass: options.wrapperClass ?? null,
         });
     }
@@ -189,6 +329,7 @@ export class TextInput extends Field {
     _prefix = null;
     _live = null;
     static make(name) { return configured(new TextInput(name)); }
+    hasNumericValidation() { return this._numeric !== null; }
     /** Decimal number: `type="number"`, `step="any"`. */
     numeric() { this._numeric = 'decimal'; return this.rule({ name: 'numeric', passes: (v) => String(v).trim() !== '' && Number.isFinite(Number(v)), message: (a) => `The ${a} field must be a number.` }); }
     /** Integer: `type="number"`, `step="1"`. */
@@ -198,21 +339,60 @@ export class TextInput extends Field {
     step(step) { this._step = step; return this; }
     minValue(value) { this._minValue = value; return this.rule({ name: 'min', passes: (v) => Number(v) >= value, message: (a) => `The ${a} field must be at least ${value}.` }); }
     maxValue(value) { this._maxValue = value; return this.rule({ name: 'max', passes: (v) => Number(v) <= value, message: (a) => `The ${a} field must not be greater than ${value}.` }); }
-    /** Label shown before the input (e.g. `$`). */
-    prefix(label) { this._prefix = label; return this; }
+    /** Label shown before the input (e.g. `$`); `isInline`: inside the input instead of a separate box. */
+    prefix(label, isInline = false) { this._prefix = label; this._prefixInline = isInline; return this; }
     _suffix = null;
     /** Label shown after the input ("hours", "kg"…). */
-    suffix(label) { this._suffix = label; return this; }
+    suffix(label, isInline = false) { this._suffix = label; this._suffixInline = isInline; return this; }
+    _prefixInline = false;
+    _suffixInline = false;
+    _prefixIcon = null;
+    _suffixIcon = null;
+    _prefixIconColor = null;
+    _suffixIconColor = null;
+    _prefixActions = [];
+    _suffixActions = [];
+    prefixIcon(icon, isInline = false) { this._prefixIcon = icon; this._prefixInline = isInline; return this; }
+    suffixIcon(icon, isInline = false) { this._suffixIcon = icon; this._suffixInline = isInline; return this; }
+    prefixIconColor(color) { this._prefixIconColor = color; return this; }
+    suffixIconColor(color) { this._suffixIconColor = color; return this; }
+    /**
+     * Icon button before the input, running an action. The action gets the field's `state`, and `set(name, value)` to change a
+     * field of the same form.
+     */
+    prefixAction(action, isInline = false) { this._prefixActions = [...this._prefixActions, action]; this._prefixInline = isInline; return this; }
+    prefixActions(actions) { this._prefixActions = actions; return this; }
+    suffixAction(action, isInline = false) { this._suffixActions = [...this._suffixActions, action]; this._suffixInline = isInline; return this; }
+    suffixActions(actions) { this._suffixActions = actions; return this; }
+    /** Affix actions, mounted through the schema component. */
+    getActions() { return [...this.getHintActions(), ...this._prefixActions, ...this._suffixActions]; }
+    /** Exact length: `minlength` and `maxlength`, and the matching rule. */
+    length(length) { this.minLength(length); this.maxLength(length); return this; }
+    _datalist = [];
+    /** Suggestions offered by the browser while typing (`<datalist>`). */
+    datalist(options) { this._datalist = options.map(String); return this; }
+    _readOnly = false;
+    /** The value is shown and sent, but cannot be changed (`readonly`). */
+    readOnly(condition = true) { this._readOnly = condition; return this; }
+    _copyable = null;
+    /** A button after the input copies its value (the browser only allows it on HTTPS or `localhost`). */
+    copyable(condition = true, copyMessage = null, copyMessageDuration = 2000) { this._copyable = condition ? { message: copyMessage, duration: copyMessageDuration } : null; return this; }
+    _trim = false;
+    /** Removes the spaces around the value before it is validated and saved. */
+    trim(condition = true) { this._trim = condition; return this; }
+    hydrateState(value) { return this._trim && typeof value === 'string' ? value.trim() : value; }
+    /** `trim()`: the submitted value is trimmed before it is validated and saved. */
+    stateForValidation(state) { return this._trim && typeof state === 'string' ? state.trim() : state; }
+    dehydrateState(state) { return this._trim && typeof state === 'string' ? state.trim() : state; }
+    _inputMode = null;
+    _autocapitalize = null;
+    /** Virtual keyboard: `none`, `text`, `decimal`, `numeric`, `tel`, `search`, `email` or `url`. */
+    inputMode(mode) { this._inputMode = mode; return this; }
+    /** `none`, `sentences`, `words` or `characters` (`true` / `false` for `on` / `off`). */
+    autocapitalize(mode = true) { this._autocapitalize = mode === true ? 'on' : mode === false ? 'off' : mode; return this; }
     /** Sends the state to the server on every keystroke, or on blur with `onBlur`. */
     live(options = {}) { this._live = options.onBlur ? 'blur' : 'live'; return this; }
     type(type) { this._type = type; return this; }
-    email(condition = true) {
-        if (condition) {
-            this._type = 'email';
-            this.rule({ name: 'email', passes: (v) => /^[^\s@]+@[^\s@]+$/.test(String(v)), message: (a) => `The ${a} field must be a valid email address.` });
-        }
-        return this;
-    }
     password(condition = true) { this._isPassword = condition; return this; }
     revealable(condition = true) { this._isRevealable = condition; return this; }
     /** `true` → "on", `false` → "off", a string as is. */
@@ -223,7 +403,16 @@ export class TextInput extends Field {
     mask(pattern) { this._mask = pattern; return this; }
     /** Phone number: digits, spaces and common punctuation. */
     tel() { this._type = 'tel'; return this.rule({ name: 'tel', passes: (v) => /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\.\/0-9]*$/.test(String(v)), message: (a) => `The ${a} field format is invalid.` }); }
-    email() { this._type = 'email'; return this.rule({ name: 'email', passes: (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(v)), message: (a) => `The ${a} field must be a valid email address.` }); }
+    email(condition = true) {
+        if (!condition) {
+            if (this._type === 'email')
+                this._type = null;
+            this._rules = this._rules.filter((rule) => rule.name !== 'email');
+            return this;
+        }
+        this._type = 'email';
+        return this.rule({ name: 'email', passes: (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(v)), message: (a) => `The ${a} field must be a valid email address.` });
+    }
     /** Web address: `url` input type, a valid http(s) value is required. */
     url() { this._type = 'url'; return this.rule({ name: 'url', passes: (v) => { try {
             return ['http:', 'https:'].includes(new URL(String(v)).protocol);
@@ -236,6 +425,18 @@ export class TextInput extends Field {
     async toHtml() {
         const isDisabled = await this.isDisabled();
         const revealable = this._isPassword && this._isRevealable;
+        // Affixes: label, icon and actions (only visible actions, mounted through this component).
+        const ctx = this.context();
+        const key = this.getKey();
+        const visibleActions = async (actions) => { const html = []; for (const action of actions)
+            if (await action.isVisible(ctx))
+                html.push(await action.iconButton().size('sm').toHtml(ctx, { schemaComponent: key })); return html; };
+        const prefixActions = await visibleActions(this._prefixActions);
+        const copyLabel = t('filament-forms::components.text_input.actions.copy.label');
+        const copyMessage = this._copyable?.message ?? t('filament-forms::components.text_input.actions.copy.message');
+        const suffixActions = [...(await visibleActions(this._suffixActions)), ...(this._copyable ? [`<button title="${e(copyLabel)}" aria-label="${e(copyLabel)}" type="button" class="fi-ac-icon-btn-action fi-icon-btn fi-size-sm" x-on:click="${e(`window.navigator.clipboard.writeText($el.closest('.fi-input-wrp').querySelector('input').value)\n$tooltip(${js(copyMessage)}, { theme: $store.theme, timeout: ${this._copyable.duration} })`)}">${icon('m-clipboard-document-list')}</button>`] : [])];
+        const hasPrefix = this._prefix !== null || this._prefixIcon !== null || prefixActions.length > 0;
+        const hasSuffix = this._suffix !== null || this._suffixIcon !== null || suffixActions.length > 0;
         const type = revealable ? 'password' : this._mask !== null ? 'text' : (this._type ?? (this._isPassword ? 'password' : this._numeric ? 'number' : 'text'));
         const model = `wire:model${this._live ? '.live' : ''}${this._live === 'blur' ? '.blur' : ''}`;
         const input = new Attributes()
@@ -243,16 +444,19 @@ export class TextInput extends Field {
             'aria-invalid': this.hasError() ? 'true' : null,
             'aria-describedby': this.getHelperTextId(),
             autocomplete: this._autocomplete, autofocus: this._autofocus, disabled: isDisabled, id: this.getId(),
-            inputmode: this._numeric === 'decimal' ? 'decimal' : this._numeric === 'integer' ? 'numeric' : null,
+            autocapitalize: this._autocapitalize,
+            inputmode: this._inputMode ?? (this._numeric === 'decimal' ? 'decimal' : this._numeric === 'integer' ? 'numeric' : null),
+            list: this._datalist.length && !isDisabled && !this._readOnly ? `${this.getId()}-list` : null,
+            readonly: this._readOnly,
             max: phpNumber(this._maxValue), min: phpNumber(this._minValue),
             maxlength: this._maxLength, minlength: this._minLength, placeholder: this._placeholder,
-            required: (await this.isRequired()) && !isDisabled, step: this._step ?? (this._numeric === 'decimal' ? 'any' : this._numeric === 'integer' ? 1 : null), type,
+            required: (await this.isRequired()) && !isDisabled && !this._readOnly, step: this._step ?? (this._numeric === 'decimal' ? 'any' : this._numeric === 'integer' ? 1 : null), type,
             // Modifiers (`.live`, `.blur`) also apply to `wire:model.fill`.
             [revealable ? model.replace('wire:model', 'wire:model.fill') : model]: this.getStatePath(),
             'x-bind:type': revealable ? "isPasswordRevealed ? 'text' : 'password'" : null,
             'x-mask': this._mask,
         })
-            .class(['fi-input', { 'fi-revealable': revealable }]);
+            .class(['fi-input', { 'fi-input-has-inline-prefix': this._prefixInline && hasPrefix, 'fi-input-has-inline-suffix': this._suffixInline && hasSuffix, 'fi-revealable': revealable }]);
         const wrapper = new Attributes()
             .merge({
             'x-data': revealable ? 'passwordRevealFormComponent()' : this._mask !== null ? '{}' : null,
@@ -263,49 +467,58 @@ export class TextInput extends Field {
             .class(['fi-fo-text-input', 'fi-input-wrp', { 'fi-disabled': isDisabled, 'fi-invalid': this.hasError() }]);
         return this.wrap(views.render('filament-forms::components.text-input', {
             input: input.toHtml(), wrapper: wrapper.toHtml(), revealable, prefix: this._prefix, suffix: this._suffix,
+            prefixIcon: this._prefixIcon ? icon(this._prefixIcon, { attributes: new Attributes().class(this._prefixIconColor && this._prefixIconColor !== 'gray' ? ['fi-color', `fi-color-${this._prefixIconColor}`] : []) }) : '',
+            suffixIcon: this._suffixIcon ? icon(this._suffixIcon, { attributes: new Attributes().class(this._suffixIconColor && this._suffixIconColor !== 'gray' ? ['fi-color', `fi-color-${this._suffixIconColor}`] : []) }) : '',
+            prefixActions, suffixActions, hasPrefix, hasSuffix, prefixInline: this._prefixInline, suffixInline: this._suffixInline,
+            datalist: this._datalist.length && !isDisabled && !this._readOnly ? { id: `${this.getId()}-list`, options: this._datalist } : null,
             showLabel: t('filament-forms::components.text_input.actions.show_password.label'),
             hideLabel: t('filament-forms::components.text_input.actions.hide_password.label'),
         }));
     }
 }
-/** Native date picker (`<input type="date">`). */
-export class DatePicker extends Field {
-    _maxDate = null;
-    _minDate = null;
-    _live = false;
-    static make(name) { return configured(new DatePicker(name)); }
-    _datePlaceholder = null;
-    /** Placeholder attribute (browsers do not display it on a native `date` input). */
-    placeholder(text) { this._datePlaceholder = text; return this; }
-    /** Sends the state to the server as soon as it changes (`wire:model.live`). */
-    live(condition = true) { this._live = condition; return this; }
-    /** The state is a `YYYY-MM-DD` date, whatever the stored precision. */
-    hydrateState(value) { return typeof value === 'string' && value.length > 10 ? value.slice(0, 10) : value; }
-    static resolve(date) { return date === 'today' ? new Date().toISOString().slice(0, 10) : date; }
-    async bound(date) { const value = await evaluate(date, this.context()); return value ? DatePicker.resolve(value) : null; }
-    /** Latest accepted date: `'today'`, a `YYYY-MM-DD` date, or a context function (`({ get }) => get('endDate') || 'today'`). */
-    maxDate(date) {
-        this._maxDate = date;
-        return this.rule({ name: 'before_or_equal', passes: async (v) => { const max = await this.bound(date); return max === null || String(v).slice(0, 10) <= max; }, message: (a) => `The ${a} field must be a date before or equal to ${typeof date === 'string' ? date : 'the maximum date'}.` });
-    }
-    minDate(date) {
-        this._minDate = date;
-        return this.rule({ name: 'after_or_equal', passes: async (v) => { const min = await this.bound(date); return min === null || String(v).slice(0, 10) >= min; }, message: (a) => `The ${a} field must be a date after or equal to ${typeof date === 'string' ? date : 'the minimum date'}.` });
-    }
-    async toHtml() {
-        const isDisabled = await this.isDisabled();
-        const input = new Attributes()
-            .merge({
-            'aria-invalid': this.hasError() ? 'true' : null, disabled: isDisabled, id: this.getId(),
-            max: await this.bound(this._maxDate), min: await this.bound(this._minDate), placeholder: this._datePlaceholder,
-            required: (await this.isRequired()) && !isDisabled, type: 'date', [this._live ? 'wire:model.live' : 'wire:model']: this.getStatePath(),
-        })
-            .class(['fi-input']);
-        const wrapper = new Attributes()
-            .merge({ 'x-on:focus-input.stop': "$el.querySelector('input:not([type=hidden])')?.focus()" })
-            .class(['fi-fo-date-time-picker', 'fi-input-wrp', { 'fi-disabled': isDisabled, 'fi-invalid': this.hasError() }]);
-        return this.wrap(`<div ${wrapper.toHtml()}><div class="fi-input-wrp-content-ctn"><input ${input.toHtml()} /></div></div>`);
-    }
+const flattenOptions = (groups) => groups.flatMap((item) => (Array.isArray(item) ? [item] : item.options));
+function normalizeOptions(options) {
+    const entries = Array.isArray(options) ? options : Object.entries(options);
+    return entries.map(([key, value]) => {
+        if (value !== null && typeof value === 'object')
+            return { label: String(key), options: (Array.isArray(value) ? value : Object.entries(value)).map(([v, l]) => [String(v), String(l)]) };
+        return [String(key), String(value)];
+    });
+}
+/** Objection model of the form (the host's data adapter), for relationships. */
+function modelOfForm(ctx, explicit) {
+    if (explicit)
+        return explicit;
+    const host = ctx.livewire;
+    const adapter = host.getDataAdapter?.() ?? host.getDataAdapterForTable?.() ?? host.resource?.adapter ?? null;
+    const model = adapter?.model;
+    if (typeof model !== 'function' || typeof model.getRelation !== 'function')
+        throw new Error('relationship(): the form has no Objection model; pass it with relationship(name, title, modify, { model }).');
+    return model;
+}
+/**
+ * Copy of a component and of the components it holds (layout children, item schemas), so that each repeated item gets its own
+ * instances: components keep a reference to their container.
+ */
+export function cloneComponentTree(component) {
+    const copy = Object.assign(Object.create(Object.getPrototypeOf(component)), component);
+    for (const [property, value] of Object.entries(copy)) {
+        if (value instanceof Component)
+            copy[property] = cloneComponentTree(value);
+        else if (Array.isArray(value) && value.length && value.every((item) => item instanceof Component))
+            copy[property] = value.map((item) => cloneComponentTree(item));
+    }
+    return copy;
+}
+/** Prefix or suffix of an input wrapper: actions, icon and label (escaped). */
+function inputAffixHtml(side, options) {
+    if (options.label === null && !options.icon && !options.actions.length)
+        return '';
+    const label = options.label !== null ? `<span class="fi-input-wrp-label">${e(options.label)}</span>` : '';
+    const actions = options.actions.length ? `<div class="fi-input-wrp-actions">${options.actions.join('')}</div>` : '';
+    const focus = options.label !== null || options.icon ? ` x-on:click="if (! $event.target.closest('.fi-input-wrp-actions')) $dispatch('focus-input')"` : '';
+    const classes = cls([`fi-input-wrp-${side}`, side === 'prefix' ? 'fi-input-wrp-prefix-has-content' : null, { 'fi-inline': options.inline, [`fi-input-wrp-${side}-has-label`]: options.label !== null }]);
+    return `<div${focus} class="${classes}">${side === 'prefix' ? actions + options.icon + label : label + options.icon + actions}</div>`;
 }
 /**
  * Dropdown. Native (`<select>`) by default; `searchable()` switches to the JavaScript select,
@@ -315,6 +528,15 @@ export class Select extends Field {
     _options = [];
     _placeholder = null;
     _searchable = false;
+    _native = true;
+    _allowHtml = false;
+    _maxItems = null;
+    _minItems = null;
+    _optionsLimit = 50;
+    _searchDebounce = 1000;
+    _messages = {};
+    _relationship = null;
+    _affixes = { prefix: null, suffix: null, prefixIcon: null, suffixIcon: null, prefixIconColor: null, suffixIconColor: null, prefixActions: [], suffixActions: [], prefixInline: false, suffixInline: false };
     _dynamic = null;
     _searchOnServer = null;
     _live = false;
@@ -335,6 +557,97 @@ export class Select extends Field {
      * `searchOnServer: false`: search runs in the browser, among the options already sent (for a complete list).
      */
     options(options, config = {}) { this._options = options; this._dynamic = config.dynamic ?? null; this._searchOnServer = config.searchOnServer ?? null; return this; }
+    /** "Yes" / "No" options, saved as `1` / `0`. */
+    boolean(trueLabel = null, falseLabel = null, placeholder = null) {
+        this._options = [['1', trueLabel ?? t('filament-forms::components.select.boolean.true')], ['0', falseLabel ?? t('filament-forms::components.select.boolean.false')]];
+        if (placeholder !== null)
+            this._placeholder = placeholder;
+        return this;
+    }
+    /** `false`: the JavaScript select, even without search. */
+    native(condition = true) { this._native = condition; return this; }
+    /** Option labels are HTML (sanitized on the server; JavaScript select only). */
+    allowHtml(condition = true) { this._allowHtml = condition; return this; }
+    /** Maximum (and minimum) number of selected items of a multiple select, checked on the server. */
+    maxItems(count) { this._maxItems = count; return this; }
+    minItems(count) { this._minItems = count; return this; }
+    /** Number of options shown at once in the JavaScript select (50 by default). */
+    optionsLimit(limit) { this._optionsLimit = Math.max(1, Math.floor(limit)); return this; }
+    searchDebounce(ms) { this._searchDebounce = Math.max(0, Math.floor(ms)); return this; }
+    loadingMessage(message) { this._messages.loading = message; return this; }
+    noSearchResultsMessage(message) { this._messages.noSearchResults = message; return this; }
+    searchPrompt(message) { this._messages.searchPrompt = message; return this; }
+    searchingMessage(message) { this._messages.searching = message; return this; }
+    noOptionsMessage(message) { this._messages.noOptions = message; return this; }
+    prefix(label, isInline = false) { this._affixes.prefix = label; this._affixes.prefixInline = isInline; return this; }
+    suffix(label, isInline = false) { this._affixes.suffix = label; this._affixes.suffixInline = isInline; return this; }
+    prefixIcon(name, isInline = false) { this._affixes.prefixIcon = name; this._affixes.prefixInline = isInline; return this; }
+    suffixIcon(name, isInline = false) { this._affixes.suffixIcon = name; this._affixes.suffixInline = isInline; return this; }
+    prefixIconColor(color) { this._affixes.prefixIconColor = color; return this; }
+    suffixIconColor(color) { this._affixes.suffixIconColor = color; return this; }
+    prefixAction(action, isInline = false) { this._affixes.prefixActions = [...this._affixes.prefixActions, action]; this._affixes.prefixInline = isInline; return this; }
+    suffixAction(action, isInline = false) { this._affixes.suffixActions = [...this._affixes.suffixActions, action]; this._affixes.suffixInline = isInline; return this; }
+    prefixActions(actions) { this._affixes.prefixActions = actions; return this; }
+    suffixActions(actions) { this._affixes.suffixActions = actions; return this; }
+    /**
+     * Options from a relationship of the form's model (Objection `relationMappings`): a belongs-to relationship (the field is the
+     * foreign key, `Select.make('author_id').relationship('author', 'name')`), or a many-to-many one with `multiple()` (the field is
+     * named after the relationship, and saves the links once the record is saved). `modifyQueryUsing(query, search)` scopes the
+     * options; picked keys outside that scope are rejected. With `searchable()`, the options are searched on the server.
+     */
+    relationship(name, titleAttribute = null, modifyQueryUsing = null, options = {}) {
+        this._relationship = { name, title: titleAttribute, modify: modifyQueryUsing, model: options.model ?? null };
+        return this;
+    }
+    relationInfo() {
+        const ctx = this.context();
+        const model = modelOfForm(ctx, this._relationship.model);
+        const relation = model.getRelation(this._relationship.name);
+        const related = relation.relatedModelClass;
+        const id = `${related.tableName}.${related.idColumn}`;
+        const title = `${related.tableName}.${this._relationship.title ?? related.idColumn}`;
+        const isMany = /ManyToMany/.test(relation.constructor?.name ?? '') || typeof relation.joinTable === 'string';
+        return { model, relation, related, id, title, isMany };
+    }
+    async relationshipOptions(search, keys, limit = 1000) {
+        const { related, id, title } = this.relationInfo();
+        const query = related.query();
+        this._relationship.modify?.(query, search ?? undefined);
+        if (keys !== null) {
+            if (!keys.length)
+                return [];
+            query.whereIn(id, keys.slice(0, 1000));
+        }
+        if (search)
+            query.where(title, 'like', `%${search.slice(0, 255)}%`);
+        const rows = await query.clearSelect().select({ __key: id, __title: title }).orderBy(title).limit(limit);
+        return rows.map((row) => [String(row.__key), String(row.__title ?? row.__key)]);
+    }
+    isManyRelationship() { return this._relationship !== null && this.relationInfo().isMany; }
+    async savesRelationships() { return (await super.savesRelationships()) || this.isManyRelationship(); }
+    async loadStateFromRelationships(record) {
+        if (!this.isManyRelationship())
+            return super.loadStateFromRelationships(record);
+        const { model, related } = this.relationInfo();
+        const rows = await model.relatedQuery(this._relationship.name).for(record[model.idColumn]).clearSelect().select(`${related.tableName}.${related.idColumn} as __key`);
+        return { state: rows.map((row) => String(row.__key)) };
+    }
+    /** Many-to-many: links the picked records and unlinks the others (only keys allowed by the relationship's query). */
+    async saveRelationships(record) {
+        if (!this.isManyRelationship())
+            return super.saveRelationships(record);
+        const { model, related } = this.relationInfo();
+        const key = record[model.idColumn];
+        const desired = new Set((await this.relationshipOptions(null, this.selectedValues())).map(([value]) => value));
+        const current = (await this.loadStateFromRelationships(record)).state;
+        const removed = current.filter((value) => !desired.has(value));
+        if (removed.length)
+            await model.relatedQuery(this._relationship.name).for(key).unrelate().whereIn(`${related.tableName}.${related.idColumn}`, removed);
+        for (const value of desired)
+            if (!current.includes(value))
+                await model.relatedQuery(this._relationship.name).for(key).relate(related.idColumn === 'id' && /^\d+$/.test(value) ? Number(value) : value);
+        await super.saveRelationships(record);
+    }
     /** Disables an option depending on the context (e.g. already picked in another row). */
     disableOptionWhen(condition) { this._disableOptionWhen = condition; return this; }
     /** Sends the state to the server as soon as it changes. */
@@ -356,33 +669,52 @@ export class Select extends Field {
     async labelsOf(values) {
         if (!values.length)
             return [];
-        const known = this._optionLabelsUsing ? await this._optionLabelsUsing(values, this.context()) : await this.resolveOptions();
+        const known = this._relationship ? await this.relationshipOptions(null, values) : this._optionLabelsUsing ? await this._optionLabelsUsing(values, this.context()) : await this.resolveOptions();
         const map = new Map((Array.isArray(known) ? known : Object.entries(known)).map(([value, label]) => [String(value), String(label)]));
         return values.filter((value) => map.has(value)).map((value) => [value, map.get(value)]);
     }
-    /** No-op: options are always loaded with the form. */
-    preload() { return this; }
+    _preload = false;
+    /** Relationship with `searchable()`: loads the options with the form, instead of on search only. Other options are always loaded. */
+    preload(condition = true) { this._preload = condition; return this; }
     hydrateState(value) {
         if (this._multiple)
             return (Array.isArray(value) ? value : []).map(String);
         return value === null || value === undefined || value === '' ? null : String(value);
     }
     dehydrateState(state) { return this._multiple ? this.selectedValues() : state; }
-    async resolveOptions() {
+    /** Options with their groups (labels sanitized when `allowHtml()`). */
+    async resolveGroupedOptions() {
+        if (this._relationship)
+            return this._searchable && !this._preload ? [] : this.relationshipOptions(null, null);
         const options = typeof this._options === 'function' ? await this._options(this.context()) : this._options;
-        return (Array.isArray(options) ? options : Object.entries(options)).map(([value, label]) => [String(value), String(label)]);
+        const groups = normalizeOptions(options);
+        if (!this._allowHtml)
+            return groups;
+        const clean = ([value, label]) => [value, sanitizeHtml(label)];
+        return groups.map((item) => (Array.isArray(item) ? clean(item) : { label: item.label, options: item.options.map(clean) }));
+    }
+    async resolveOptions() { return flattenOptions(await this.resolveGroupedOptions()); }
+    itemCountRules() {
+        const count = (v) => (Array.isArray(v) ? new Set(v.map(String)).size : 0);
+        return [
+            ...(this._minItems !== null ? [{ name: 'min', passes: (v) => count(v) >= this._minItems, message: (a) => `The ${a} field must have at least ${this._minItems} items.` }] : []),
+            ...(this._maxItems !== null ? [{ name: 'max', passes: (v) => count(v) <= this._maxItems, message: (a) => `The ${a} field must not have more than ${this._maxItems} items.` }] : []),
+        ];
     }
     async getValidationRules() {
         // With server search, a value is valid if the server can label it; otherwise it must be among the options.
         if (this._multiple)
-            return [...(await super.getValidationRules()), { name: 'in', passes: async (v) => { const values = Array.isArray(v) ? v.map(String) : []; return (await this.labelsOf([...new Set(values)])).length === new Set(values).size; }, message: (a) => `The selected ${a} is invalid.` }];
-        const passes = async (v) => (this._searchResultsUsing ? (await this._optionLabelUsing?.(String(v), this.context())) != null : (await this.resolveOptions()).some(([value]) => value === String(v)));
+            return [...(await super.getValidationRules()), ...this.itemCountRules(), { name: 'in', passes: async (v) => { const values = Array.isArray(v) ? v.map(String) : []; return (await this.labelsOf([...new Set(values)])).length === new Set(values).size; }, message: (a) => `The selected ${a} is invalid.` }];
+        const passes = async (v) => (this._relationship ? (await this.relationshipOptions(null, [String(v)])).length === 1 : this._searchResultsUsing ? (await this._optionLabelUsing?.(String(v), this.context())) != null : (await this.resolveOptions()).some(([value]) => value === String(v)));
         return [...(await super.getValidationRules()), { name: 'in', passes, message: (a) => `The selected ${a} is invalid.` }];
     }
     // Methods exposed to the select's JavaScript (called through callSchemaComponentMethod).
     getExposedMethods() { return ['getOptionLabel', 'getSearchResultsForJs', 'getOptionsForJs', 'getOptionLabelsForJs']; }
     static forJs(options) { return options.map(([value, label]) => ({ label, value, isDisabled: false })); }
-    async getOptionsForJs() { return this.withDisabled(Select.forJs(await this.resolveOptions())); }
+    groupsForJs(groups) {
+        return groups.map((item) => (Array.isArray(item) ? this.withDisabled(Select.forJs([item]))[0] : { label: item.label, options: this.withDisabled(Select.forJs(item.options)) }));
+    }
+    async getOptionsForJs() { return this.groupsForJs(await this.resolveGroupedOptions()); }
     withDisabled(options) {
         if (!this._disableOptionWhen)
             return options;
@@ -390,17 +722,21 @@ export class Select extends Field {
         return options.map((option) => ({ ...option, isDisabled: this._disableOptionWhen(option.value, ctx) }));
     }
     async getSearchResultsForJs(search = '') {
+        if (this._relationship)
+            return this.withDisabled(Select.forJs(await this.relationshipOptions(String(search ?? '').slice(0, 1000), null, this._optionsLimit)));
         if (this._searchResultsUsing) {
             const found = await this._searchResultsUsing(String(search ?? '').slice(0, 1000), this.context());
             return Select.forJs((Array.isArray(found) ? found : Object.entries(found)).map(([value, label]) => [String(value), String(label)]));
         }
         const needle = String(search ?? '').toLowerCase();
-        return Select.forJs((await this.resolveOptions()).filter(([, label]) => label.toLowerCase().includes(needle)));
+        return this.withDisabled(Select.forJs((await this.resolveOptions()).filter(([, label]) => label.toLowerCase().includes(needle))));
     }
     async getOptionLabel() {
         const state = this.context().state;
         if (state === null || state === undefined || state === '')
             return null;
+        if (this._relationship)
+            return (await this.relationshipOptions(null, [String(state)]))[0]?.[1] ?? null;
         if (this._optionLabelUsing)
             return this._optionLabelUsing(String(state), this.context());
         return (await this.resolveOptions()).find(([value]) => value === String(state))?.[1] ?? null;
@@ -449,9 +785,16 @@ export class Select extends Field {
             .modalSubmitActionLabel(tr('modal.actions.create.label'))
             .schema(this._createOptionForm)
             .action(async ({ data }) => {
-            if (!this._createOptionUsing)
+            let created;
+            if (this._createOptionUsing)
+                created = await this._createOptionUsing(data, this.context());
+            else if (this._relationship) {
+                const { related } = this.relationInfo();
+                const record = await related.query().insert(data);
+                created = record[related.idColumn];
+            }
+            else
                 throw new Error(`Select [${this.getStatePath()}]: createOptionUsing() is required with createOptionForm().`);
-            const created = await this._createOptionUsing(data, this.context());
             if (created === null || created === undefined || created === '')
                 return;
             this.setState(this._multiple ? [...new Set([...this.selectedValues(), String(created)])] : String(created));
@@ -481,36 +824,53 @@ export class Select extends Field {
         return this._modifyEditOptionAction?.(action) ?? action;
     }
     /** Actions mounted on the field: hint, create option and edit option. */
-    getActions() { return [...this.getHintActions(), ...[this.getCreateOptionAction(), this.getEditOptionAction()].filter((action) => action !== null)]; }
-    /** "+" and "edit" buttons on the right of the field. */
+    getActions() { return [...this.getHintActions(), ...this._affixes.prefixActions, ...this._affixes.suffixActions, ...[this.getCreateOptionAction(), this.getEditOptionAction()].filter((action) => action !== null)]; }
+    affixIcon(name, color) { return name ? icon(name, { attributes: new Attributes().class(color && color !== 'gray' ? ['fi-color', `fi-color-${color}`] : []) }) : ''; }
+    async affixActionsHtml(actions) {
+        const ctx = this.context();
+        const html = [];
+        for (const action of actions)
+            if (await action.isVisible(ctx))
+                html.push(await action.iconButton().size('sm').toHtml(ctx, { schemaComponent: this.getKey() }));
+        return html;
+    }
+    async prefixHtml() {
+        const a = this._affixes;
+        return inputAffixHtml('prefix', { label: a.prefix, icon: this.affixIcon(a.prefixIcon, a.prefixIconColor), actions: await this.affixActionsHtml(a.prefixActions), inline: a.prefixInline });
+    }
+    /** Suffix: label, icon, actions, then the "+" and "edit" buttons. */
     async suffixHtml() {
         const ctx = this.context();
         const context = { ...(this.livewire.getActionMountContext?.() ?? {}), schemaComponent: this.getKey() };
-        const buttons = [];
+        const buttons = await this.affixActionsHtml(this._affixes.suffixActions);
         for (const action of [this.getCreateOptionAction(), this.getEditOptionAction()]) {
             if (action && (await action.isVisible(ctx)))
                 buttons.push((await action.toLinkHtml(ctx, context, '')).replace(' wire:key=""', ''));
         }
-        return buttons.length ? `<div class="fi-input-wrp-suffix"><div class="fi-input-wrp-actions">${buttons.join('')}</div></div>` : '';
+        const a = this._affixes;
+        return inputAffixHtml('suffix', { label: a.suffix, icon: this.affixIcon(a.suffixIcon, a.suffixIconColor), actions: buttons, inline: a.suffixInline });
     }
     async toHtml() {
         const isDisabled = await this.isDisabled();
-        const resolved = await this.resolveOptions();
+        const grouped = await this.resolveGroupedOptions();
+        const resolved = flattenOptions(grouped);
         const suffix = await this.suffixHtml();
-        if (this._searchable) {
+        const prefix = await this.prefixHtml();
+        if (this._searchable || this._multiple || !this._native || this._allowHtml) {
             const isRequired = (await this.isRequired()) && !isDisabled;
             const after = isRequired ? `<span id="${e(this.getId())}-required" class="fi-sr-only">${e(t('filament-forms::components.select.required_description'))}</span>` : '';
-            return this.wrap(await this.toJsHtml(resolved, isDisabled, suffix), { wrapperClass: 'fi-fo-select-wrp', after });
+            return this.wrap(await this.toJsHtml(grouped, isDisabled, suffix, prefix), { wrapperClass: 'fi-fo-select-wrp', after });
         }
         const select = new Attributes()
             .merge({ 'aria-invalid': this.hasError() ? 'true' : null, disabled: isDisabled, id: this.getId(), required: (await this.isRequired()) && !isDisabled, 'wire:key': typeof this._options === 'function' ? `${this.getLivewireKey()}.${createHash('md5').update(JSON.stringify(resolved)).digest('hex')}` : null, [this._live ? 'wire:model.live' : 'wire:model']: this.getStatePath() })
             .class(['fi-select-input']);
         const wrapper = new Attributes().merge({ 'x-on:focus-input.stop': "$el.querySelector('select')?.focus()" }).class(['fi-fo-select', 'fi-fo-select-native', 'fi-input-wrp', { 'fi-disabled': isDisabled, 'fi-invalid': this.hasError() }]);
-        const options = [this._selectablePlaceholder ? `<option value="">${isDisabled ? '' : e(this._placeholder ?? t('filament-forms::components.select.placeholder'))}</option>` : '', ...resolved.map(([value, label]) => `<option value="${e(value)}">${e(label)}</option>`)].join('');
-        return this.wrap(`<div ${wrapper.toHtml()}><div class="fi-input-wrp-content-ctn"><select ${select.toHtml()}>${options}</select></div>${suffix}</div>`, { wrapperClass: 'fi-fo-select-wrp' });
+        const option = ([value, label]) => `<option value="${e(value)}"${this._disableOptionWhen?.(value, this.context()) ? ' disabled' : ''}>${e(label)}</option>`;
+        const options = [this._selectablePlaceholder ? `<option value="">${isDisabled ? '' : e(this._placeholder ?? t('filament-forms::components.select.placeholder'))}</option>` : '', ...grouped.map((item) => (Array.isArray(item) ? option(item) : `<optgroup label="${e(item.label)}">${item.options.map(option).join('')}</optgroup>`))].join('');
+        return this.wrap(`<div ${wrapper.toHtml()}>${prefix}<div class="fi-input-wrp-content-ctn"><select ${select.toHtml()}>${options}</select></div>${suffix}</div>`, { wrapperClass: 'fi-fo-select-wrp' });
     }
     /** JavaScript select rendering. */
-    async toJsHtml(options, isDisabled, suffix = '') {
+    async toJsHtml(grouped, isDisabled, suffix = '', prefix = '') {
         const state = this.context().state;
         const hasState = !this._multiple && state !== null && state !== undefined && state !== '';
         const selected = this._multiple ? await this.labelsOf(this.selectedValues()) : [];
@@ -518,7 +878,7 @@ export class Select extends Field {
         // Required field: a screen-reader instruction ("Select an option.") is linked to the select.
         const describedBy = [isRequired ? `${this.getId()}-required` : null, this.hasError() ? `${this.getId()}-error` : null].filter(Boolean).join(' ') || null;
         const accessibility = JSON.stringify({ 'aria-describedby': describedBy, 'aria-invalid': this.hasError() ? 'true' : null, 'aria-required': isRequired ? 'true' : null });
-        const forJs = this.withDisabled(Select.forJs(options));
+        const forJs = this.groupsForJs(grouped);
         // Dynamic options come from a function, so they may change between requests.
         const hasDynamicOptions = this._dynamic ?? typeof this._options === 'function';
         const tr = (key, replace = {}) => t(`filament-forms::components.select.${key}`, replace);
@@ -528,41 +888,41 @@ export class Select extends Field {
  clearButtonLabel: ${js(tr('actions.clear.label'))},
  errorMessage: ${js(tr('error_message'))},
  hasDynamicOptions: ${hasDynamicOptions ? 'true' : 'false'},
- hasDynamicSearchResults: ${this._searchResultsUsing || (this._searchOnServer ?? hasDynamicOptions) ? 'true' : 'false'},
- hasInitialNoOptionsMessage: ${this._searchResultsUsing || this._hasNoInitialOptions ? 'false' : 'true'},
+ hasDynamicSearchResults: ${this._searchResultsUsing || (this._relationship && this._searchable) || (this._searchOnServer ?? hasDynamicOptions) ? 'true' : 'false'},
+ hasInitialNoOptionsMessage: ${this._searchResultsUsing || (this._relationship && this._searchable && !this._preload) || this._hasNoInitialOptions ? 'false' : 'true'},
  id: ${js(this.getId())},
  initialOptionLabel: ${js(hasState ? await this.getOptionLabel() : null)},
  initialOptionLabels: ${selected.length ? js(selected.map(([value, label]) => ({ label, value, isDisabled: false }))) : '[]'},
  initialState: ${this._multiple ? (selected.length ? js(selected.map(([value]) => value)) : '[]') : js(hasState ? String(state) : null)},
  isAutofocused: ${this._autofocus ? 'true' : 'false'},
  isDisabled: ${isDisabled ? 'true' : 'false'},
- isHtmlAllowed: false,
+ isHtmlAllowed: ${this._allowHtml ? 'true' : 'false'},
  isMultiple: ${this._multiple ? 'true' : 'false'},
  isReorderable: false,
- isSearchable: true,
+ isSearchable: ${this._searchable ? 'true' : 'false'},
  key: ${js(this.getKey())},
  livewireId: ${js(this.livewire.id)},
- loadingMessage: ${js(tr('loading_message'))},
- maxItems: null,
- maxItemsMessage: ${js(tr('max_items_message', { count: '' }))},
- noOptionsMessage: ${js(tr('no_options_message'))},
- noSearchResultsMessage: ${js(tr('no_search_results_message'))},
+ loadingMessage: ${js(this._messages.loading ?? tr('loading_message'))},
+ maxItems: ${this._maxItems ?? 'null'},
+ maxItemsMessage: ${js(tr('max_items_message', { count: String(this._maxItems ?? '') }))},
+ noOptionsMessage: ${js(this._messages.noOptions ?? tr('no_options_message'))},
+ noSearchResultsMessage: ${js(this._messages.noSearchResults ?? tr('no_search_results_message'))},
  options: ${forJs.length ? js(forJs) : '[]'},
- optionsLimit: 50,
+ optionsLimit: ${this._optionsLimit},
  placeholder: ${js(this._placeholder ?? tr('placeholder'))},
  position: null,
  removeButtonLabel: ${js(tr('actions.remove_option.label'))},
- searchDebounce: 1000,
- searchingMessage: ${js(tr('searching_message'))},
+ searchDebounce: ${this._searchDebounce},
+ searchingMessage: ${js(this._messages.searching ?? tr('searching_message'))},
  searchLabel: ${js(tr('search_label'))},
- searchPrompt: ${js(tr('search_prompt'))},
+ searchPrompt: ${js(this._messages.searchPrompt ?? tr('search_prompt'))},
  searchableOptionFields: ${js(['label'])},
  state: $wire.$entangle(${js(this.getStatePath())}, ${this._live ? 'true' : 'false'}),
  statePath: ${js(this.getStatePath())},
  })`;
         const wrapper = new Attributes().merge({ 'x-on:focus-input.stop': "$el.querySelector('.fi-select-input-btn')?.focus()" }).class(['fi-fo-select', 'fi-input-wrp', { 'fi-disabled': isDisabled, 'fi-invalid': this.hasError() }]);
         const key = `${this.getLivewireKey()}.${createHash('md5').update(JSON.stringify(forJs)).digest('hex')}`;
-        return `<div ${wrapper.toHtml()}><div class="fi-input-wrp-content-ctn"><div class="fi-hidden" data-select-accessibility="${e(accessibility)}" x-data="{
+        return `<div ${wrapper.toHtml()}>${prefix}<div class="fi-input-wrp-content-ctn"><div class="fi-hidden" data-select-accessibility="${e(accessibility)}" x-data="{
  isDisabled: ${isDisabled ? 'true' : 'false'},
  init() {
  const container = $el.nextElementSibling
@@ -587,28 +947,106 @@ export class TableColumn {
 const ITEM_KEY = /^[A-Za-z0-9_-]{1,64}$/;
 const isItemKey = (key) => ITEM_KEY.test(key) && key !== '__proto__' && key !== 'constructor' && key !== 'prototype';
 /**
- * List of repeated items sharing the same fields, displayed as a table.
+ * List of repeated items sharing the same fields: stacked cards (default), a table (`table()`), or one field per item (`simple()`).
  * The state is a map `item key → fields`; key order is display order.
- * Add, delete and move are component actions, mounted with `schemaComponent`.
+ * Add, delete, clone and move are component actions, mounted with `schemaComponent`.
  */
 export class Repeater extends Field {
     _schema = () => [];
     _columns = [];
     _defaultItems = 0;
     _maxItems = 500;
+    _minItems = null;
     _itemLinks = [];
+    _simple = null;
+    _grid = null;
+    _collapsible = false;
+    _collapsed = false;
+    _persistCollapsed = false;
+    _cloneable = false;
+    _addable = true;
+    _deletable = true;
+    _reorderableWithButtons = false;
+    _itemLabel = null;
+    _itemNumbers = false;
+    _truncateItemLabel = true;
+    _headingTag = 'h4';
+    _addActionLabel = null;
+    _addActionAlignment = null;
+    _labelBetweenItems = null;
+    _itemHeaders = true;
+    _relationship = null;
     static make(name) { return configured(new Repeater(name)); }
-    /** Item fields: a function called for each item. */
-    schema(factory) { this._schema = factory; return this; }
+    /** Item components: a function called for each item. */
+    schema(factory) { this._schema = typeof factory === 'function' ? factory : () => factory.map(cloneComponentTree); return this; }
     /** Table display, one column per field. */
     table(columns) { this._columns = columns; return this; }
+    isTable() { return this._columns.length > 0; }
+    /**
+     * One field per item, without a card: the state is saved as a list of values (`['a@example.com', 'b@example.com']`).
+     * The field is cloned for each item.
+     */
+    simple(field) { this._simple = field; return this; }
     defaultItems(count) { this._defaultItems = count; return this; }
     maxItems(count) { this._maxItems = count; return this; }
+    /** Minimum number of items, checked on the server. */
+    minItems(count) { this._minItems = count; return this; }
     _reorderable = true;
     /** `false`: items keep their order (e.g. a relationship without an order column). */
     reorderable(condition = true) { this._reorderable = condition; return this; }
+    _dragAndDrop = true;
+    /** Move up / move down buttons in each item header, besides drag and drop. */
+    reorderableWithButtons(condition = true) { this._reorderableWithButtons = condition; return this; }
+    /** `false`: no drag and drop (buttons may still reorder, with `reorderableWithButtons()`). */
+    reorderableWithDragAndDrop(condition = true) { this._dragAndDrop = condition; return this; }
+    /** Reordering is off with `reorderable(false)`, and for a relationship without `orderColumn()` (the order could not be saved). */
+    isReorderable() { return this._reorderable && !(this._relationship !== null && this._relationship.orderColumn === null && this._orderColumnPending === null); }
+    canDrag() { return this.isReorderable() && this._dragAndDrop; }
+    canMove() { return this.isReorderable() && (this._dragAndDrop || this._reorderableWithButtons); }
     /** Link shown on each row (an item action pointing to a URL). */
     extraItemLink(resolver) { this._itemLinks.push(resolver); return this; }
+    /** Items laid out in a grid (`2`, or `{ md: 2, xl: 3 }`). */
+    grid(columns = 2) { this._grid = columns; return this; }
+    /** Items can be collapsed from their header; `collapsed()` collapses them on load. */
+    collapsible(condition = true) { this._collapsible = condition; return this; }
+    collapsed(condition = true) { this._collapsed = condition; if (condition)
+        this._collapsible = true; return this; }
+    /** Keeps each item's collapsed state in the browser (local storage). */
+    persistCollapsed(condition = true) { this._persistCollapsed = condition; return this; }
+    cloneable(condition = true) { this._cloneable = condition; return this; }
+    /** `false`: no "Add" button (and adding is refused on the server). */
+    addable(condition = true) { this._addable = condition; return this; }
+    /** `false`: no delete button (and deleting is refused on the server). */
+    deletable(condition = true) { this._deletable = condition; return this; }
+    /** Item header label: a string, or a function of the item's state (`({ state }) => state.name ?? null`). Escaped. */
+    itemLabel(label) { this._itemLabel = label; return this; }
+    /** Item number after the label. */
+    itemNumbers(condition = true) { this._itemNumbers = condition; return this; }
+    truncateItemLabel(condition = true) { this._truncateItemLabel = condition; return this; }
+    /** `false`: items have no header (and so no buttons): only their fields. */
+    itemHeaders(condition = true) { this._itemHeaders = condition; return this; }
+    addActionLabel(label) { this._addActionLabel = label; return this; }
+    addActionAlignment(alignment) { this._addActionAlignment = alignment; return this; }
+    labelBetweenItems(label) { this._labelBetweenItems = label; return this; }
+    /**
+     * Items are the records of a has-many relationship of the form's model (Objection `relationMappings`): loaded when the form is
+     * filled, then created, updated and deleted once the record is saved. `orderColumn()` saves the items' order.
+     */
+    relationship(name = null, modifyQueryUsing = null, options = {}) {
+        this._relationship = { name: name ?? this._name, modify: modifyQueryUsing, orderColumn: this._relationship?.orderColumn ?? null, model: options.model ?? null };
+        return this;
+    }
+    orderColumn(column = 'sort') { if (this._relationship)
+        this._relationship.orderColumn = column;
+    else
+        this._orderColumnPending = column; return this; }
+    _orderColumnPending = null;
+    itemComponents() {
+        if (this._simple)
+            return [cloneComponentTree(this._simple).hiddenLabel()];
+        return this._schema();
+    }
+    itemFields() { return this.itemComponents().filter((component) => component instanceof Field); }
     /** Well-formed items only: keys come from the browser, so only simple keys are kept. */
     getItems() {
         const state = this.context().state;
@@ -617,28 +1055,118 @@ export class Repeater extends Field {
         return Object.fromEntries(Object.entries(state).filter(([key, item]) => isItemKey(key) && item !== null && typeof item === 'object' && !Array.isArray(item)).slice(0, this._maxItems));
     }
     setItems(items) { writePath(this.livewire, this.getStatePath().split('.'), items); }
-    itemDefaults() { return Object.fromEntries(this._schema().map((field) => [field.getName(), field.getDefaultState()])); }
+    itemDefaults() {
+        const data = {};
+        fillSchema(new Schema(this.container.livewire).statePath('').components(this.itemComponents()), data);
+        return data;
+    }
     getDefaultState() { return Object.fromEntries(Array.from({ length: this._defaultItems }, () => [randomUUID(), this.itemDefaults()])); }
-    /** Relationship records → `record-<id>` items, limited to the declared fields. */
+    /** A list (records → `record-<id>` items; simple values → one-field items) or a keyed map, limited to the declared fields. */
     hydrateState(value) {
+        if (typeof value === 'string') {
+            try {
+                value = JSON.parse(value);
+            }
+            catch {
+                value = null;
+            }
+        }
         if (!Array.isArray(value))
             return value && typeof value === 'object' ? value : {};
-        const fields = this._schema();
-        return Object.fromEntries(value.map((row) => [`record-${row.id}`, Object.fromEntries(fields.map((field) => [field.getName(), field.hydrateState(row[field.getName()] ?? field.getDefaultState())]))]));
+        const fields = this.itemFields();
+        return Object.fromEntries(value.slice(0, this._maxItems).map((row) => {
+            if (this._simple)
+                return [randomUUID(), { [this._simple.getName()]: this._simple.hydrateState(row) }];
+            const key = row && typeof row === 'object' && row.id !== undefined && row.id !== null ? `record-${row.id}` : randomUUID();
+            return [key, Object.fromEntries(fields.map((field) => [field.getName(), field.hydrateState(row?.[field.getName()] ?? field.getDefaultState())]))];
+        }));
     }
     dehydrateState() { return Object.fromEntries(Object.keys(this.getItems()).map((key) => [key, {}])); }
+    /** Simple repeater: saved as a list of values. */
+    finalizeDehydratedState(state) {
+        if (!this._simple || !state || typeof state !== 'object' || Array.isArray(state))
+            return state;
+        const name = this._simple.getName();
+        return Object.values(state).map((item) => item?.[name] ?? null);
+    }
     getChildSchemas() {
         const container = this.container;
-        return Object.keys(this.getItems()).map((key) => new Schema(container.livewire).key(`${this.getKey()}.${key}`).statePath(`${this.getStatePath()}.${key}`).operation(container.getOperation()).record(container.getRecord()).root(false).components(this._schema()));
+        return Object.keys(this.getItems()).map((key) => new Schema(container.livewire).key(`${this.getKey()}.${key}`).statePath(`${this.getStatePath()}.${key}`).operation(container.getOperation()).record(container.getRecord()).root(false).parentComponent(this).columns(this._childColumns ?? 1).components(this.itemComponents()));
     }
+    _childColumns = null;
+    /** Grid columns inside each item. */
+    columns(columns) { this._childColumns = columns; return this; }
     async getValidationRules() {
         const rules = [];
+        const count = () => Object.keys(this.getItems()).length;
         if (await this.isRequired())
-            rules.push({ name: 'required', passes: () => Object.keys(this.getItems()).length > 0, message: (a) => `The ${a} field is required.` });
+            rules.push({ name: 'required', passes: () => count() > 0, message: (a) => `The ${a} field is required.` });
+        if (this._minItems !== null)
+            rules.push({ name: 'min', implicit: true, passes: () => count() >= this._minItems, message: (a) => `The ${a} field must have at least ${this._minItems} items.` });
+        rules.push({ name: 'max', implicit: true, passes: () => count() <= this._maxItems, message: (a) => `The ${a} field must not have more than ${this._maxItems} items.` });
         return [...rules, ...this._rules];
     }
+    // ---- relationship
+    relationInfo() {
+        const model = modelOfForm(this.context(), this._relationship.model);
+        const relation = model.getRelation(this._relationship.name);
+        return { model, relation, related: relation.relatedModelClass };
+    }
+    async savesRelationships() { return (await super.savesRelationships()) || this._relationship !== null; }
+    relatedQuery(record) {
+        const { model } = this.relationInfo();
+        const query = model.relatedQuery(this._relationship.name).for(record[model.idColumn]);
+        this._relationship.modify?.(query);
+        return query;
+    }
+    async loadStateFromRelationships(record) {
+        if (!this._relationship)
+            return super.loadStateFromRelationships(record);
+        if (this._orderColumnPending !== null) {
+            this._relationship.orderColumn = this._orderColumnPending;
+            this._orderColumnPending = null;
+        }
+        const { related } = this.relationInfo();
+        const query = this.relatedQuery(record);
+        if (this._relationship.orderColumn)
+            query.orderBy(`${related.tableName}.${this._relationship.orderColumn}`);
+        const rows = await query.limit(this._maxItems);
+        return { state: rows.map((row) => ({ ...row, id: row[related.idColumn] })) };
+    }
+    /** Creates, updates and deletes the related records; only records of this owner (and query) are touched. */
+    async saveRelationships(record) {
+        if (!this._relationship)
+            return super.saveRelationships(record);
+        if (this._orderColumnPending !== null) {
+            this._relationship.orderColumn = this._orderColumnPending;
+            this._orderColumnPending = null;
+        }
+        const { related } = this.relationInfo();
+        const existing = new Map((await this.relatedQuery(record)).map((row) => [String(row[related.idColumn]), row]));
+        const kept = new Set();
+        const keys = Object.keys(this.getItems());
+        const schemas = this.getChildSchemas();
+        for (const [index, key] of keys.entries()) {
+            const data = await getSchemaState(schemas[index]);
+            if (this._relationship.orderColumn)
+                data[this._relationship.orderColumn] = index + 1;
+            const id = key.startsWith('record-') ? key.slice('record-'.length) : null;
+            if (id !== null && existing.has(id)) {
+                kept.add(id);
+                await related.query().findById(existing.get(id)[related.idColumn]).patch(data);
+            }
+            else {
+                await this.relatedQuery(record).insert(data);
+            }
+        }
+        const removed = [...existing.keys()].filter((id) => !kept.has(id));
+        if (removed.length)
+            await related.query().whereIn(related.idColumn, removed.map((id) => existing.get(id)[related.idColumn])).delete();
+    }
     getActions() {
         const move = (offset) => ({ arguments: args }) => {
+            if (!this.canMove())
+                return;
             const items = this.getItems();
             const keys = Object.keys(items);
             const from = keys.indexOf(String(args.item));
@@ -648,16 +1176,26 @@ export class Repeater extends Field {
             [keys[from], keys[to]] = [keys[to], keys[from]];
             this.setItems(Object.fromEntries(keys.map((key) => [key, items[key]])));
         };
+        const insertAfter = (items, after, key, item) => Object.fromEntries(Object.entries(items).flatMap(([k, v]) => (k === after ? [[k, v], [key, item]] : [[k, v]])));
         return [
             ...this.getHintActions(),
-            Action.make('add').action(() => { const items = this.getItems(); if (Object.keys(items).length >= this._maxItems)
+            Action.make('add').action(() => { const items = this.getItems(); if (!this._addable || Object.keys(items).length >= this._maxItems)
                 return; items[randomUUID()] = this.itemDefaults(); this.setItems(items); }),
-            Action.make('delete').action(({ arguments: args }) => { const items = this.getItems(); const key = String(args.item); if (!Object.hasOwn(items, key))
+            Action.make('delete').action(({ arguments: args }) => { const items = this.getItems(); const key = String(args.item); if (!this._deletable || !Object.hasOwn(items, key))
                 return; delete items[key]; this.setItems(items); }),
+            Action.make('clone').action(({ arguments: args }) => {
+                const items = this.getItems();
+                const key = String(args.item);
+                if (!this._cloneable || !Object.hasOwn(items, key) || Object.keys(items).length >= this._maxItems)
+                    return;
+                this.setItems(insertAfter(items, key, randomUUID(), JSON.parse(JSON.stringify(items[key]))));
+            }),
             Action.make('moveUp').action(move(-1)),
             Action.make('moveDown').action(move(1)),
             // Drag and drop: the browser sends the new order, only accepted if it is a permutation of the existing keys.
             Action.make('reorder').action(({ arguments: args }) => {
+                if (!this.canDrag())
+                    return;
                 const items = this.getItems();
                 const keys = Object.keys(items);
                 const order = Array.isArray(args.items) ? args.items.map(String) : [];
@@ -667,9 +1205,85 @@ export class Repeater extends Field {
             }),
         ];
     }
+    async itemLabelOf(key, index, item) {
+        const label = typeof this._itemLabel === 'function' ? await this._itemLabel({ state: item, key, index }) : this._itemLabel;
+        return label === null || label === undefined || label === '' ? null : String(label);
+    }
     async toHtml() {
         if (!colorManager)
             throw new Error('No color manager: call useColorManager().');
+        if (this.isTable())
+            return this.toTableHtml();
+        const id = this.getId();
+        const key = this.getKey();
+        const items = this.getItems();
+        const keys = Object.keys(items);
+        const schemas = this.getChildSchemas();
+        const tr = (name, replace = {}) => t(`filament-forms::components.repeater.${name}`, replace);
+        const context = { ...(this.livewire.getActionMountContext?.() ?? {}), schemaComponent: key };
+        const expression = (action, args) => `mountAction(${js(action)}, ${args ? js(args) : '{}'}, ${js(context)})`;
+        const descriptionId = (itemKey) => `${id}-item-${createHash('md5').update(itemKey).digest('hex')}`;
+        const danger = colorManager.getComponentClasses('icon-button', 'danger');
+        const gray = colorManager.getComponentClasses('icon-button', 'gray');
+        const button = (options) => {
+            const loading = options.expression ? `${icon(options.icon, { attributes: new Attributes({ 'wire:loading.remove.delay.default': '1', 'wire:target': options.expression }) })}${loadingIndicator(new Attributes({ 'wire:loading.delay.default': '', 'wire:target': options.expression }))}` : icon(options.icon);
+            return `<button title="${e(options.label)}"${options.disabled ? ' aria-disabled="true"' : ''} aria-label="${e(options.label)}"${options.disabled ? ' disabled="disabled"' : ''} type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="${cls(['fi-ac-icon-btn-action', 'fi-icon-btn', { 'fi-disabled': options.disabled === true }, 'fi-size-sm', ...(options.colors ?? [])])}"${options.extra ?? ''}${options.expression ? ` wire:click="${e(options.expression)}"` : ''}>${loading}</button>`;
+        };
+        const rows = [];
+        for (const [index, itemKey] of keys.entries()) {
+            const isFirst = index === 0, isLast = index === keys.length - 1;
+            const moveButton = (action, label, iconName, direction, disabled) => {
+                const expr = expression(action, { item: itemKey });
+                return `<li x-on:click.stop${this._reorderableWithButtons ? '' : ' class="fi-sr-only"'}>${button({ label, icon: iconName, expression: expr, disabled, extra: `${this._reorderableWithButtons ? '' : ' tabindex="-1"'} data-reorder-hidden="data-reorder-hidden" data-reorder-direction="${direction}" data-reorder-action="${e(expr)}" aria-describedby="${e(descriptionId(itemKey))}"` })}</li>`;
+            };
+            const content = await schemas[index].toHtml();
+            if (this._simple) {
+                const actions = [
+                    ...(this.canDrag() && keys.length > 1 ? [`<li x-on:click.stop>${button({ label: tr('actions.reorder.label'), icon: 'm-arrows-up-down', expression: null, extra: ' x-sortable-handle="x-sortable-handle"' })}</li>`] : []),
+                    ...(this.canMove() && keys.length > 1 ? [moveButton('moveUp', tr('actions.move_up.label'), 'm-arrow-up', 'up', isFirst), moveButton('moveDown', tr('actions.move_down.label'), 'm-arrow-down', 'down', isLast)] : []),
+                    ...(this._cloneable ? [`<li x-on:click.stop>${button({ label: tr('actions.clone.label'), icon: 'm-square-2-stack', expression: expression('clone', { item: itemKey }), colors: gray })}</li>`] : []),
+                    ...(this._deletable ? [`<li x-on:click.stop>${button({ label: tr('actions.delete.label'), icon: 'm-trash', expression: expression('delete', { item: itemKey }), colors: danger })}</li>`] : []),
+                ];
+                rows.push(`<li wire:key="${e(this.getLivewireKey() ?? '')}.${e(itemKey)}.item" x-sortable-item="${e(itemKey)}" class="fi-fo-simple-repeater-item"><div class="fi-fo-simple-repeater-item-content">${content}</div>${actions.length ? `<ul class="fi-fo-simple-repeater-item-actions">${actions.join('')}</ul>` : ''}</li>`);
+                continue;
+            }
+            const label = await this.itemLabelOf(itemKey, index, items[itemKey]);
+            const start = [
+                ...(this.canDrag() && keys.length > 1 ? [`<li x-on:click.stop>${button({ label: tr('actions.reorder.label'), icon: 'm-arrows-up-down', expression: null, extra: ' x-sortable-handle="x-sortable-handle"' })}</li>`] : []),
+                ...(this.canMove() && keys.length > 1 ? [moveButton('moveUp', tr('actions.move_up.label'), 'm-arrow-up', 'up', isFirst), moveButton('moveDown', tr('actions.move_down.label'), 'm-arrow-down', 'down', isLast)] : []),
+            ];
+            const links = this._itemLinks.map((resolve) => resolve({ item: items[itemKey], key: itemKey })).filter((link) => link !== null && /^(\/(?!\/)|https?:\/\/)/.test(link.url))
+                .map((link) => `<li x-on:click.stop><a href="${e(link.url)}" target="_blank" rel="noopener" aria-label="${e(link.label)}" title="${e(link.label)}" class="${cls(['fi-ac-icon-btn-action', 'fi-icon-btn', 'fi-size-sm', ...gray])}">${icon(link.icon)}</a></li>`);
+            const end = [
+                ...links,
+                ...(this._cloneable ? [`<li x-on:click.stop>${button({ label: tr('actions.clone.label'), icon: 'm-square-2-stack', expression: expression('clone', { item: itemKey }), colors: gray })}</li>`] : []),
+                ...(this._deletable ? [`<li x-on:click.stop>${button({ label: tr('actions.delete.label'), icon: 'm-trash', expression: expression('delete', { item: itemKey }), colors: danger })}</li>`] : []),
+                ...(this._collapsible ? [`<li class="fi-fo-repeater-item-header-collapsible-actions" x-on:click.stop="toggleCollapsed"><div class="fi-fo-repeater-item-header-collapse-action">${button({ label: tr('actions.collapse.label'), icon: 'm-chevron-up', expression: null, colors: gray })}</div><div class="fi-fo-repeater-item-header-expand-action">${button({ label: tr('actions.expand.label'), icon: 'm-chevron-down', expression: null, colors: gray })}</div></li>`] : []),
+            ];
+            const hasHeader = this._itemHeaders && (start.length > 0 || label !== null || end.length > 0);
+            const header = hasHeader ? `<div${this._collapsible ? ' x-on:click.stop="toggleCollapsed"' : ''} class="fi-fo-repeater-item-header">${start.length ? `<ul class="fi-fo-repeater-item-header-start-actions">${start.join('')}</ul>` : ''}${label !== null ? `<${this._headingTag} class="${cls(['fi-fo-repeater-item-header-label', { 'fi-truncated': this._truncateItemLabel }])}">${e(label)}${this._itemNumbers ? ` ${index + 1}` : ''}</${this._headingTag}>` : ''}${end.length ? `<ul class="fi-fo-repeater-item-header-end-actions">${end.join('')}</ul>` : ''}</div>` : '';
+            const itemConfig = { isCollapsed: this._collapsed, collapseKey: this._persistCollapsed ? `filament:repeater:collapsed:${key}-${itemKey}` : null };
+            rows.push(`<li wire:ignore.self wire:key="${e(this.getLivewireKey() ?? '')}.${e(itemKey)}.item" x-data="item(${e(js(itemConfig))})" x-on:repeater-expand.window="expandFromEvent" x-on:repeater-collapse.window="collapseFromEvent" x-on:expand="expand" x-sortable-item="${e(itemKey)}" class="${cls(['fi-fo-repeater-item', { 'fi-fo-repeater-item-has-header': hasHeader }])}" x-bind:class="itemClasses">${header}<div x-show="! isCollapsed" class="fi-fo-repeater-item-content">${content}</div></li>`);
+            if (!isLast && this._labelBetweenItems)
+                rows.push(`<li class="fi-fo-repeater-label-between-items-ctn"><div class="fi-fo-repeater-label-between-items-divider-before"></div><span class="fi-fo-repeater-label-between-items">${e(this._labelBetweenItems)}</span><div class="fi-fo-repeater-label-between-items-divider-after"></div></li>`);
+        }
+        const prefix = this._simple ? 'fi-fo-simple-repeater' : 'fi-fo-repeater';
+        const gridAttributes = this._grid !== null ? new Attributes().grid(this._grid).toHtml() : '';
+        const gridClass = /class="([^"]*)"/.exec(gridAttributes)?.[1] ?? '';
+        const gridStyle = /style="([^"]*)"/.exec(gridAttributes)?.[1] ?? null;
+        const list = keys.length ? `<ul x-sortable${gridStyle ? ` style="${gridStyle}"` : ''} data-sortable-animation-duration="300" x-on:end.stop="reorder" x-ref="reorderItems" class="${cls([gridClass, `${prefix}-items`])}">${rows.join('')}</ul>` : '';
+        const label = await this.getLabel();
+        const addExpr = expression('add', null);
+        const add = this._addable && keys.length < this._maxItems ? `<div class="${cls([`${prefix}-add`, this._addActionAlignment ? `fi-align-${this._addActionAlignment}` : null])}"><button type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="fi-ac-btn-action fi-btn fi-size-sm" wire:click="${e(addExpr)}">${loadingIndicator(new Attributes({ 'wire:loading.delay.default': '', 'wire:target': addExpr }), 'sm')}${e(this._addActionLabel ?? tr('actions.add.label', { label: label.toLowerCase() }))}</button></div>` : '';
+        const collapseAll = this._collapsible && !this._simple ? `<div class="${cls(['fi-fo-repeater-actions', { 'fi-hidden': keys.length < 2 }])}"><span x-on:click="collapseAll"><button type="button" class="${cls(['fi-ac-link-action', 'fi-link', 'fi-size-sm', ...colorManager.getComponentClasses('link', 'gray')])}"><span class="fi-link-label">${e(tr('actions.collapse_all.label'))}</span></button></span><span x-on:click="expandAll"><button type="button" class="${cls(['fi-ac-link-action', 'fi-link', 'fi-size-sm', ...colorManager.getComponentClasses('link', 'gray')])}"><span class="fi-link-label">${e(tr('actions.expand_all.label'))}</span></button></span></div>` : '';
+        const itemLabel = tr('reordering.item');
+        const descriptions = keys.map((itemKey, index) => `<span class="fi-sr-only" data-reorder-description="${e(itemKey)}" data-reorder-label="${e(itemLabel)}" id="${e(descriptionId(itemKey))}">${e(tr('reordering.position', { label: itemLabel, position: String(index + 1), count: String(keys.length) }))}</span>`).join('');
+        const config = { statePath: this.getStatePath(), schemaComponent: key, moveUpAction: 'moveUp', moveDownAction: 'moveDown', reorderAction: 'reorder', message: tr('reordering.moved'), hasCustomReorderAction: false };
+        const html = `<div aria-labelledby="${e(id)}-label" id="${e(id)}" role="group" data-reorder-owner="data-reorder-owner" data-reorder-items="${e(JSON.stringify(keys))}" x-load="x-load" x-load-src="${e(asset('repeater'))}" x-data="repeaterFormComponent(${e(js(config))})" class="${cls([prefix, { 'fi-collapsible': this._collapsible && !this._simple }])}"><span wire:ignore x-ref="reorderStatus" class="fi-sr-only" role="status" aria-live="polite" aria-atomic="true"></span>${collapseAll}${list}${add}${descriptions}</div>`;
+        return this.wrap(html, { labelAsDiv: true });
+    }
+    async toTableHtml() {
+        const colors = colorManager;
         const id = this.getId();
         const key = this.getKey();
         const livewireKey = this.getLivewireKey() ?? '';
@@ -686,7 +1300,7 @@ export class Repeater extends Field {
         const descriptionId = (itemKey) => `${id}-item-${createHash('md5').update(itemKey).digest('hex')}`;
         const rows = [];
         // No reorder column while there is only one row.
-        const hasReorderColumn = this._reorderable && keys.length > 1;
+        const hasReorderColumn = this.canDrag() && keys.length > 1;
         for (const [index, itemKey] of keys.entries()) {
             const moveButton = (action, label, iconName, direction, disabled) => {
                 const expr = expression(action, { item: itemKey });
@@ -695,68 +1309,291 @@ export class Repeater extends Field {
             const cells = [];
             for (const field of schemas[index].getComponents())
                 cells.push(`<td>${await field.toSchemaHtml(await field.isVisible())}</td>`);
-            const links = this._itemLinks.map((resolve) => resolve({ item: items[itemKey], key: itemKey })).filter((link) => link !== null)
+            // Only local or http(s) URLs: a link built from item data cannot become a `javascript:` URL.
+            const links = this._itemLinks.map((resolve) => resolve({ item: items[itemKey], key: itemKey })).filter((link) => link !== null && /^(\/(?!\/)|https?:\/\/)/.test(link.url))
                 .map((link) => `<div x-on:click.stop><a href="${e(link.url)}" target="_blank" x-tooltip="{
  content: ${e(js(link.label))},
  theme: $store.theme,
  allowHTML: false,
  }" aria-label="${e(link.label)}" class="${button} fi-size-sm">${icon(link.icon)}</a></div>`);
             const deleteExpr = expression('delete', { item: itemKey });
-            rows.push(`<tr wire:key="${e(livewireKey)}.${e(itemKey)}.item" x-sortable-item="${e(itemKey)}">${hasReorderColumn ? `<td><div class="fi-fo-table-repeater-actions"><div x-on:click.stop><button title="${e(tr('actions.reorder.label'))}" aria-label="${e(tr('actions.reorder.label'))}" type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="${button} fi-size-sm" x-sortable-handle="x-sortable-handle">${icon('m-arrows-up-down')}</button></div>${moveButton('moveUp', tr('actions.move_up.label'), 'm-arrow-up', 'up', index === 0)}${moveButton('moveDown', tr('actions.move_down.label'), 'm-arrow-down', 'down', index === keys.length - 1)}</div></td>` : ''}${cells.join('')}<td><div class="fi-fo-table-repeater-actions">${links.join('')}<div x-on:click.stop><button title="${e(tr('actions.delete.label'))}" aria-label="${e(tr('actions.delete.label'))}" type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="${[button, 'fi-size-sm', ...colorManager.getComponentClasses('icon-button', 'danger')].join(' ')}" wire:click="${e(deleteExpr)}">${actionIcon('m-trash', deleteExpr)}${loading(deleteExpr)}</button></div></div></td></tr>`);
+            rows.push(`<tr wire:key="${e(livewireKey)}.${e(itemKey)}.item" x-sortable-item="${e(itemKey)}">${hasReorderColumn ? `<td><div class="fi-fo-table-repeater-actions"><div x-on:click.stop><button title="${e(tr('actions.reorder.label'))}" aria-label="${e(tr('actions.reorder.label'))}" type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="${button} fi-size-sm" x-sortable-handle="x-sortable-handle">${icon('m-arrows-up-down')}</button></div>${moveButton('moveUp', tr('actions.move_up.label'), 'm-arrow-up', 'up', index === 0)}${moveButton('moveDown', tr('actions.move_down.label'), 'm-arrow-down', 'down', index === keys.length - 1)}</div></td>` : ''}${cells.join('')}<td><div class="fi-fo-table-repeater-actions">${links.join('')}${this._deletable ? `<div x-on:click.stop><button title="${e(tr('actions.delete.label'))}" aria-label="${e(tr('actions.delete.label'))}" type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="${[button, 'fi-size-sm', ...colorManager.getComponentClasses('icon-button', 'danger')].join(' ')}" wire:click="${e(deleteExpr)}">${actionIcon('m-trash', deleteExpr)}${loading(deleteExpr)}</button></div>` : ''}</div></td></tr>`);
         }
         const head = this._columns.map((column) => `<th scope="col"${column.getWidth() ? ` style="width: ${e(column.getWidth())};"` : ''}>${e(column.label)}</th>`).join('');
         const addExpr = expression('add', null);
         const label = await this.getLabel();
         const config = { statePath: this.getStatePath(), schemaComponent: key, moveUpAction: 'moveUp', moveDownAction: 'moveDown', reorderAction: 'reorder', message: tr('reordering.moved'), hasCustomReorderAction: false };
         const descriptions = keys.map((itemKey, index) => `<span class="fi-sr-only" data-reorder-description="${e(itemKey)}" data-reorder-label="${e(itemLabel)}" id="${e(descriptionId(itemKey))}">${e(tr('reordering.position', { label: itemLabel, position: String(index + 1), count: String(keys.length) }))}</span>`).join('');
-        const table = `<div aria-labelledby="${e(id)}-label" id="${e(id)}" role="group" data-reorder-owner="data-reorder-owner" data-reorder-items="${e(JSON.stringify(keys))}" x-load="x-load" x-load-src="${e(asset('repeater'))}" x-data="repeaterFormComponent(${e(js(config))})" class="fi-fo-table-repeater"><span wire:ignore x-ref="reorderStatus" class="fi-sr-only" role="status" aria-live="polite" aria-atomic="true"></span><table><thead><tr>${hasReorderColumn ? `<th scope="col" class="fi-fo-table-repeater-empty-header-cell"><span class="fi-sr-only">${e(tr('columns.reorder.label'))}</span></th>` : ''}${head}<th scope="col" class="fi-fo-table-repeater-empty-header-cell"><span class="fi-sr-only">${e(tr('columns.actions.label'))}</span></th></tr></thead><tbody x-sortable data-sortable-animation-duration="300" x-on:end.stop="reorder" x-ref="reorderItems">${rows.join('')}</tbody></table>${keys.length < this._maxItems ? `<div class="fi-fo-table-repeater-add"><button type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="fi-ac-btn-action fi-btn fi-size-sm" wire:click="${e(addExpr)}">${loadingIndicator(new Attributes({ 'wire:loading.delay.default': '', 'wire:target': addExpr }), 'sm')}${e(tr('actions.add.label', { label: label.toLowerCase() }))}</button></div>` : ''}${descriptions}</div>`;
+        const table = `<div aria-labelledby="${e(id)}-label" id="${e(id)}" role="group" data-reorder-owner="data-reorder-owner" data-reorder-items="${e(JSON.stringify(keys))}" x-load="x-load" x-load-src="${e(asset('repeater'))}" x-data="repeaterFormComponent(${e(js(config))})" class="fi-fo-table-repeater"><span wire:ignore x-ref="reorderStatus" class="fi-sr-only" role="status" aria-live="polite" aria-atomic="true"></span><table><thead><tr>${hasReorderColumn ? `<th scope="col" class="fi-fo-table-repeater-empty-header-cell"><span class="fi-sr-only">${e(tr('columns.reorder.label'))}</span></th>` : ''}${head}<th scope="col" class="fi-fo-table-repeater-empty-header-cell"><span class="fi-sr-only">${e(tr('columns.actions.label'))}</span></th></tr></thead><tbody x-sortable data-sortable-animation-duration="300" x-on:end.stop="reorder" x-ref="reorderItems">${rows.join('')}</tbody></table>${this._addable && keys.length < this._maxItems ? `<div class="fi-fo-table-repeater-add"><button type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="fi-ac-btn-action fi-btn fi-size-sm" wire:click="${e(addExpr)}">${loadingIndicator(new Attributes({ 'wire:loading.delay.default': '', 'wire:target': addExpr }), 'sm')}${e(this._addActionLabel ?? tr('actions.add.label', { label: label.toLowerCase() }))}</button></div>` : ''}${descriptions}</div>`;
         return this.wrap(table, { labelAsDiv: true });
     }
 }
-/** Native time input: the state is `HH:MM` with `seconds(false)`, `HH:MM:SS` otherwise. */
-export class TimePicker extends Field {
-    _seconds = true;
-    static make(name) { return configured(new TimePicker(name)); }
-    seconds(condition = true) { this._seconds = condition; return this; }
-    hydrateState(value) { return typeof value === 'string' && value.length >= 5 ? value.slice(value.length > 8 ? 11 : 0).slice(0, this._seconds ? 8 : 5) : value; }
-    async toHtml() {
-        const isDisabled = await this.isDisabled();
-        const input = new Attributes()
-            .merge({
-            'aria-invalid': this.hasError() ? 'true' : null, disabled: isDisabled, id: this.getId(),
-            required: (await this.isRequired()) && !isDisabled, step: this._seconds ? 1 : null, type: 'time', 'wire:model': this.getStatePath(),
-        })
-            .class(['fi-input']);
-        const wrapper = new Attributes()
-            .merge({ 'x-on:focus-input.stop': "$el.querySelector('input:not([type=hidden])')?.focus()" })
-            .class(['fi-fo-date-time-picker', 'fi-input-wrp', { 'fi-disabled': isDisabled, 'fi-invalid': this.hasError() }]);
-        return this.wrap(`<div ${wrapper.toHtml()}><div class="fi-input-wrp-content-ctn"><input ${input.toHtml()} /></div></div>`);
+/** PHP date format (`M j, Y H:i`) to day.js (`MMM D, YYYY HH:mm`), as Filament's `convert_date_format()`. Escaped characters (`\at`) become literals. */
+export function phpDateFormatToDayjs(format) {
+    const tokens = { d: 'DD', D: 'ddd', j: 'D', l: 'dddd', N: 'd', w: 'd', S: '', F: 'MMMM', m: 'MM', M: 'MMM', n: 'M', Y: 'YYYY', y: 'YY', a: 'a', A: 'A', g: 'h', G: 'H', h: 'hh', H: 'HH', i: 'mm', s: 'ss', v: 'SSS', e: 'z', T: 'z', P: 'Z', O: 'ZZ', U: 'X' };
+    let out = '';
+    for (let index = 0; index < format.length; index++) {
+        const char = format[index];
+        if (char === '\\' && index + 1 < format.length) {
+            out += `[${format[++index]}]`;
+            continue;
+        }
+        out += Object.hasOwn(tokens, char) ? tokens[char] : /[a-zA-Z]/.test(char) ? `[${char}]` : char;
     }
+    return out;
 }
-/** Native `datetime-local` input: the saved state is `YYYY-MM-DD HH:MM:SS`. */
-export class DateTimePicker extends Field {
+const pad = (n, size = 2) => String(n).padStart(size, '0');
+/** `YYYY-MM-DD HH:MM:SS` of a wall-clock time in a time zone, from a UTC instant. */
+function formatInZone(date, timeZone) {
+    const parts = Object.fromEntries(new Intl.DateTimeFormat('en-CA', { timeZone, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h23' }).formatToParts(date).map((part) => [part.type, part.value]));
+    return `${parts.year}-${parts.month}-${parts.day} ${parts.hour}:${parts.minute}:${parts.second}`;
+}
+/** UTC instant of a wall-clock `YYYY-MM-DD HH:MM:SS` in a time zone. */
+function zonedToUtc(value, timeZone) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})(?::(\d{2}))?/.exec(value);
+    if (!match)
+        return null;
+    const asUtc = Date.UTC(+match[1], +match[2] - 1, +match[3], +match[4], +match[5], +(match[6] ?? 0));
+    // Offset of the zone at that moment (twice, to settle around DST changes).
+    let guess = asUtc;
+    for (let i = 0; i < 2; i++) {
+        const shown = Date.parse(formatInZone(new Date(guess), timeZone).replace(' ', 'T') + 'Z');
+        guess = asUtc - (shown - guess);
+    }
+    return new Date(guess);
+}
+/** Normalizes a date-like value to `YYYY-MM-DD HH:MM:SS` (or null). */
+function normalizeDateTime(value) {
+    if (value instanceof Date)
+        return Number.isNaN(value.getTime()) ? null : `${value.getUTCFullYear()}-${pad(value.getUTCMonth() + 1)}-${pad(value.getUTCDate())} ${pad(value.getUTCHours())}:${pad(value.getUTCMinutes())}:${pad(value.getUTCSeconds())}`;
+    if (typeof value !== 'string' || value === '')
+        return null;
+    const match = /^(\d{4}-\d{2}-\d{2})(?:[ T](\d{2}):(\d{2})(?::(\d{2}))?)?/.exec(value);
+    if (match)
+        return `${match[1]} ${match[2] ?? '00'}:${match[3] ?? '00'}:${match[4] ?? '00'}`;
+    const time = /^(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(value);
+    return time ? `1970-01-01 ${time[1]}:${time[2]}:${time[3] ?? '00'}` : null;
+}
+/**
+ * Base of the date, time and date-time pickers: native browser input by default, or Filament's JavaScript picker with
+ * `native(false)` (display format, disabled dates, first day of the week, locale). Limits and disabled dates are checked on the server.
+ */
+class TemporalField extends Field {
     _seconds = true;
-    static make(name) { return configured(new DateTimePicker(name)); }
+    _native = true;
+    _maxDate = null;
+    _minDate = null;
+    _displayFormat = null;
+    _format = null;
+    _firstDayOfWeek = 1;
+    _disabledDates = [];
+    _closeOnDateSelection = false;
+    _locale = null;
+    _timezone = null;
+    _hoursStep = 1;
+    _minutesStep = 1;
+    _secondsStep = 1;
+    _defaultFocusedDate = null;
+    _temporalPlaceholder = null;
     seconds(condition = true) { this._seconds = condition; return this; }
-    dehydrateState(state) {
-        if (typeof state !== 'string' || state === '')
-            return state === '' ? null : state;
-        const value = state.replace('T', ' ');
-        return value.length === 16 ? `${value}:00` : value;
+    hasSeconds() { return this.hasTime() && this._seconds; }
+    /** `false`: Filament's JavaScript picker instead of the browser's native input. */
+    native(condition = true) { this._native = condition; return this; }
+    isNative() { return this._native; }
+    /** Display format of the JavaScript picker, in PHP's notation (`'d/m/Y'`, `'M j, Y H:i'`). */
+    displayFormat(format) { this._displayFormat = format; return this; }
+    /** Format of the saved value, in PHP's notation (`'Y-m-d'` by default for dates, `'Y-m-d H:i:s'` with a time). */
+    format(format) { this._format = format; return this; }
+    /** First day of the week in the JavaScript picker: 0 (Sunday) to 6. */
+    firstDayOfWeek(day) { this._firstDayOfWeek = Math.min(6, Math.max(0, Math.floor(day))); return this; }
+    weekStartsOnMonday() { return this.firstDayOfWeek(1); }
+    weekStartsOnSunday() { return this.firstDayOfWeek(0); }
+    /** Dates that cannot be picked (`YYYY-MM-DD`), also rejected on the server. */
+    disabledDates(dates) { this._disabledDates = dates; return this; }
+    closeOnDateSelection(condition = true) { this._closeOnDateSelection = condition; return this; }
+    /** Locale of the JavaScript picker's month and day names (`'fr'`). */
+    locale(locale) { this._locale = locale; return this; }
+    /** Shows and edits the value in this time zone, while it is saved in UTC (date-time pickers). */
+    timezone(timezone) { if (timezone !== null)
+        new Intl.DateTimeFormat('en', { timeZone: timezone }); this._timezone = timezone; return this; }
+    hoursStep(step) { this._hoursStep = step; return this; }
+    minutesStep(step) { this._minutesStep = step; return this; }
+    secondsStep(step) { this._secondsStep = step; return this; }
+    /** Date focused when the JavaScript picker opens on an empty field. */
+    defaultFocusedDate(date) { this._defaultFocusedDate = date; return this; }
+    placeholder(text) { this._temporalPlaceholder = text; return this; }
+    static resolveLimit(date) {
+        const day = (offset) => new Date(Date.now() + offset * 86400000).toISOString().slice(0, 10);
+        return date === 'today' ? day(0) : date === 'tomorrow' ? day(1) : date === 'yesterday' ? day(-1) : date;
+    }
+    async limit(date) { const value = await evaluate(date, this.context()); return value ? TemporalField.resolveLimit(String(value)) : null; }
+    /** Latest accepted date: `'today'`, a date, or a context function (`({ get }) => get('ends_at')`). */
+    maxDate(date) {
+        this._maxDate = date;
+        return this.rule({ name: 'before_or_equal', passes: async (v) => { const max = await this.limit(date); return max === null || this.comparable(v) <= this.comparable(max); }, message: (a) => `The ${a} field must be a date before or equal to ${typeof date === 'string' ? date : 'the maximum date'}.` });
+    }
+    minDate(date) {
+        this._minDate = date;
+        return this.rule({ name: 'after_or_equal', passes: async (v) => { const min = await this.limit(date); return min === null || this.comparable(v) >= this.comparable(min); }, message: (a) => `The ${a} field must be a date after or equal to ${typeof date === 'string' ? date : 'the minimum date'}.` });
+    }
+    /** Comparable string of a value: the date only for date pickers, the time only for time pickers. */
+    comparable(value) {
+        const normalized = normalizeDateTime(this.toUtc(value)) ?? String(value);
+        if (!this.hasTime())
+            return normalized.slice(0, 10);
+        if (!this.hasDate())
+            return normalized.slice(11, this._seconds ? 19 : 16);
+        return normalized;
     }
+    async getValidationRules() {
+        const rules = await super.getValidationRules();
+        if (!this.hasDate())
+            return rules;
+        return [...rules,
+            { name: 'date', passes: (v) => normalizeDateTime(v) !== null && !Number.isNaN(Date.parse(normalizeDateTime(v).replace(' ', 'T') + 'Z')), message: (a) => `The ${a} field must be a valid date.` },
+            { name: 'not_in', passes: async (v) => { const disabled = (await evaluate(this._disabledDates, this.context())) ?? []; return !disabled.includes(String(normalizeDateTime(this.toUtc(v)) ?? '').slice(0, 10)); }, message: (a) => `The selected ${a} is invalid.` },];
+    }
+    /** Record value to form state, shown in the field's time zone. */
+    hydrateState(value) {
+        const normalized = normalizeDateTime(value);
+        if (normalized === null)
+            return value === undefined ? null : value === '' ? null : typeof value === 'string' ? value : null;
+        let local = normalized;
+        if (this._timezone && this.hasDate() && this.hasTime())
+            local = formatInZone(new Date(normalized.replace(' ', 'T') + 'Z'), this._timezone);
+        return this.stateOf(local);
+    }
+    /** Form state as the input expects it. */
+    stateOf(local) {
+        if (!this._native)
+            return this.hasDate() ? local : `${new Date().toISOString().slice(0, 10)} ${local.slice(11)}`;
+        if (!this.hasTime())
+            return local.slice(0, 10);
+        if (!this.hasDate())
+            return local.slice(11, this._seconds ? 19 : 16);
+        return local.slice(0, this._seconds ? 19 : 16);
+    }
+    /** Wall-clock value of the field's time zone to UTC. */
+    toUtc(value) {
+        if (!this._timezone || !this.hasDate() || !this.hasTime() || typeof value !== 'string')
+            return value;
+        const instant = zonedToUtc(value, this._timezone);
+        return instant ? normalizeDateTime(instant) : value;
+    }
+    /** Saved value: in UTC, in `format()` (or the default format). */
+    dehydrateState(state) {
+        if (state === '' || state === null || state === undefined)
+            return null;
+        const normalized = normalizeDateTime(this.toUtc(typeof state === 'string' ? state.replace('T', ' ') : state));
+        if (normalized === null)
+            return state;
+        if (this._format)
+            return formatPhpDate(normalized, this._format);
+        if (!this.hasTime())
+            return normalized.slice(0, 10);
+        if (!this.hasDate())
+            return normalized.slice(11, this._seconds ? 19 : 16);
+        return normalized;
+    }
+    defaultDisplayFormat() {
+        if (!this.hasTime())
+            return 'M j, Y';
+        const time = this._seconds ? 'H:i:s' : 'H:i';
+        return this.hasDate() ? `M j, Y ${time}` : time;
+    }
+    nativeType() { return !this.hasTime() ? 'date' : !this.hasDate() ? 'time' : 'datetime-local'; }
     async toHtml() {
         const isDisabled = await this.isDisabled();
-        const input = new Attributes()
-            .merge({
-            'aria-invalid': this.hasError() ? 'true' : null, disabled: isDisabled, id: this.getId(),
-            required: (await this.isRequired()) && !isDisabled, step: this._seconds ? 1 : null, type: 'datetime-local', 'wire:model': this.getStatePath(),
-        })
-            .class(['fi-input']);
+        const min = await this.limit(this._minDate), max = await this.limit(this._maxDate);
         const wrapper = new Attributes()
             .merge({ 'x-on:focus-input.stop': "$el.querySelector('input:not([type=hidden])')?.focus()" })
             .class(['fi-fo-date-time-picker', 'fi-input-wrp', { 'fi-disabled': isDisabled, 'fi-invalid': this.hasError() }]);
-        return this.wrap(`<div ${wrapper.toHtml()}><div class="fi-input-wrp-content-ctn"><input ${input.toHtml()} /></div></div>`);
+        const model = this.wireModel();
+        if (this._native) {
+            const limit = (value) => (value === null ? null : !this.hasTime() ? value.slice(0, 10) : !this.hasDate() ? (value.length > 8 ? value.slice(11) : value) : value.replace(' ', 'T'));
+            const input = new Attributes()
+                .merge({
+                'aria-invalid': this.hasError() ? 'true' : null, disabled: isDisabled, id: this.getId(),
+                max: limit(max), min: limit(min), placeholder: this._temporalPlaceholder,
+                required: (await this.isRequired()) && !isDisabled, step: this.hasTime() && this._seconds ? 1 : null, type: this.nativeType(), [model]: this.getStatePath(),
+            })
+                .class(['fi-input']);
+            return this.wrap(`<div ${wrapper.toHtml()}><div class="fi-input-wrp-content-ctn"><input ${input.toHtml()} /></div></div>`);
+        }
+        const id = this.getId();
+        const hasDate = this.hasDate(), hasTime = this.hasTime(), hasSeconds = this.hasSeconds();
+        const disabledDates = (await evaluate(this._disabledDates, this.context())) ?? [];
+        const jsLimit = (value) => (value === null ? '' : normalizeDateTime(value.length <= 8 ? `1970-01-01 ${value}` : value) ?? value);
+        const livewireKey = this.getLivewireKey() ?? '';
+        const label = await this.getLabel();
+        const tr = (key) => t(`filament-forms::components.date_time_picker.${key}`);
+        const describedBy = [this.getHelperTextId(), this.hasError() ? `${id}-error` : null].filter(Boolean).join(' ') || null;
+        const trigger = new Attributes().merge({ 'aria-describedby': describedBy, 'aria-invalid': this.hasError() ? 'true' : null, 'aria-controls': `${id}-panel`, 'aria-expanded': 'false', 'aria-haspopup': 'dialog', disabled: isDisabled, id, placeholder: this._temporalPlaceholder, role: 'combobox', type: 'text' }).class(['fi-fo-date-time-picker-trigger', 'fi-fo-date-time-picker-display-text-input']);
+        const config = `dateTimePickerFormComponent({
+ defaultFocusedDate: ${js(this._defaultFocusedDate)},
+ displayFormat: ${js(phpDateFormatToDayjs(this._displayFormat ?? this.defaultDisplayFormat()))},
+ firstDayOfWeek: ${this._firstDayOfWeek},
+ hasDate: ${hasDate ? 'true' : 'false'},
+ isAutofocused: ${this._autofocus && !isDisabled ? 'true' : 'false'},
+ locale: ${js(this._locale ?? 'en')},
+ shouldCloseOnDateSelection: ${this._closeOnDateSelection ? 'true' : 'false'},
+ state: $wire.$entangle(${js(this.getStatePath())}${this.isLive() ? ', true' : ''}),
+ })`;
+        const keyHash = createHash('md5').update(JSON.stringify([disabledDates, isDisabled, max, min, hasDate, hasTime, hasSeconds])).digest('hex');
+        const events = hasDate
+            ? ` x-on:dropdown-escape="if (isOpen()) { closePanel(true); $event.preventDefault() }" x-on:focusout="handleFocusOut($event)" x-on:keydown.escape="if (isOpen()) { $event.preventDefault(); $event.stopPropagation(); closePanel(true) }" x-on:click.outside="isOpen() &amp;&amp; closePanel()" x-on:livewire:navigating.window="closePanel()"`
+            : ` x-on:dropdown-escape="if (isOpen()) { $refs.panel.close(); $refs.button.focus(); $event.preventDefault() }" x-on:focusout="if (isOpen() &amp;&amp; ! $el.contains($event.relatedTarget)) $refs.panel.close()" x-on:keydown.esc="isOpen() &amp;&amp; $event.stopPropagation()"`;
+        const buttonEvents = isDisabled ? (!hasDate ? ' x-on:keydown.enter.prevent.stop="if (false) { isOpen() ? selectDate() : togglePanelVisibility() }"' : '') : [
+            !hasDate ? ' x-on:keydown.enter.prevent.stop="if (true) { isOpen() ? selectDate() : togglePanelVisibility() }"' : '',
+            ' x-on:click="togglePanelVisibility()"',
+            hasDate ? ' x-on:keydown="handleTriggerKeydown($event)" x-bind:aria-expanded="isPanelOpen.toString()"' : ' x-on:keydown.arrow-left.prevent.stop="focusPreviousDay()" x-on:keydown.arrow-right.prevent.stop="focusNextDay()" x-on:keydown.arrow-up.prevent.stop="focusPreviousWeek()" x-on:keydown.arrow-down.prevent.stop="focusNextWeek()"',
+            ' x-on:keydown.backspace.prevent.stop="clearState()" x-on:keydown.clear.prevent.stop="clearState()" x-on:keydown.delete.prevent.stop="clearState()"',
+        ].join('');
+        const calendar = hasDate ? `<div class="fi-fo-date-time-picker-panel-header"><select aria-label="${e(tr('month_select.label'))}" x-model="focusedMonth" class="fi-fo-date-time-picker-month-select"><template x-for="(month, index) in months"><option x-bind:value="index" x-text="month"></option></template></select><input type="number" inputmode="numeric" aria-label="${e(tr('year_input.label'))}" x-model.debounce="focusedYear" class="fi-fo-date-time-picker-year-input" /></div><div aria-live="polite" aria-atomic="true" x-text="getCalendarLabel()" class="fi-fo-date-time-picker-calendar-description"></div><div x-ref="calendar" role="grid" tabindex="-1" x-bind:aria-label="getCalendarLabel()" x-on:keydown="handleCalendarKeydown($event)" class="fi-fo-date-time-picker-calendar"><div role="row" class="fi-fo-date-time-picker-calendar-header"><template x-for="(day, index) in dayLabels" x-bind:key="index"><div role="columnheader" x-bind:aria-label="fullDayLabels[index]" x-text="day" class="fi-fo-date-time-picker-calendar-header-day"></div></template></div><template x-for="(week, weekIndex) in weeksInFocusedMonth" x-bind:key="weekIndex"><div role="row" class="fi-fo-date-time-picker-calendar-week"><template x-for="(day, dayIndex) in week" x-bind:key="day ?? ('empty-' + dayIndex)"><div role="gridcell" x-text="day" x-bind:data-date="day ? focusedDate.date(day).format('YYYY-MM-DD') : null" x-bind:aria-label="day ? getDayLabel(day) : null" x-bind:aria-selected="day &amp;&amp; dayIsSelected(day) ? 'true' : 'false'" x-bind:aria-current="day &amp;&amp; dayIsToday(day) ? 'date' : null" x-bind:aria-disabled="day &amp;&amp; dayIsDisabled(day) ? 'true' : 'false'" x-bind:tabindex="day ? (focusedDate.date() === day ? 0 : -1) : null" x-on:focus="day &amp;&amp; setFocusedDay(day)" x-on:click="if (day) { $el.focus(); selectDate(day) }" x-bind:class="{ 'fi-fo-date-time-picker-calendar-day': day, 'fi-fo-date-time-picker-calendar-day-today': day &amp;&amp; dayIsToday(day), 'fi-focused': day &amp;&amp; focusedDate.date() === day, 'fi-selected': day &amp;&amp; dayIsSelected(day), 'fi-disabled': day &amp;&amp; dayIsDisabled(day) }"></div></template></div></template></div>` : '';
+        const timeInput = (max, step, label, model) => `<input max="${max}" min="0" step="${step}" type="number" inputmode="numeric" aria-label="${e(label)}" x-on:blur="checkTimeInputValidity" x-on:invalid="timeInputInvalid" x-model.debounce="${model}" />`;
+        const time = hasTime ? `<div class="fi-fo-date-time-picker-time-inputs">${timeInput(23, this._hoursStep, tr('hour_input.label'), 'hour')}<span class="fi-fo-date-time-picker-time-input-separator">:</span>${timeInput(59, this._minutesStep, tr('minute_input.label'), 'minute')}${hasSeconds ? `<span class="fi-fo-date-time-picker-time-input-separator">:</span>${timeInput(59, this._secondsStep, tr('second_input.label'), 'second')}` : ''}</div>` : '';
+        const picker = `<div hidden data-field-accessibility${describedBy ? ` aria-describedby="${e(describedBy)}"` : ''}${this.hasError() ? ' aria-invalid="true"' : ''}></div><div x-load x-load-src="${e(asset('date-time-picker'))}" x-data="${e(config)}" wire:ignore wire:key="${e(livewireKey)}.${keyHash}"${events}><input x-ref="maxDate" type="hidden" value="${e(jsLimit(max))}" /><input x-ref="minDate" type="hidden" value="${e(jsLimit(min))}" /><input x-ref="disabledDates" type="hidden" value="${e(JSON.stringify(disabledDates))}" /><input x-ref="button"${buttonEvents} readonly wire:key="${e(livewireKey)}.display-text" x-model="displayText" ${trigger.toHtml()} /><div x-ref="panel" id="${e(id)}-panel" role="dialog" aria-label="${e(label)}" x-cloak${hasDate ? ' x-show="isPanelOpen"' : ' x-float.placement.bottom-start.offset.flip.shift="{ offset: 8 }"'} wire:ignore wire:key="${e(livewireKey)}.panel" class="fi-fo-date-time-picker-panel">${calendar}${time}</div></div>`;
+        return this.wrap(`<div ${wrapper.toHtml()}><div class="fi-input-wrp-content-ctn">${picker}</div></div>`);
+    }
+}
+/** Formats `YYYY-MM-DD HH:MM:SS` with a PHP date format (the usual tokens). */
+function formatPhpDate(value, format) {
+    const [date, time] = value.split(' ');
+    const [year, month, day] = date.split('-').map(Number);
+    const [hour, minute, second] = (time ?? '00:00:00').split(':').map(Number);
+    const tokens = {
+        Y: () => String(year), y: () => pad(year % 100), m: () => pad(month), n: () => String(month), d: () => pad(day), j: () => String(day),
+        H: () => pad(hour), G: () => String(hour), h: () => pad(hour % 12 || 12), g: () => String(hour % 12 || 12), i: () => pad(minute), s: () => pad(second),
+        A: () => (hour < 12 ? 'AM' : 'PM'), a: () => (hour < 12 ? 'am' : 'pm'), U: () => String(Date.UTC(year, month - 1, day, hour, minute, second) / 1000),
+    };
+    let out = '';
+    for (let index = 0; index < format.length; index++) {
+        const char = format[index];
+        if (char === '\\' && index + 1 < format.length) {
+            out += format[++index];
+            continue;
+        }
+        out += Object.hasOwn(tokens, char) ? tokens[char]() : char;
     }
+    return out;
+}
+/** Date picker: native `<input type="date">` by default; the saved state is `YYYY-MM-DD`. */
+export class DatePicker extends TemporalField {
+    static make(name) { return configured(new DatePicker(name)); }
+    hasDate() { return true; }
+    hasTime() { return false; }
+}
+/** Time picker: native `<input type="time">` by default; the state is `HH:MM:SS` (`HH:MM` with `seconds(false)`). */
+export class TimePicker extends TemporalField {
+    static make(name) { return configured(new TimePicker(name)); }
+    hasDate() { return false; }
+    hasTime() { return true; }
+}
+/** Date-time picker: native `datetime-local` input by default; the saved state is `YYYY-MM-DD HH:MM:SS`. */
+export class DateTimePicker extends TemporalField {
+    static make(name) { return configured(new DateTimePicker(name)); }
+    hasDate() { return true; }
+    hasTime() { return true; }
 }
 /** Single choice as radio buttons. */
 export class Radio extends Field {
@@ -771,8 +1608,16 @@ export class Radio extends Field {
     /** Options side by side. */
     inline(condition = true) { this._inline = condition; return this; }
     live(condition = true) { this._live = condition; return this; }
+    _disableOptionWhen = null;
+    /** Options that cannot be picked; they are refused on the server too. */
+    disableOptionWhen(condition) { this._disableOptionWhen = condition; return this; }
+    isOptionDisabled(value, label) { return this._disableOptionWhen ? this._disableOptionWhen(value, label) : false; }
+    /** "Yes" (`1`) and "No" (`0`) options. */
+    boolean(trueLabel = null, falseLabel = null) {
+        return this.options([['1', trueLabel ?? t('filament-forms::components.radio.boolean.true')], ['0', falseLabel ?? t('filament-forms::components.radio.boolean.false')]]);
+    }
     async getValidationRules() {
-        return [...(await super.getValidationRules()), { name: 'in', passes: (v) => this._options.some(([value]) => value === String(v)), message: (a) => `The selected ${a} is invalid.` }];
+        return [...(await super.getValidationRules()), { name: 'in', passes: (v) => this._options.some(([value, label]) => value === String(v) && !this.isOptionDisabled(value, label)), message: (a) => `The selected ${a} is invalid.` }];
     }
     async toHtml() {
         const id = this.getId();
@@ -783,7 +1628,7 @@ export class Radio extends Field {
             .class(['fi-fo-radio', this._inline ? 'fi-inline' : null]);
         const items = this._options.map(([value, label]) => {
             const input = new Attributes()
-                .merge({ type: 'radio', disabled: isDisabled, id: `${id}-${value}`, name: id, required: isRequired, value, [this._live ? 'wire:model.live' : 'wire:model']: this.getStatePath() })
+                .merge({ type: 'radio', disabled: isDisabled || this.isOptionDisabled(value, label), id: `${id}-${value}`, name: id, required: isRequired, value, [this._live ? 'wire:model.live' : 'wire:model']: this.getStatePath() })
                 .class(['fi-radio-input', this.hasError() ? 'fi-invalid' : 'fi-valid']);
             const description = this._descriptions[value] ? `<p class="fi-fo-radio-label-description">${e(this._descriptions[value])}</p>` : '';
             return `<label class="fi-fo-radio-label"><input ${input.toHtml()} /><div class="fi-fo-radio-label-text"><p>${e(label)}</p>${description}</div></label>`;
@@ -797,18 +1642,40 @@ export class Textarea extends Field {
     static make(name) { return configured(new Textarea(name)); }
     rows(rows) { this._rows = rows; return this; }
     maxLength(length) { this._maxLength = length; return this.rule({ name: 'max', passes: (v) => String(v).length <= length, message: (a) => `The ${a} field must not be greater than ${length} characters.` }); }
+    _minLength = null;
+    _placeholder = null;
+    _readOnly = false;
+    _autosize = false;
+    _grammarly = true;
+    _trim = false;
+    minLength(length) { this._minLength = length; return this.rule({ name: 'min', passes: (v) => String(v).length >= length, message: (a) => `The ${a} field must be at least ${length} characters.` }); }
+    /** Exact length. */
+    length(length) { this.minLength(length); return this.maxLength(length); }
+    placeholder(text) { this._placeholder = text; return this; }
+    readOnly(condition = true) { this._readOnly = condition; return this; }
+    /** The textarea grows with its content. */
+    autosize(condition = true) { this._autosize = condition; return this; }
+    /** Stops the Grammarly extension from analyzing the content. */
+    disableGrammarly(condition = true) { this._grammarly = !condition; return this; }
+    /** Removes the spaces around the value before it is validated and saved. */
+    trim(condition = true) { this._trim = condition; return this; }
+    hydrateState(value) { return this._trim && typeof value === 'string' ? value.trim() : value; }
+    /** `trim()`: the submitted value is trimmed before it is validated and saved. */
+    stateForValidation(state) { return this._trim && typeof state === 'string' ? state.trim() : state; }
+    dehydrateState(state) { return this._trim && typeof state === 'string' ? state.trim() : state; }
     async toHtml() {
         const isDisabled = await this.isDisabled();
         // Initial height: 1.5rem per row plus padding.
         const height = (this._rows ?? 2) * 1.5 + 0.75;
         const textarea = new Attributes().merge({
-            'aria-invalid': this.hasError() ? 'true' : null, disabled: isDisabled, id: this.getId(), maxlength: this._maxLength,
-            required: (await this.isRequired()) && !isDisabled, rows: this._rows, 'wire:model': this.getStatePath(),
+            'aria-invalid': this.hasError() ? 'true' : null, 'data-gramm': this._grammarly ? null : 'false', 'data-gramm_editor': this._grammarly ? null : 'false', 'data-enable-grammarly': this._grammarly ? null : 'false',
+            disabled: isDisabled, id: this.getId(), maxlength: this._maxLength, minlength: this._minLength, placeholder: this._placeholder, readonly: this._readOnly,
+            required: (await this.isRequired()) && !isDisabled && !this._readOnly, rows: this._rows, [this.wireModel()]: this.getStatePath(),
         });
         const wrapper = new Attributes().class(['fi-fo-textarea', 'fi-input-wrp', { 'fi-disabled': isDisabled, 'fi-invalid': this.hasError() }]);
         return this.wrap(`<div ${wrapper.toHtml()}><div class="fi-input-wrp-content-ctn"><div wire:ignore.self${height !== null ? ` style="height: ${height}rem"` : ''}><textarea x-load x-load-src="${e(asset('textarea'))}" x-data="textareaFormComponent({
  initialHeight: ${height ?? 'null'},
- shouldAutosize: false,
+ shouldAutosize: ${this._autosize ? 'true' : 'false'},
  state: $wire.$entangle(${e(js(this.getStatePath()))}),
  })" x-model="state" ${textarea.toHtml()}></textarea></div></div></div>`, { wrapperClass: 'fi-fo-textarea-wrp' });
     }
@@ -824,9 +1691,28 @@ export class TagsInput extends Field {
     suggestions(suggestions) { this._suggestions = suggestions.map(String).slice(0, 1000); return this; }
     /** Keys that confirm the current tag, besides Enter (`['Tab', ',']`). */
     splitKeys(keys) { this._splitKeys = keys; return this; }
+    _separator = null;
+    _tagPrefix = null;
+    _tagSuffix = null;
+    _reorderable = false;
+    _tagColor = null;
+    _tagRules = [];
+    /** Saves the tags as one string joined with this separator (`'a,b,c'`) instead of a list. */
+    separator(separator = ',') { this._separator = separator; return this; }
+    /** Text shown before / after each tag (not saved). */
+    tagPrefix(prefix) { this._tagPrefix = prefix; return this; }
+    tagSuffix(suffix) { this._tagSuffix = suffix; return this; }
+    /** Tags can be reordered by dragging. */
+    reorderable(condition = true) { this._reorderable = condition; return this; }
+    /** Badge color of the tags (`primary` by default). */
+    color(color) { this._tagColor = color; return this; }
+    /** Rules applied to each tag (e.g. a maximum length); the message names the tag. */
+    nestedRecursiveRules(rules) { this._tagRules = rules.map((rule) => (typeof rule === 'string' ? stringRule(rule, { numeric: false, name: this._name ?? '' }) : rule)).filter((rule) => rule !== null); return this; }
     getDefaultState() { return this._default ?? []; }
     hydrateState(value) {
-        if (typeof value === 'string') {
+        if (typeof value === 'string' && this._separator !== null)
+            value = value === '' ? [] : value.split(this._separator);
+        else if (typeof value === 'string') {
             try {
                 value = JSON.parse(value);
             }
@@ -834,10 +1720,23 @@ export class TagsInput extends Field {
                 value = value === '' ? [] : [value];
             }
         }
-        return Array.isArray(value) ? value.filter((tag) => typeof tag === 'string' || typeof tag === 'number').map(String) : [];
+        return Array.isArray(value) ? value.filter((tag) => typeof tag === 'string' || typeof tag === 'number').map((tag) => String(tag).trim()).filter((tag) => tag !== '') : [];
+    }
+    /** Only non-empty strings are saved, whatever shape the browser sends (joined with the separator, if any). */
+    dehydrateState(state) {
+        const tags = (Array.isArray(state) ? state : []).filter((tag) => typeof tag === 'string' || typeof tag === 'number').map((tag) => String(tag).trim()).filter((tag) => tag !== '').slice(0, 1000);
+        return this._separator !== null ? tags.join(this._separator) : tags;
+    }
+    async getValidationRules() {
+        if (!this._tagRules.length)
+            return super.getValidationRules();
+        return [...(await super.getValidationRules()), ...this._tagRules.map((rule) => ({
+                ...rule,
+                passes: async (value, ctx) => { for (const tag of Array.isArray(value) ? value : [])
+                    if (!(await rule.passes(tag, ctx)))
+                        return false; return true; },
+            }))];
     }
-    /** Only non-empty strings are saved, whatever shape the browser sends. */
-    dehydrateState(state) { return (Array.isArray(state) ? state : []).filter((tag) => typeof tag === 'string' || typeof tag === 'number').map((tag) => String(tag).trim()).filter((tag) => tag !== '').slice(0, 1000); }
     async toHtml() {
         if (!colorManager)
             throw new Error('No color manager: call useColorManager().');
@@ -850,14 +1749,15 @@ export class TagsInput extends Field {
         const input = new Attributes()
             .merge({ autocomplete: 'off', disabled: isDisabled, id, list: `${id}-suggestions`, placeholder: this._placeholder ?? t('filament-forms::components.tags_input.placeholder'), type: 'text', 'x-bind': 'input' })
             .class(['fi-input']);
-        const badge = ['fi-badge', 'fi-size-md', ...colorManager.getComponentClasses('badge', 'primary')].join(' ');
+        const badge = ['fi-badge', 'fi-size-md', ...colorManager.getComponentClasses('badge', this._tagColor ?? 'primary'), this._reorderable && !isDisabled ? 'fi-reorderable' : null].filter(Boolean).join(' ');
+        const reorderable = this._reorderable && !isDisabled;
         const deleteButton = isDisabled ? '' : `<button type="button" x-on:click.stop="deleteTag(tag)" x-bind:aria-label="'${e(t('filament-forms::components.tags_input.actions.delete.label'))}: ' + tag" class="fi-badge-delete-btn"><span aria-hidden="true" class="fi-badge-delete-btn-icon"></span></button>`;
         return this.wrap(`<div ${wrapper.toHtml()}><div class="fi-input-wrp-content-ctn"><div x-load x-load-src="${e(asset('tags-input'))}" x-data="tagsInputFormComponent({
                     state: $wire.$entangle(${e(js(this.getStatePath()))}, false),
                     splitKeys: ${this._splitKeys.length ? e(js(this._splitKeys)) : '[]'},
                     tagAddedMessage: ${e(js(t('filament-forms::components.tags_input.tag_added')))},
                     tagRemovedMessage: ${e(js(t('filament-forms::components.tags_input.tag_removed')))},
-                })"><input ${input.toHtml()} /><div x-ref="liveRegion" aria-live="polite" class="fi-sr-only"></div><datalist id="${e(id)}-suggestions">${this._suggestions.map((s) => `<template x-bind:key="${e(js(s))}" x-if="! (state?.includes(${e(js(s))}) ?? true)"><option value="${e(s)}" /></template>`).join('')}</datalist><div wire:ignore wire:key="${e(this.getLivewireKey() ?? '')}.${createHash('md5').update(JSON.stringify(this.context().state ?? [])).digest('hex')}"><template x-cloak x-if="state?.length"><div class="fi-fo-tags-input-tags-ctn"><template x-for="(tag, index) in state" x-bind:key="\`\${tag}-\${index}\`"><span class="${badge}"><span class="fi-badge-label-ctn"><span class="fi-badge-label"><span x-text="tag"></span></span></span>${deleteButton}</span></template></div></template></div></div></div></div>`, { wrapperClass: 'fi-fo-tags-input-wrp' });
+                })"><input ${input.toHtml()} /><div x-ref="liveRegion" aria-live="polite" class="fi-sr-only"></div><datalist id="${e(id)}-suggestions">${this._suggestions.map((s) => `<template x-bind:key="${e(js(s))}" x-if="! (state?.includes(${e(js(s))}) ?? true)"><option value="${e(s)}" /></template>`).join('')}</datalist><div wire:ignore wire:key="${e(this.getLivewireKey() ?? '')}.${createHash('md5').update(JSON.stringify(this.context().state ?? [])).digest('hex')}"><template x-cloak x-if="state?.length"><div${reorderable ? ' x-on:end.stop="reorderTags($event)" x-sortable data-sortable-animation-duration="300"' : ''} class="fi-fo-tags-input-tags-ctn"><template x-for="(tag, index) in state" x-bind:key="\`\${tag}-\${index}\`"><span${reorderable ? ' x-bind:x-sortable-item="index" x-sortable-handle' : ''} class="${badge}"><span class="fi-badge-label-ctn"><span class="fi-badge-label">${e(this._tagPrefix ?? '')}<span x-text="tag"></span>${e(this._tagSuffix ?? '')}</span></span>${deleteButton}</span></template></div></template></div></div></div></div>`, { wrapperClass: 'fi-fo-tags-input-wrp' });
     }
 }
 /** On/off switch. */
@@ -865,14 +1765,32 @@ export class Toggle extends Field {
     static make(name) { return configured(new Toggle(name)); }
     getDefaultState() { return this._default ?? false; }
     hydrateState(value) { return value === true || value === 1 || value === '1'; }
+    _onIcon = null;
+    _offIcon = null;
+    _onColor = null;
+    _offColor = null;
+    _inline = true;
+    /** Icons inside the switch's knob. */
+    onIcon(icon) { this._onIcon = icon; return this; }
+    offIcon(icon) { this._offIcon = icon; return this; }
+    /** Colors when on (`primary` by default) and off (`gray`). */
+    onColor(color) { this._onColor = color; return this; }
+    offColor(color) { this._offColor = color; return this; }
+    /** `false`: the label goes above the switch instead of beside it. */
+    inline(condition = true) { this._inline = condition; return this; }
     async toHtml() {
         if (!colorManager)
             throw new Error('No color manager: call useColorManager().');
         const on = this.context().state === true;
-        const colors = colorManager.getComponentClasses('toggle', 'primary').join(' ');
+        const colors = colorManager.getComponentClasses('toggle', this._onColor ?? 'primary').join(' ');
+        const offColors = this._offColor && this._offColor !== 'gray' ? ` ${colorManager.getComponentClasses('toggle', this._offColor).join(' ')}` : '';
+        const onIconHtml = this._onIcon ? icon(this._onIcon, { size: 'xs' }) : '';
+        const offIconHtml = this._offIcon ? icon(this._offIcon, { size: 'xs' }) : '';
         const button = new Attributes().merge({ 'aria-describedby': this.getHelperTextId(), 'aria-checked': on ? 'true' : 'false', disabled: await this.isDisabled(), id: this.getId(), 'wire:target': this.getStatePath() }).class(['fi-fo-toggle', 'fi-toggle']);
-        const knob = '<div><div aria-hidden="true"></div><div aria-hidden="true"></div></div>';
-        return this.wrap('', { labelPrefix: `<button x-data="{ state: $wire.$entangle(${e(js(this.getStatePath()))}, false) }" x-bind:aria-checked="state ? 'true' : 'false'" x-on:click="state = ! state" x-bind:class="state ? 'fi-toggle-on ${colors}' : 'fi-toggle-off'"${on ? ' x-cloak' : ''} role="switch" type="button" ${button.toHtml()}>${knob}</button>${on ? `<div x-cloak="inline-flex" wire:ignore wire:key="${e(this.getLivewireKey() ?? '')}.placeholder" class="fi-toggle fi-toggle-on fi-hidden ${colors}">${knob}</div>` : ''}` });
+        const knob = `<div><div aria-hidden="true">${offIconHtml}</div><div aria-hidden="true">${onIconHtml}</div></div>`;
+        const placeholderKnob = `<div><div aria-hidden="true"></div><div aria-hidden="true">${onIconHtml}</div></div>`;
+        const control = `<button x-data="{ state: $wire.$entangle(${e(js(this.getStatePath()))}, ${this.isLive() ? 'true' : 'false'}) }" x-bind:aria-checked="state ? 'true' : 'false'" x-on:click="state = ! state" x-bind:class="state ? 'fi-toggle-on ${colors}' : 'fi-toggle-off${offColors}'"${on ? ' x-cloak' : ''} role="switch" type="button" ${button.toHtml()}>${knob}</button>${on ? `<div x-cloak="inline-flex" wire:ignore wire:key="${e(this.getLivewireKey() ?? '')}.placeholder" class="fi-toggle fi-toggle-on fi-hidden ${colors}">${placeholderKnob}</div>` : ''}`;
+        return this._inline ? this.wrap('', { labelPrefix: control }) : this.wrap(control);
     }
 }
 /** Single choice shown as buttons. */
@@ -895,8 +1813,59 @@ export class ToggleButtons extends Field {
     inline(condition = true) { this._inline = condition; return this; }
     /** Buttons joined into a single group. */
     grouped(condition = true) { this._grouped = condition; return this; }
+    _multiple = false;
+    _tooltips = {};
+    _size = null;
+    _labelsHidden = false;
+    _fullWidth = false;
+    _columns = null;
+    _disableOptionWhen = null;
+    /** Several buttons can be selected: the state is a list of values. */
+    multiple(condition = true) { this._multiple = condition; return this; }
+    /** Tooltip per value. */
+    tooltips(tooltips) { this._tooltips = tooltips; return this; }
+    /** Button size: `xs`, `sm`, `md` (default), `lg` or `xl`. */
+    size(size) { this._size = size; return this; }
+    /** Icons only: the labels stay for screen readers. */
+    hiddenButtonLabels(condition = true) { this._labelsHidden = condition; return this; }
+    /** Buttons stretch to the width of the field. */
+    fullWidth(condition = true) { this._fullWidth = condition; return this; }
+    /** Number of columns the buttons are spread over (from `lg`), when not inline. */
+    columns(columns) { this._columns = columns; return this; }
+    /** Options that cannot be selected; they are refused on the server too. */
+    disableOptionWhen(condition) { this._disableOptionWhen = condition; return this; }
+    isOptionDisabled(value, label) { return this._disableOptionWhen ? this._disableOptionWhen(value, label) : false; }
+    /** "Yes" (`1`) and "No" (`0`) buttons, green and red, with check and cross icons. */
+    boolean(trueLabel = null, falseLabel = null) {
+        this.options([['1', trueLabel ?? t('filament-forms::components.toggle_buttons.boolean.true')], ['0', falseLabel ?? t('filament-forms::components.toggle_buttons.boolean.false')]]);
+        this._colors = { 1: 'success', 0: 'danger', ...this._colors };
+        this._icons = { 1: 'o-check', 0: 'o-x-mark', ...this._icons };
+        return this;
+    }
+    getDefaultState() { return this._default ?? (this._multiple ? [] : null); }
+    hydrateState(value) {
+        if (!this._multiple)
+            return value;
+        if (typeof value === 'string') {
+            try {
+                value = JSON.parse(value);
+            }
+            catch {
+                value = value === '' ? [] : [value];
+            }
+        }
+        return (Array.isArray(value) ? value : []).map(String);
+    }
+    /** Multiple: only offered values, in option order. */
+    dehydrateState(state) {
+        if (!this._multiple)
+            return state;
+        const chosen = new Set((Array.isArray(state) ? state : []).map(String));
+        return this._options.map(([value]) => value).filter((value) => chosen.has(value));
+    }
     async getValidationRules() {
-        return [...(await super.getValidationRules()), { name: 'in', passes: (v) => this._options.some(([value]) => value === String(v)), message: (a) => `The selected ${a} is invalid.` }];
+        const allowed = (v) => this._options.some(([value, label]) => value === String(v) && !this.isOptionDisabled(value, label));
+        return [...(await super.getValidationRules()), { name: 'in', passes: (v) => (this._multiple ? Array.isArray(v) && v.every(allowed) : allowed(v)), message: (a) => `The selected ${a} is invalid.` }];
     }
     async toHtml() {
         if (!colorManager)
@@ -907,36 +1876,43 @@ export class ToggleButtons extends Field {
         const describedBy = [isRequired ? `${id}-required` : null, this.hasError() ? `${id}-error` : null].filter(Boolean).join(' ') || null;
         const container = new Attributes()
             .merge({ 'aria-describedby': describedBy, 'aria-labelledby': `${id}-label`, 'aria-required': isRequired ? 'true' : null, role: 'radiogroup', 'wire:key': `${this.getLivewireKey()}.inputs` })
-            .class(['fi-fo-toggle-buttons', this._grouped ? 'fi-btn-group' : null, !this._grouped && this._inline ? 'fi-inline' : null]);
+            .class(['fi-fo-toggle-buttons', this._grouped ? 'fi-btn-group' : null, !this._grouped && this._inline ? 'fi-inline' : null, { 'fi-width-full': this._fullWidth }]);
+        if (this._multiple)
+            container.merge({ role: 'group', 'aria-required': null });
+        const grid = !this._grouped && !this._inline && this._columns && this._columns > 1 ? ` class="fi-grid fi-grid-direction-col lg:fi-grid-cols" style="--cols-lg: ${Math.floor(this._columns)}; --cols-default: 1;"` : '';
         const manager = colorManager;
-        const button = (value) => ['fi-btn', this._grouped ? 'fi-btn-group-btn' : null, 'fi-size-md', ...manager.getComponentClasses('button', this._colors[value] ?? 'primary')].filter(Boolean).join(' ');
+        const button = (value, disabled) => ['fi-btn', this._grouped ? 'fi-btn-group-btn' : null, `fi-size-${this._size ?? 'md'}`, disabled ? 'fi-disabled' : null, ...manager.getComponentClasses('button', this._colors[value] ?? 'primary')].filter(Boolean).join(' ');
         const items = this._options.map(([value, label]) => {
-            const input = new Attributes().merge({ id: `${id}-${value}`, name: id, type: 'radio', value, [this._live ? 'wire:model.live' : 'wire:model']: this.getStatePath(), disabled: isDisabled, required: isRequired, 'aria-describedby': describedBy }).class(['fi-fo-toggle-buttons-input']);
-            const html = `<input ${input.toHtml()} /><label for="${e(`${id}-${value}`)}" class="${button(value)}">${this._icons[value] ? icon(this._icons[value]) : ''}${e(label)}</label>`;
+            const optionDisabled = this.isOptionDisabled(value, label);
+            const input = new Attributes().merge({ id: `${id}-${value}`, name: this._multiple ? null : id, type: this._multiple ? 'checkbox' : 'radio', value, [this._live ? 'wire:model.live' : 'wire:model']: this.getStatePath(), disabled: isDisabled || optionDisabled, 'aria-label': this._labelsHidden ? label : null, required: isRequired && !this._multiple && !optionDisabled, 'aria-describedby': describedBy }).class(['fi-fo-toggle-buttons-input']);
+            const tooltip = this._tooltips[value] ? ` x-tooltip="${e(`{ content: ${js(this._tooltips[value])}, theme: $store.theme, allowHTML: false }`)}"` : '';
+            const iconSize = this._size === 'xs' || this._size === 'sm' ? 'sm' : undefined;
+            const html = `<input ${input.toHtml()} /><label for="${e(`${id}-${value}`)}"${tooltip}${this._labelsHidden ? ` aria-label="${e(label)}"` : ''} class="${button(value, optionDisabled)}">${this._icons[value] ? icon(this._icons[value], iconSize ? { size: iconSize } : {}) : ''}${this._labelsHidden ? '' : e(label)}</label>`;
             return this._grouped ? html : `<div class="fi-fo-toggle-buttons-btn-ctn">${html}</div>`;
         });
         const after = isRequired ? `<span id="${e(id)}-required" class="fi-sr-only">${e(t('filament-forms::components.toggle_buttons.required_description'))}</span>` : '';
-        return this.wrap(`<div ${container.toHtml()}>${items.join('')}</div>`, { wrapperClass: 'fi-fo-toggle-buttons-wrp', labelAsDiv: true, focusable: true, after });
+        return this.wrap(`<div ${container.toHtml()}>${grid ? `<div${grid}>${items.join('')}</div>` : items.join('')}</div>`, { wrapperClass: 'fi-fo-toggle-buttons-wrp', labelAsDiv: true, focusable: true, after });
     }
 }
-// Server-side TipTap schema: the nodes and marks the rich editor's default toolbar can produce.
-// Not supported yet: grids, custom blocks, mentions, merge tags, text color, "lead" and "small".
-const RICH_EXTENSIONS = [StarterKit, TextAlign.configure({ types: ['heading', 'paragraph'], defaultAlignment: 'start' }), Subscript, Superscript, Highlight, Image, TableKit];
+// Server-side TipTap schema: the nodes and marks the rich editor can produce, and the extensions your application registers.
+const richExtensions = () => [StarterKit, TextAlign.configure({ types: ['heading', 'paragraph'], defaultAlignment: 'start' }), Subscript, Superscript, Highlight, SizedImage, TableKit, ...RICH_CONTENT_EXTENSIONS, ...customRichContentExtensions];
 const isRichDocument = (value) => !!value && typeof value === 'object' && value.type === 'doc';
 const richText = (node) => (typeof node?.text === 'string' ? node.text : '') + (Array.isArray(node?.content) ? node.content.map(richText).join('') : '');
-const hasRichContent = (node) => node?.type === 'image' || node?.type === 'horizontalRule' || (Array.isArray(node?.content) && node.content.some(hasRichContent));
+const hasRichContent = (node) => ['image', 'horizontalRule', 'mergeTag', 'mention', 'customBlock'].includes(node?.type) || (Array.isArray(node?.content) && node.content.some(hasRichContent));
 /** Stored HTML → TipTap document. Parsing drops anything the schema does not know (scripts, event attributes, `javascript:` links). */
-export function richHtmlToDocument(html) { return generateJSON(html ?? '', RICH_EXTENSIONS); }
+export function richHtmlToDocument(html) { return generateJSON(html ?? '', richExtensions()); }
 /**
  * TipTap document → HTML to save, or null if empty or invalid. The document comes from the browser,
  * so it is rendered then re-parsed to keep only what the schema accepts.
  */
+/** HTML of a document already sanitized (`RichContentRenderer`): no re-parsing. */
+export function renderRichDocument(document) { return generateHTML(document, richExtensions()); }
 export function richDocumentToHtml(document) {
     if (!isRichDocument(document))
         return null;
     try {
-        const clean = generateJSON(generateHTML(document, RICH_EXTENSIONS), RICH_EXTENSIONS);
-        return richText(clean).trim() === '' && !hasRichContent(clean) ? null : generateHTML(clean, RICH_EXTENSIONS);
+        const clean = generateJSON(generateHTML(document, richExtensions()), richExtensions());
+        return richText(clean).trim() === '' && !hasRichContent(clean) ? null : generateHTML(clean, richExtensions());
     }
     catch {
         return null;
@@ -944,13 +1920,154 @@ export function richDocumentToHtml(document) {
 }
 /**
  * Rich text editor: the browser works on a TipTap document, the database receives HTML.
- * Not supported yet: attachments, custom blocks, mentions.
+ * Not supported yet: custom blocks, merge tags, mentions, text colors.
+ */
+/**
+ * Stores a file uploaded by an editor (`componentFileAttachments.<state path>[.<id>]`): type checked on the file's content, size,
+ * then stored; the reference is consumed. Returns the public URL (local or http(s) only).
+ */
+async function storeEditorAttachment(field, id, options) {
+    if (!options.storage)
+        return null;
+    const livewire = field.livewire;
+    const segments = field.getStatePath().split('.');
+    const holder = readPath(livewire.componentFileAttachments ?? {}, id === null ? segments.slice(0, -1) : segments);
+    const name = id ?? segments[segments.length - 1];
+    if (!holder || typeof holder !== 'object' || !Object.hasOwn(holder, name))
+        return null;
+    const uploads = livewire._runtime?.uploads;
+    const file = uploads?.resolve(holder[name]);
+    delete holder[name];
+    if (!file || !options.types.includes(file.type) || file.size > options.maxSize * 1024)
+        return null;
+    const key = await options.storage.store(file, options.directory);
+    uploads.remove(file.id);
+    const info = await options.storage.info(key);
+    return info && /^(\/(?!\/)|https?:\/\/)/.test(info.url) ? info.url : null;
+}
+/** Tools of the rich editor's toolbar, in their default groups. */
+export const RICH_EDITOR_TOOLS = [['bold', 'italic', 'underline', 'strike', 'subscript', 'superscript', 'link'], ['h2', 'h3'], ['alignStart', 'alignCenter', 'alignEnd'], ['blockquote', 'codeBlock', 'bulletList', 'orderedList'], ['table', 'attachFiles'], ['undo', 'redo']];
+/** The editor selection sent by the browser with a toolbar action. */
+const selectionOf = (args) => (args.editorSelection ?? null);
+// `details` needs a TipTap extension the server schema does not have: its content would be lost on save.
+const BUILT_IN_TOOLS = new Map(RICH_EDITOR_TOOL_DEFINITIONS.filter((definition) => definition.name !== 'details').map((definition) => [definition.name, definition]));
+/**
+ * Rich text editor (TipTap): the browser works on a document, the database receives HTML (or JSON with `json()`).
+ * Besides the starter kit: text colors, merge tags, mentions, custom blocks, columns, resizable images, and your own
+ * tools and TipTap extensions.
  */
 export class RichEditor extends Field {
+    _toolbar = null;
+    _disabledTools = [];
+    _json = false;
+    _richPlaceholder = null;
+    _attachmentsStorage = null;
+    _attachmentsDirectory = null;
+    _attachmentTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+    _attachmentMaxSize = 12288;
+    _customTools = [];
+    _textColors = null;
+    _customTextColors = false;
+    _mergeTags = {};
+    _noMergeTagResults = null;
+    _mentions = [];
+    _customBlocks = [];
+    _minimalCustomBlockControls = false;
+    _customBlocksGrid = false;
+    _searchableCustomBlocks = false;
+    _activePanel = null;
+    _stickyToolbar = false;
+    _resizableImages = false;
+    _jsExtensions = [];
+    _editorActions = [];
     static make(name) { return configured(new RichEditor(name)); }
-    hydrateState(value) { return isRichDocument(value) ? value : richHtmlToDocument(typeof value === 'string' ? value : ''); }
+    /** Toolbar tools, by group (`[['bold', 'italic', 'link'], ['h2', 'h3'], ['undo', 'redo']]`); see `RICH_EDITOR_TOOLS` and `RICH_EDITOR_TOOL_DEFINITIONS`. */
+    toolbarButtons(groups) {
+        const list = (groups.length && typeof groups[0] === 'string' ? [groups] : groups);
+        this._toolbar = list;
+        this.assertKnownTools();
+        return this;
+    }
+    assertKnownTools() {
+        if (!this._toolbar)
+            return;
+        const unknown = this._toolbar.flat().filter((tool) => !this.findTool(tool));
+        if (unknown.length)
+            throw new Error(`RichEditor: unknown toolbar buttons ${unknown.join(', ')} (available: ${[...BUILT_IN_TOOLS.keys(), ...this._customTools.map((tool) => tool.getName())].join(', ')}).`);
+    }
+    /** Removes buttons; with no argument, removes them all. */
+    disableToolbarButtons(tools = []) { if (!tools.length)
+        this._toolbar = []; this._disabledTools = [...this._disabledTools, ...tools]; return this; }
+    disableAllToolbarButtons(condition = true) { if (condition)
+        this._toolbar = []; return this; }
+    /** Your own toolbar buttons (or replacements of built-in ones, by name); place them with `toolbarButtons()`. */
+    tools(tools) { this._customTools = [...this._customTools.filter((tool) => !tools.some((other) => other.getName() === tool.getName())), ...tools]; this.assertKnownTools(); return this; }
+    /** Actions mounted by your tools (`RichEditorTool.make('x').action()`), run with the editor selection in `arguments.editorSelection`. */
+    editorActions(actions) { this._editorActions = [...this._editorActions, ...actions]; return this; }
+    /** Browser TipTap extensions: URLs of ES modules exporting an extension (or an array of them). Register their server side with `registerRichContentExtensions()`. */
+    extensions(urls) { this._jsExtensions = [...this._jsExtensions, ...urls]; return this; }
+    /** Saves the content as the editor's JSON document instead of HTML. */
+    json(condition = true) { this._json = condition; return this; }
+    placeholder(text) { this._richPlaceholder = text; return this; }
+    /** Where files attached in the editor are stored (`FileUpload.storage` by default); without storage, attaching is off. */
+    fileAttachmentsStorage(storage) { this._attachmentsStorage = storage; return this; }
+    fileAttachmentsDirectory(directory) { this._attachmentsDirectory = directory; return this; }
+    /** Accepted types of attached files, checked on the file's content (images only: they are inserted as images). */
+    fileAttachmentsAcceptedFileTypes(types) { this._attachmentTypes = types.filter((type) => type.startsWith('image/') && type !== 'image/svg+xml'); return this; }
+    /** Maximum size of attached files, in kilobytes. */
+    fileAttachmentsMaxSize(kilobytes) { this._attachmentMaxSize = kilobytes; return this; }
+    /** Text colors offered by the `textColor` tool (the Tailwind palette by default): `{ brand: TextColor.make('Brand', '#0ea5e9', '#38bdf8') }`. */
+    textColors(colors) { this._textColors = colors; if (colors)
+        registerTextColors(colors); return this; }
+    getTextColors() { return this._textColors ?? TextColor.getDefaults(); }
+    /** Lets users pick any color, besides the listed ones. */
+    customTextColors(condition = true) { this._customTextColors = condition; return this; }
+    /** Merge tags users insert (`mergeTags` tool and `{{` in the text), replaced by values when the content is rendered: `['name', 'today']` or `{ name: 'Name' }`. */
+    mergeTags(tags) { this._mergeTags = Array.isArray(tags) ? Object.fromEntries(tags.map((tag) => [tag, tag])) : { ...tags }; return this; }
+    noMergeTagSearchResultsMessage(message) { this._noMergeTagResults = message; return this; }
+    /** Mentions: `[MentionProvider.make('@').items({ 1: 'Ada' })]`. */
+    mentions(providers) { this._mentions = providers; return this; }
+    /** Custom blocks (`customBlocks` tool), as a list or grouped by label. */
+    customBlocks(blocks) { this._customBlocks = blocks; return this; }
+    minimalCustomBlockControls(condition = true) { this._minimalCustomBlockControls = condition; return this; }
+    /** Shows the blocks of the panel in a grid. */
+    customBlocksGrid(condition = true) { this._customBlocksGrid = condition; return this; }
+    /** Adds a search field to the blocks panel. */
+    searchableCustomBlocks(condition = true) { this._searchableCustomBlocks = condition; return this; }
+    /** Panel open when the editor loads (`customBlocks`, `mergeTags`). */
+    activePanel(panel) { this._activePanel = panel; return this; }
+    /** Keeps the toolbar visible while scrolling the content. */
+    stickyToolbar(condition = true) { this._stickyToolbar = condition; return this; }
+    /** Lets users resize images with handles; the size is saved on the image. */
+    resizableImages(condition = true) { this._resizableImages = condition; return this; }
+    attachmentsStorage() { return this._attachmentsStorage ?? FileUpload.storage; }
+    findTool(name) {
+        const custom = this._customTools.find((tool) => tool.getName() === name);
+        if (custom)
+            return custom;
+        const definition = BUILT_IN_TOOLS.get(name);
+        return definition ? RichEditorTool.fromDefinition(definition) : null;
+    }
+    toolGroups() { return (this._toolbar ?? RICH_EDITOR_TOOLS).map((group) => group.filter((tool) => !this._disabledTools.includes(tool) && (tool !== 'attachFiles' || this.attachmentsStorage() !== null))).filter((group) => group.length); }
+    blockGroups() { return Array.isArray(this._customBlocks) ? [['', this._customBlocks]] : Object.entries(this._customBlocks); }
+    getCustomBlock(id) { return this.blockGroups().flatMap(([, blocks]) => blocks).find((block) => block.getId() === id) ?? null; }
+    hydrateState(value) {
+        if (typeof value === 'string' && value.trim().startsWith('{')) {
+            try {
+                const parsed = JSON.parse(value);
+                if (isRichDocument(parsed))
+                    return parsed;
+            }
+            catch { /* HTML */ }
+        }
+        return isRichDocument(value) ? value : richHtmlToDocument(typeof value === 'string' ? value : '');
+    }
     getDefaultState() { return richHtmlToDocument(typeof this._default === 'string' ? this._default : ''); }
-    dehydrateState(state) { return richDocumentToHtml(state); }
+    /** HTML (sanitized by the editor's schema), or the JSON document with `json()` (normalized through the same schema). */
+    dehydrateState(state) {
+        const html = richDocumentToHtml(state);
+        return this._json ? (html === null ? null : richHtmlToDocument(html)) : html;
+    }
     async getValidationRules() {
         const rules = [];
         if (await this.isRequired())
@@ -958,15 +2075,63 @@ export class RichEditor extends Field {
         return [...rules, ...this._rules];
     }
     getExposedMethods() { return ['getMentionSearchResultsForJs', 'getMentionLabelsForJs', 'getCustomBlockPreviewsForJs', 'getUploadedFileAttachmentTemporaryUrl', 'saveUploadedFileAttachmentAndGetUrl']; }
-    getMentionSearchResultsForJs() { return []; }
-    getMentionLabelsForJs() { return []; }
-    getCustomBlockPreviewsForJs() { return []; }
-    getUploadedFileAttachmentTemporaryUrl() { return null; }
-    saveUploadedFileAttachmentAndGetUrl() { return null; }
-    /** Toolbar "link" action: a modal (URL, new tab), then commands sent back to the browser editor. */
+    mentionProvider(char) { return this._mentions.find((provider) => provider.getTriggerCharacter() === char) ?? this._mentions[0] ?? null; }
+    /** Mention search, for the editor's JavaScript: `[{ id, label }]`. */
+    async getMentionSearchResultsForJs(search = '', triggerCharacter = '@') {
+        const provider = this.mentionProvider(triggerCharacter ?? '@');
+        if (!provider || (await this.isDisabled()))
+            return [];
+        return Object.entries(await provider.getSearchResults(typeof search === 'string' ? search.slice(0, 200) : '')).slice(0, 50).map(([id, label]) => ({ id, label }));
+    }
+    /** Current labels of mentioned ids, by trigger character. */
+    async getMentionLabelsForJs(mentions = []) {
+        const byChar = new Map();
+        for (const mention of Array.isArray(mentions) ? mentions.slice(0, 500) : []) {
+            const char = String(mention?.triggerCharacter ?? '@'), id = mention?.id;
+            if (id === null || id === undefined)
+                continue;
+            byChar.set(char, [...(byChar.get(char) ?? []), String(id)]);
+        }
+        const labels = {};
+        for (const [char, ids] of byChar) {
+            const provider = this.mentionProvider(char);
+            if (provider)
+                labels[char] = await provider.getLabels(ids);
+        }
+        return labels;
+    }
+    /** Previews of inserted blocks, for the editor's JavaScript. */
+    getCustomBlockPreviewsForJs(customBlocks = []) {
+        const previews = [];
+        for (const item of Array.isArray(customBlocks) ? customBlocks.slice(0, 200) : []) {
+            const block = this.getCustomBlock(item?.id);
+            const config = item?.config && typeof item.config === 'object' && !Array.isArray(item.config) ? item.config : {};
+            if (!block || !Number.isInteger(item?.key))
+                continue;
+            previews.push({ key: item.key, label: block.getPreviewLabel(config), preview: Buffer.from(block.toPreviewHtml(config) ?? '').toString('base64'), shouldApplyProseStylingToPreview: block.shouldApplyProseStylingToPreview(config) });
+        }
+        return previews;
+    }
+    /**
+     * URL of a file the editor just uploaded: the file is checked (type from its content, size), stored, and its public URL returned.
+     * It stays stored even if the form is not saved.
+     */
+    async getUploadedFileAttachmentTemporaryUrl(args = {}) {
+        const id = String(args?.attachment ?? '');
+        const storage = this.attachmentsStorage();
+        if (!storage || !/^[A-Za-z0-9_-]{1,64}$/.test(id) || !this.toolGroups().flat().includes('attachFiles') || (await this.isDisabled()))
+            return null;
+        return storeEditorAttachment(this, id, { storage, directory: this._attachmentsDirectory, types: this._attachmentTypes, maxSize: this._attachmentMaxSize });
+    }
+    async saveUploadedFileAttachmentAndGetUrl(args = {}) { return this.getUploadedFileAttachmentTemporaryUrl(args); }
+    /** Sends commands to the editor in the browser (after an action), on the given selection. */
+    runCommands(livewire, commands, editorSelection = null) {
+        const key = this.getKey();
+        livewire.dispatch('run-rich-editor-commands', { awaitSchemaComponent: key, livewireId: livewire.id, key, editorSelection, commands: commands.map((command) => ({ name: command.name, arguments: command.arguments ?? [] })) });
+    }
+    /** Toolbar actions: link, text color, custom block, and the ones of `editorActions()`. */
     getActions() {
         const tr = (name) => t(`filament-forms::components.rich_editor.actions.link.${name}`);
-        const key = this.getKey();
         return [
             ...this.getHintActions(),
             Action.make('link').label(tr('label')).modalHeading(tr('modal.heading')).modalWidth('lg')
@@ -978,29 +2143,174 @@ export class RichEditor extends Field {
                 Checkbox.make('shouldOpenInNewTab').label(tr('modal.form.should_open_in_new_tab.label')),
             ])
                 .action(({ livewire, arguments: args, data }) => {
-                const selection = (args.editorSelection ?? null);
+                const selection = selectionOf(args);
                 const single = selection?.head === selection?.anchor;
                 const url = typeof data.url === 'string' && data.url !== '' ? data.url : null;
-                const commands = [
+                this.runCommands(livewire, [
                     ...(single ? [{ name: 'extendMarkRange', arguments: ['link'] }] : []),
-                    url ? { name: 'setLink', arguments: [{ href: url, target: data.shouldOpenInNewTab ? '_blank' : null }] } : { name: 'unsetLink', arguments: [] },
-                ];
-                livewire.dispatch('run-rich-editor-commands', { awaitSchemaComponent: key, livewireId: livewire.id, key, editorSelection: selection, commands });
+                    url ? { name: 'setLink', arguments: [{ href: url, target: data.shouldOpenInNewTab ? '_blank' : null }] } : { name: 'unsetLink' },
+                ], selection);
             }),
+            this.textColorAction(),
+            this.customBlockAction(),
+            ...this._editorActions,
         ];
     }
+    textColorAction() {
+        const tr = (name) => t(`filament-forms::components.rich_editor.actions.text_color.${name}`);
+        return Action.make('textColor').label(tr('label')).modalHeading(tr('modal.heading')).modalWidth('lg')
+            .fillForm(({ arguments: args }) => {
+            const color = typeof args.color === 'string' ? args.color : null;
+            if (!color)
+                return {};
+            const known = Object.hasOwn(this.getTextColors(), color);
+            return { color: known ? color : null, customColor: this._customTextColors && !known ? color : null };
+        })
+            .schema(() => {
+            const options = Object.fromEntries(Object.entries(this.getTextColors()).map(([name, color]) => [name, `<div class="fi-fo-rich-editor-text-color-select-option"><div class="fi-fo-rich-editor-text-color-select-option-preview" style="--color: ${e(sanitizeCssColor(color.getColor()) ?? '')}; --dark-color: ${e(sanitizeCssColor(color.getDarkColor()) ?? '')}"></div><div>${e(color.getLabel() ?? name)}</div></div>`]));
+            return [
+                ...(Object.keys(options).length ? [Select.make('color').label(tr('modal.form.color.label')).options(options).allowHtml().native(false).live()] : []),
+                ...(this._customTextColors ? [ColorPicker.make('customColor').label(tr('modal.form.custom_color.label')).visible(({ get }) => !get('color'))] : []),
+            ];
+        })
+            .action(({ livewire, arguments: args, data }) => {
+            const selection = selectionOf(args);
+            const single = selection?.head === selection?.anchor;
+            const picked = typeof data.color === 'string' && Object.hasOwn(this.getTextColors(), data.color) ? data.color : this._customTextColors ? sanitizeCssColor(data.customColor) : null;
+            this.runCommands(livewire, picked
+                ? [...(single ? [{ name: 'extendMarkRange', arguments: ['textColor'] }] : []), { name: 'setTextColor', arguments: [{ color: picked }] }]
+                : [...(single ? [{ name: 'extendMarkRange', arguments: ['textColor'] }] : []), { name: 'unsetTextColor' }], selection);
+        });
+    }
+    /** Modal of a custom block, built from the block class named in the arguments (`id`): insert or edit. */
+    customBlockAction() {
+        const blockOf = (args) => this.getCustomBlock(args?.id);
+        const configured = (args) => { const block = blockOf(args); return block ? block.configureEditorAction(Action.make('customBlock')) : null; };
+        const argumentsOf = (livewire) => livewire?.mountedActions?.find?.((mounted) => mounted.name === 'customBlock')?.arguments ?? {};
+        return Action.make('customBlock').modalWidth('lg')
+            .modalHeading(({ arguments: args }) => blockOf(args)?.getLabel() ?? null)
+            .modalSubmitActionLabel(({ arguments: args }) => t(`filament-forms::components.rich_editor.actions.custom_block.modal.actions.${args.mode === 'edit' ? 'save' : 'insert'}.label`))
+            .modalHidden(async (ctx) => { const action = configured(ctx.arguments); return !action || (await action.isModalHidden(ctx)); })
+            .fillForm(({ arguments: args }) => (args.config && typeof args.config === 'object' && !Array.isArray(args.config) ? args.config : {}))
+            .schema((schema) => configured(argumentsOf(schema.livewire))?.applySchema(schema) ?? schema.components([]))
+            .action(({ livewire, arguments: args, data }) => {
+            const block = blockOf(args);
+            if (!block)
+                return;
+            const config = data ?? {};
+            const content = { type: 'customBlock', attrs: { config, id: block.getId(), label: block.getPreviewLabel(config), preview: Buffer.from(block.toPreviewHtml(config) ?? '').toString('base64'), shouldApplyProseStylingToPreview: block.shouldApplyProseStylingToPreview(config) } };
+            const selection = { ...(selectionOf(args) ?? {}) };
+            if (args.dragPosition !== undefined && args.dragPosition !== null) {
+                this.runCommands(livewire, [{ name: 'insertContentAt', arguments: [args.dragPosition, content] }]);
+                return;
+            }
+            if (selection.type === 'node' && args.mode === 'insert') {
+                this.runCommands(livewire, [{ name: 'insertContentAt', arguments: [Number(selection.anchor ?? -1) + 1, content] }]);
+                return;
+            }
+            if (args.mode === 'edit' && selection.type !== 'node') {
+                selection.type = 'node';
+                selection.anchor = Number(selection.anchor ?? 1) - 1;
+                delete selection.head;
+            }
+            this.runCommands(livewire, [{ name: 'insertContent', arguments: [content] }], selection);
+        });
+    }
+    customBlocksPanelHtml(key) {
+        const searchable = this._searchableCustomBlocks;
+        const groups = this.blockGroups();
+        const allLabels = groups.flatMap(([label, blocks]) => [label, ...blocks.map((block) => block.getLabel())]).filter(Boolean);
+        const parts = [];
+        if (searchable)
+            parts.push(`<div class="fi-fo-rich-editor-custom-blocks-search">${icon('m-magnifying-glass')}<input type="search" x-model="customBlockSearch" x-on:keydown.enter.prevent aria-label="${e(t('filament-forms::components.rich_editor.custom_blocks.search_label'))}" placeholder="${e(t('filament-forms::components.rich_editor.custom_blocks.search_prompt'))}" class="fi-fo-rich-editor-custom-blocks-search-input" /></div>`);
+        const list = groups.map(([groupLabel, blocks]) => {
+            const groupLabels = [groupLabel, ...blocks.map((block) => block.getLabel())];
+            const show = (labels) => (searchable ? ` x-show="${e(`matchesCustomBlockSearch(${js(labels)})`)}"` : '');
+            const header = groupLabel ? `<h4${show(groupLabels)} class="fi-fo-rich-editor-custom-blocks-group-header">${e(groupLabel)}</h4>` : '';
+            const buttons = blocks.map((block) => {
+                const id = block.getId();
+                const blockIcon = block.getIcon();
+                return `<button draggable="true" type="button" data-block-id="${e(id)}" x-data="{ isLoading: false }"${show([groupLabel, block.getLabel()])} x-on:click="${e(`isLoading = true\n$wire.mountAction('customBlock', { editorSelection, id: ${js(id)}, mode: 'insert' }, { schemaComponent: ${js(key)} })`)}" x-on:dragstart="${e(`$event.dataTransfer.setData('customBlock', ${js(id)})`)}" x-on:open-modal.window="isLoading = false" x-on:run-rich-editor-commands.window="isLoading = false" class="fi-fo-rich-editor-custom-block-btn">${blockIcon ? `<span x-show="! isLoading" class="fi-fo-rich-editor-custom-block-icon">${icon(blockIcon)}</span>` : ''}${loadingIndicator(new Attributes({ 'x-show': 'isLoading', 'x-cloak': '' }))}<span>${e(block.getLabel())}</span></button>`;
+            }).join('');
+            return `${header}<div${show(groupLabels)} class="${cls(['fi-fo-rich-editor-custom-blocks-list', { 'fi-fo-rich-editor-custom-blocks-grid': this._customBlocksGrid }])}">${buttons}</div>`;
+        }).join('');
+        const noResults = searchable ? `<p x-show="${e(`! matchesCustomBlockSearch(${js(allLabels)})`)}" x-cloak role="status" class="fi-fo-rich-editor-custom-blocks-no-results">${e(t('filament-forms::components.rich_editor.custom_blocks.no_search_results_message'))}</p>` : '';
+        return `${parts.join('')}<div class="fi-fo-rich-editor-custom-blocks-ctn">${list}${noResults}</div>`;
+    }
+    mergeTagsPanelHtml() {
+        return Object.entries(this._mergeTags).map(([id, label]) => `<button draggable="true" type="button" x-on:click="${e(`insertMergeTag(${js(id)})`)}" x-on:dragstart="${e(`$event.dataTransfer.setData('mergeTag', ${js(id)})`)}" class="fi-fo-rich-editor-merge-tag-btn"><span data-type="mergeTag" data-id="${e(id)}">${e(label)}</span></button>`).join('');
+    }
     async toHtml() {
-        return this.wrap(views.render('filament-forms::components.rich-editor', { livewireId: this.livewire.id, key: this.getKey(), statePath: this.getStatePath(), label: await this.getLabel(), js }), { labelAsDiv: true });
+        const key = this.getKey();
+        let html = views.render('filament-forms::components.rich-editor', { livewireId: this.livewire.id, key, statePath: this.getStatePath(), label: await this.getLabel(), js });
+        // Toolbar: the configured groups, each tool rendered from its definition.
+        const toolbarStart = html.indexOf('data-rich-editor-toolbar="main"');
+        if (toolbarStart >= 0) {
+            const open = html.indexOf('>', toolbarStart) + 1;
+            // The toolbar ends right before the "uploading file" message.
+            const message = html.indexOf('x-show="isUploadingFile"', open);
+            const close = message < 0 ? -1 : html.lastIndexOf('<div', message);
+            if (close < 0)
+                throw new Error('RichEditor: unexpected view markup (toolbar end not found).');
+            const body = html.slice(open, close);
+            const groups = this.toolGroups().map((group) => `<div class="fi-fo-rich-editor-toolbar-group">${group.map((tool) => this.findTool(tool)?.toHtml() ?? '').join('')}</div>`).join('');
+            const endOfToolbar = body.lastIndexOf('</div>');
+            html = html.slice(0, open) + groups + body.slice(endOfToolbar) + html.slice(close);
+            if (this._stickyToolbar)
+                html = html.replace('class="fi-fo-rich-editor-toolbar "', 'class="fi-fo-rich-editor-toolbar fi-fo-rich-editor-sticky-toolbar"');
+        }
+        // Panels: custom blocks and merge tags.
+        const blocksStart = html.indexOf('<div class="fi-fo-rich-editor-custom-blocks-ctn">');
+        if (blocksStart >= 0) {
+            const blocksEnd = html.indexOf('</div>', blocksStart) + '</div>'.length;
+            html = html.slice(0, blocksStart) + this.customBlocksPanelHtml(key) + html.slice(blocksEnd);
+        }
+        const tagsStart = html.indexOf('<div class="fi-fo-rich-editor-merge-tags-list">');
+        if (tagsStart >= 0) {
+            const open = html.indexOf('>', tagsStart) + 1;
+            html = html.slice(0, open) + this.mergeTagsPanelHtml() + html.slice(html.indexOf('</div>', open));
+        }
+        const attach = this.toolGroups().flat().includes('attachFiles');
+        const mentions = await Promise.all(this._mentions.map((provider) => provider.toJs()));
+        html = html.replace('canAttachFiles: true,', `canAttachFiles: ${attach ? 'true' : 'false'},`)
+            .replace('maxFileSize: 12288,', `maxFileSize: ${this._attachmentMaxSize},`)
+            .replace(/maxFileSizeValidationMessage: '[^']*',/, () => `maxFileSizeValidationMessage: ${js(`Uploaded files must not be greater than ${this._attachmentMaxSize} kilobytes.`)},`)
+            .replace(/acceptedFileTypes: JSON\.parse\('[^']*'\),/, () => `acceptedFileTypes: ${js(this._attachmentTypes)},`)
+            .replace(/acceptedFileTypesValidationMessage: '[^']*',/, () => `acceptedFileTypesValidationMessage: ${js(`Uploaded files must be of type: ${this._attachmentTypes.join(', ')}.`)},`)
+            .replace('activePanel: null,', () => `activePanel: ${js(this._activePanel)},`)
+            .replace('extensions: [],', () => `extensions: ${js(this._jsExtensions)},`)
+            .replace('hasResizableImages: false,', `hasResizableImages: ${this._resizableImages ? 'true' : 'false'},`)
+            .replace('hasMinimalCustomBlockControls: false,', `hasMinimalCustomBlockControls: ${this._minimalCustomBlockControls ? 'true' : 'false'},`)
+            .replace('hasStickyToolbar: false,', `hasStickyToolbar: ${this._stickyToolbar ? 'true' : 'false'},`)
+            .replace('mentions: [],', () => `mentions: ${js(mentions)},`)
+            .replace('mergeTags: [],', () => `mergeTags: ${js(Object.keys(this._mergeTags).length ? this._mergeTags : [])},`)
+            .replace(/noMergeTagSearchResultsMessage: '[^']*',/, () => `noMergeTagSearchResultsMessage: ${js(this._noMergeTagResults ?? t('filament-forms::components.rich_editor.no_merge_tag_search_results_message'))},`)
+            .replace(/textColors: JSON\.parse\('[^']*'\),/, () => `textColors: ${js(textColorsForJs(this.getTextColors()))},`)
+            .replace('placeholder: null,', `placeholder: ${js(this._richPlaceholder)},`)
+            .replace('isLiveOnBlur: false,', `isLiveOnBlur: ${this._liveMode === 'blur' ? 'true' : 'false'},`)
+            .replace(/state: \$wire\.\$entangle\(('[^']*'), false\)/, (_m, path) => `state: $wire.$entangle(${path}, ${this._liveMode === 'live' ? 'true' : 'false'})`);
+        return this.wrap(html, { labelAsDiv: true });
     }
 }
 /** Color picker (hex format). */
 export class ColorPicker extends Field {
     static make(name) { return configured(new ColorPicker(name)); }
-    /** Hex format: the only one supported, kept for API compatibility. */
-    hex() { return this; }
-    constructor(name) {
-        super(name);
-        this.rule({ name: 'hex_color', passes: (v) => /^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(String(v)), message: (a) => `The ${a} field must be a valid hexadecimal color.` });
+    _format = 'hex';
+    /** Color format of the state: `#ff0000` (default), `rgb(255, 0, 0)`, `rgba(255, 0, 0, 1)` or `hsl(0, 100%, 50%)`. */
+    format(format) { this._format = format; return this; }
+    hex() { return this.format('hex'); }
+    rgb() { return this.format('rgb'); }
+    rgba() { return this.format('rgba'); }
+    hsl() { return this.format('hsl'); }
+    async getValidationRules() {
+        const patterns = {
+            hex: /^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/,
+            rgb: /^rgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\)$/,
+            rgba: /^rgba\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*(0|1|0?\.\d+)\s*\)$/,
+            hsl: /^hsl\(\s*\d{1,3}(\.\d+)?\s*,\s*\d{1,3}(\.\d+)?%\s*,\s*\d{1,3}(\.\d+)?%\s*\)$/,
+        };
+        const pattern = patterns[this._format];
+        return [...(await super.getValidationRules()), { name: this._format === 'hex' ? 'hex_color' : 'regex', passes: (v) => pattern.test(String(v)), message: (a) => (this._format === 'hex' ? `The ${a} field must be a valid hexadecimal color.` : `The ${a} field format is invalid.`) }];
     }
     async toHtml() {
         const isDisabled = await this.isDisabled();
@@ -1024,17 +2334,20 @@ export class ColorPicker extends Field {
  state: $wire.$entangle(${e(js(this.getStatePath()))}),
  })" x-on:dropdown-escape="if (isOpen()) { closePanelAndRestoreFocus(); $event.preventDefault() }" x-on:keydown.esc="isOpen() &amp;&amp; $event.stopPropagation()" x-on:focusout="if (isOpen() &amp;&amp; ! $el.contains($event.relatedTarget)) $refs.panel.close()" wire:key="${e(key)}.${hash}" class="fi-input-wrp-content"><input x-on:focus="$refs.panel.open($refs.input)" x-on:keydown.enter.prevent.stop="togglePanelVisibility()" x-ref="input" ${input.toHtml()} /><div aria-hidden="true" class="fi-fo-color-picker-preview my-auto me-3 size-5 shrink-0 rounded-full select-none" x-on:click="togglePanelVisibility()" x-bind:class="{
  'fi-empty': ! state,
- }" x-bind:style="{ 'background-color': state }"></div><div wire:ignore.self wire:key="${e(key)}.panel" x-cloak x-float.placement.bottom-start.offset.flip.shift="{ offset: 8 }" x-ref="panel" id="${e(id)}-panel" role="dialog" aria-label="${e(t('filament-forms::components.color_picker.panel_label'))}" class="fi-fo-color-picker-panel"><hex-color-picker x-ref="picker" color="${e(typeof state === 'string' ? state : '')}" /></div></div></div></div>`);
+ }" x-bind:style="{ 'background-color': state }"></div><div wire:ignore.self wire:key="${e(key)}.panel" x-cloak x-float.placement.bottom-start.offset.flip.shift="{ offset: 8 }" x-ref="panel" id="${e(id)}-panel" role="dialog" aria-label="${e(t('filament-forms::components.color_picker.panel_label'))}" class="fi-fo-color-picker-panel"><${({ hex: 'hex', rgb: 'rgb-string', rgba: 'rgba-string', hsl: 'hsl-string' })[this._format]}-color-picker x-ref="picker" color="${e(typeof state === 'string' ? state : '')}" /></div></div></div></div>`);
     }
 }
 export class Checkbox extends Field {
+    _inline = true;
     static make(name) { return configured(new Checkbox(name)); }
     getDefaultState() { return this._default ?? false; }
+    /** `false`: the label goes above the checkbox instead of beside it. */
+    inline(condition = true) { this._inline = condition; return this; }
     async toHtml() {
         const input = new Attributes()
-            .merge({ type: 'checkbox', disabled: await this.isDisabled(), id: this.getId(), required: await this.isRequired(), 'wire:model': this.getStatePath() })
+            .merge({ type: 'checkbox', disabled: await this.isDisabled(), id: this.getId(), required: await this.isRequired(), [this.wireModel()]: this.getStatePath() })
             .class(['fi-checkbox-input', this.hasError() ? 'fi-invalid' : 'fi-valid']);
-        return this.wrap('', { labelPrefix: `<input ${input.toHtml()} />` });
+        return this._inline ? this.wrap('', { labelPrefix: `<input ${input.toHtml()} />` }) : this.wrap(`<input ${input.toHtml()} />`);
     }
 }
 /** Checkboxes for a list of values (no search or "select all" yet). */
@@ -1045,6 +2358,23 @@ export class CheckboxList extends Field {
     options(options) { this._options = (Array.isArray(options) ? options : Object.entries(options)).map(([value, label]) => [String(value), String(label)]); return this; }
     /** Number of columns the options are spread over (from `lg`). */
     columns(columns) { this._optionColumns = columns; return this; }
+    _descriptions = {};
+    _searchable = false;
+    _bulkToggleable = false;
+    _disableOptionWhen = null;
+    /** Helper text per value, under the option label. */
+    descriptions(descriptions) { this._descriptions = descriptions; return this; }
+    /** A search field filters the options in the browser. */
+    searchable(condition = true) { this._searchable = condition; return this; }
+    _searchPrompt = 'Search';
+    _noSearchResultsMessage = 'No search results.';
+    searchPrompt(prompt) { this._searchPrompt = prompt; return this; }
+    noSearchResultsMessage(message) { this._noSearchResultsMessage = message; return this; }
+    /** "Select all" / "Deselect all" links. */
+    bulkToggleable(condition = true) { this._bulkToggleable = condition; return this; }
+    /** Options that cannot be checked; they are refused on the server too. */
+    disableOptionWhen(condition) { this._disableOptionWhen = condition; return this; }
+    isOptionDisabled(value, label) { return this._disableOptionWhen ? this._disableOptionWhen(value, label) : false; }
     getDefaultState() { return this._default ?? []; }
     hydrateState(value) {
         let list = value;
@@ -1064,21 +2394,28 @@ export class CheckboxList extends Field {
         return this._options.map(([value]) => value).filter((value) => chosen.has(value));
     }
     async getValidationRules() {
-        const known = new Set(this._options.map(([value]) => value));
+        // A disabled option cannot be checked, even by a forged request.
+        const known = new Set(this._options.filter(([value, label]) => !this.isOptionDisabled(value, label)).map(([value]) => value));
         return [...(await super.getValidationRules()), { name: 'in', passes: (v) => Array.isArray(v) && v.every((value) => known.has(String(value))), message: (a) => `The selected ${a} is invalid.` }];
     }
     async toHtml() {
         const isDisabled = await this.isDisabled();
         const key = this.getLivewireKey() ?? '';
         const options = this._options.map(([value, label]) => {
-            const input = new Attributes().merge({ disabled: isDisabled, type: 'checkbox', value, 'wire:model': this.getStatePath() }).class(['fi-checkbox-input', this.hasError() ? 'fi-invalid' : 'fi-valid']);
-            return `<div wire:key="${e(`${key}.options.${value}`)}" class="fi-fo-checkbox-list-option-ctn"><label class="fi-fo-checkbox-list-option"><input ${input.toHtml()} /><div class="fi-fo-checkbox-list-option-text"><span class="fi-fo-checkbox-list-option-label">${e(label)}</span></div></label></div>`;
+            const input = new Attributes().merge({ disabled: isDisabled || this.isOptionDisabled(value, label), type: 'checkbox', value, [this.wireModel()]: this.getStatePath(), 'x-on:change': this._bulkToggleable ? 'checkIfAllCheckboxesAreChecked()' : null }).class(['fi-checkbox-input', this.hasError() ? 'fi-invalid' : 'fi-valid']);
+            const description = this._descriptions[value] ? `<p class="fi-fo-checkbox-list-option-description">${e(this._descriptions[value])}</p>` : '';
+            return `<div wire:key="${e(`${key}.options.${value}`)}"${this._searchable ? ' x-show="matchesSearch($el)"' : ''} class="fi-fo-checkbox-list-option-ctn"><label class="fi-fo-checkbox-list-option"><input ${input.toHtml()} /><div class="fi-fo-checkbox-list-option-text"><span class="fi-fo-checkbox-list-option-label">${e(label)}</span>${description}</div></label></div>`;
         });
         const columns = this._optionColumns ?? 1;
         const grid = columns > 1 ? `class="fi-grid fi-grid-direction-col lg:fi-grid-cols fi-fo-checkbox-list-options" style="--cols-lg: ${Math.floor(columns)}; --cols-default: 1;"` : 'class="fi-grid fi-grid-direction-col fi-fo-checkbox-list-options" style="--cols-default: 1;"';
+        const searchPrompt = this._searchPrompt;
+        const search = this._searchable ? `<div class="fi-input-wrp fi-fo-checkbox-list-search-input-wrp"><div class="fi-input-wrp-prefix fi-input-wrp-prefix-has-content fi-inline">${icon('m-magnifying-glass')}</div><div class="fi-input-wrp-content-ctn"><input aria-label="${e(searchPrompt)}" placeholder="${e(searchPrompt)}" type="search" x-model.debounce.1000="search" class="fi-input fi-input-has-inline-prefix" /></div></div>` : '';
+        const link = (label) => `<button type="button" class="fi-ac-link-action fi-link fi-size-sm ${colorManager ? colorManager.getComponentClasses('link', 'primary').join(' ') : ''}"><span class="fi-link-label">${e(label)}</span></button>`;
+        const bulk = this._bulkToggleable && !isDisabled && this._options.length ? `<div x-cloak class="fi-fo-checkbox-list-actions" wire:key="${e(key)}.actions"><span x-show="! areAllCheckboxesChecked" x-on:click="toggleAllCheckboxes()" wire:key="${e(key)}.actions.select-all">${link(t('filament-forms::components.checkbox_list.actions.select_all.label'))}</span><span x-show="areAllCheckboxesChecked" x-on:click="toggleAllCheckboxes()" wire:key="${e(key)}.actions.deselect-all">${link(t('filament-forms::components.checkbox_list.actions.deselect_all.label'))}</span></div>` : '';
+        const noResults = this._searchable ? `<div x-cloak x-show="search && ! visibleCheckboxListOptions.length" role="status" aria-live="polite" class="fi-fo-checkbox-list-no-search-results-message">${e(this._noSearchResultsMessage)}</div>` : '';
         return this.wrap(`<div role="group" x-load x-load-src="${e(asset('checkbox-list'))}" x-data="checkboxListFormComponent({
  livewireId: ${e(js(this.livewire.id))},
- })" aria-labelledby="${e(this.getId())}-label" class="fi-fo-checkbox-list"><div wire:key="${e(key)}.options" ${grid}>${options.join('')}</div></div>`, { labelAsDiv: true });
+ })" aria-labelledby="${e(this.getId())}-label" class="fi-fo-checkbox-list">${search}${bulk}<div wire:key="${e(key)}.options"${this._searchable ? ' x-show="visibleCheckboxListOptions.length"' : ''} ${grid}>${options.join('')}</div>${noResults}</div>`, { labelAsDiv: true });
     }
 }
 /** Free-form key/value pairs, saved as an object. */
@@ -1090,6 +2427,26 @@ export class KeyValue extends Field {
     keyLabel(label) { this._keyLabel = label; return this; }
     valueLabel(label) { this._valueLabel = label; return this; }
     reorderable(condition = true) { this._reorderable = condition; return this; }
+    _addable = true;
+    _deletable = true;
+    _editableKeys = true;
+    _editableValues = true;
+    _keyPlaceholder = null;
+    _valuePlaceholder = null;
+    _addLabel = null;
+    _deleteLabel = null;
+    /** `false`: no "Add row" button. */
+    addable(condition = true) { this._addable = condition; return this; }
+    /** `false`: rows cannot be deleted. */
+    deletable(condition = true) { this._deletable = condition; return this; }
+    /** `false`: keys cannot be changed. The server keeps the saved keys. */
+    editableKeys(condition = true) { this._editableKeys = condition; return this; }
+    /** `false`: values cannot be changed. */
+    editableValues(condition = true) { this._editableValues = condition; return this; }
+    keyPlaceholder(text) { this._keyPlaceholder = text; return this; }
+    valuePlaceholder(text) { this._valuePlaceholder = text; return this; }
+    addActionLabel(label) { this._addLabel = label; return this; }
+    deleteActionLabel(label) { this._deleteLabel = label; return this; }
     // In the form, the state is a list of `{ key, value }` pairs (what the browser component expects, and it keeps order);
     // it becomes an object again when saved.
     getDefaultState() { return KeyValue.toPairs(this._default); }
@@ -1105,10 +2462,29 @@ export class KeyValue extends Field {
         }
         return object && typeof object === 'object' && !Array.isArray(object) ? Object.entries(object).map(([key, v]) => ({ key, value: v })) : [];
     }
-    hydrateState(value) { return KeyValue.toPairs(value); }
+    _originalValue = null;
+    hydrateState(value) { this._originalValue = value; return KeyValue.toPairs(value); }
     /** Flat object of strings: empty keys, nested objects and dangerous keys are dropped; 200 pairs at most. */
     dehydrateState(state) {
         const out = {};
+        // Restrictions set on the field are enforced on the server: a forged state cannot add, delete or edit what the UI forbids.
+        // The saved value: the one hydrated by this instance, else the record's (fields are rebuilt on every request), else the default.
+        const record = this.context().record;
+        const saved = KeyValue.toPairs(this._originalValue ?? (record && typeof record === 'object' ? record[this._name] : null) ?? this._default);
+        if (!this._addable || !this._deletable || !this._editableKeys || !this._editableValues) {
+            const received = Array.isArray(state) ? state.filter((pair) => pair && typeof pair === 'object' && typeof pair.key === 'string') : [];
+            const byKey = new Map(received.map((pair) => [String(pair.key).trim(), pair]));
+            let rows = this._editableKeys ? received.map((pair) => ({ key: String(pair.key), value: pair.value })) : saved.map((pair, index) => ({ key: pair.key, value: received[index]?.value ?? pair.value }));
+            if (!this._editableValues)
+                rows = rows.map((row) => ({ ...row, value: saved.find((pair) => pair.key === row.key)?.value ?? null }));
+            if (!this._addable)
+                rows = rows.filter((row) => saved.some((pair) => pair.key === row.key));
+            if (!this._deletable)
+                for (const pair of saved)
+                    if (!rows.some((row) => row.key === pair.key))
+                        rows.push({ key: pair.key, value: byKey.get(pair.key)?.value ?? pair.value });
+            state = rows;
+        }
         if (!Array.isArray(state))
             return out;
         for (const pair of state.slice(0, 200)) {
@@ -1134,7 +2510,7 @@ export class KeyValue extends Field {
         return this.wrap(`<div aria-labelledby="${e(id)}-label" role="group" class="fi-fo-key-value fi-input-wrp"><div class="fi-input-wrp-content-ctn"><div x-load x-load-src="${e(asset('key-value'))}" x-id="['key-value-row']" x-data="keyValueFormComponent({
  state: $wire.$entangle(${e(js(this.getStatePath()))}, false),
  reordering: ${e(js(reordering))},
- })" wire:ignore wire:key="${e(key)}" class="fi-fo-key-value-table-ctn"><table aria-labelledby="${e(id)}-label" id="${e(id)}" class="fi-fo-key-value-table"><thead><tr>${this._reorderable ? `<th scope="col" x-show="rows.length" class="fi-has-action"><span class="fi-sr-only">${e(tr('columns.reorder.label'))}</span></th>` : ''}<th scope="col">${e(keyLabel)}</th><th scope="col">${e(valueLabel)}</th><th scope="col" x-show="rows.length" class="fi-has-action"><span class="fi-sr-only">${e(tr('columns.actions.label'))}</span></th></tr></thead><tbody${this._reorderable ? ' x-on:end.stop="reorderRows($event)" x-sortable data-sortable-animation-duration="300"' : ''}><template x-bind:key="row.id" x-for="(row, index) in rows"><tr${this._reorderable ? ' x-bind:x-sortable-item="row.id"' : ''}>${reorderCell}<td><input aria-label="${e(keyLabel)}" placeholder="" type="text" x-model="row.key" x-on:input.debounce.500ms="updateState" class="fi-input" /></td><td><input aria-label="${e(valueLabel)}" placeholder="" type="text" x-model="row.value" x-on:input.debounce.500ms="updateState" class="fi-input" /></td><td class="fi-has-action"><div x-on:click="deleteRow(index)"><button title="${e(tr('actions.delete.label'))}" aria-label="${e(tr('actions.delete.label'))}" ${iconButton} class="${dangerClasses}">${icon('m-trash')}</button></div></td></tr></template></tbody></table><span x-ref="reorderStatus" class="fi-sr-only" role="status" aria-live="polite" aria-atomic="true"></span><div x-on:click="addRow" class="fi-fo-key-value-add-action-ctn"><button ${iconButton} class="fi-ac-link-action fi-link fi-size-md"><span class="fi-link-label">${e(tr('actions.add.label'))}</span></button></div></div></div></div>`, { labelAsDiv: true, wrapperClass: 'fi-fo-key-value-wrp' });
+ })" wire:ignore wire:key="${e(key)}" class="fi-fo-key-value-table-ctn"><table aria-labelledby="${e(id)}-label" id="${e(id)}" class="fi-fo-key-value-table"><thead><tr>${this._reorderable ? `<th scope="col" x-show="rows.length" class="fi-has-action"><span class="fi-sr-only">${e(tr('columns.reorder.label'))}</span></th>` : ''}<th scope="col">${e(keyLabel)}</th><th scope="col">${e(valueLabel)}</th>${this._deletable ? `<th scope="col" x-show="rows.length" class="fi-has-action"><span class="fi-sr-only">${e(tr('columns.actions.label'))}</span></th>` : ''}</tr></thead><tbody${this._reorderable ? ' x-on:end.stop="reorderRows($event)" x-sortable data-sortable-animation-duration="300"' : ''}><template x-bind:key="row.id" x-for="(row, index) in rows"><tr${this._reorderable ? ' x-bind:x-sortable-item="row.id"' : ''}>${reorderCell}<td><input aria-label="${e(keyLabel)}" placeholder="${e(this._keyPlaceholder ?? '')}" ${this._editableKeys ? '' : 'disabled '}type="text" x-model="row.key" x-on:input.debounce.500ms="updateState" class="fi-input" /></td><td><input aria-label="${e(valueLabel)}" placeholder="${e(this._valuePlaceholder ?? '')}" ${this._editableValues ? '' : 'disabled '}type="text" x-model="row.value" x-on:input.debounce.500ms="updateState" class="fi-input" /></td>${this._deletable ? `<td class="fi-has-action"><div x-on:click="deleteRow(index)"><button title="${e(this._deleteLabel ?? tr('actions.delete.label'))}" aria-label="${e(this._deleteLabel ?? tr('actions.delete.label'))}" ${iconButton} class="${dangerClasses}">${icon('m-trash')}</button></div></td>` : ''}</tr></template></tbody></table><span x-ref="reorderStatus" class="fi-sr-only" role="status" aria-live="polite" aria-atomic="true"></span>${this._addable ? `<div x-on:click="addRow" class="fi-fo-key-value-add-action-ctn"><button ${iconButton} class="fi-ac-link-action fi-link fi-size-md"><span class="fi-link-label">${e(this._addLabel ?? tr('actions.add.label'))}</span></button></div>` : ''}</div></div></div>`, { labelAsDiv: true, wrapperClass: 'fi-fo-key-value-wrp' });
     }
 }
 /** Developer-written JavaScript expression (e.g. a Slider tooltip formatter), inserted as is: never put user data in it. */
@@ -1153,10 +2529,10 @@ function accessibilityOf(field, options = {}) {
 }
 /** Second `$entangle()` argument: true only for a plain `live()` field (no `onBlur`, no `debounce`). */
 const entangleLive = (live) => (live !== null && !live.onBlur && live.debounce === null ? 'true' : 'false');
-const MARKDOWN_TOOLBAR = [['bold', 'italic', 'strike', 'link'], ['heading'], ['blockquote', 'codeBlock', 'bulletList', 'orderedList'], ['table'], ['undo', 'redo']];
+const MARKDOWN_TOOLBAR = [['bold', 'italic', 'strike', 'link'], ['heading'], ['blockquote', 'codeBlock', 'bulletList', 'orderedList'], ['table', 'attachFiles'], ['undo', 'redo']];
 /**
  * Markdown editor (EasyMDE). The state is raw Markdown text, to sanitize before any HTML display.
- * Attachments are not supported (no `attachFiles` button by default); when read-only (`disabled()`),
+ * Files can be attached (images, stored on upload) when a storage is set (`fileAttachmentsStorage()` or `FileUpload.storage`); when read-only (`disabled()`),
  * the text is shown escaped, without Markdown conversion.
  */
 export class MarkdownEditor extends Field {
@@ -1191,9 +2567,31 @@ export class MarkdownEditor extends Field {
     async getValidationRules() {
         return [...(await super.getValidationRules()), { name: 'string', passes: (v) => typeof v === 'string', message: (a) => `The ${a} field must be a string.` }];
     }
+    _attachmentsStorage = null;
+    _attachmentsDirectory = null;
+    _attachmentTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+    _attachmentMaxSize = 12288;
+    /** Where attached files are stored (`FileUpload.storage` by default); without storage, the "Attach files" button is hidden. */
+    fileAttachmentsStorage(storage) { this._attachmentsStorage = storage; return this; }
+    fileAttachmentsDirectory(directory) { this._attachmentsDirectory = directory; return this; }
+    /** Accepted types of attached files (images), checked on the file's content. */
+    fileAttachmentsAcceptedFileTypes(types) { this._attachmentTypes = types.filter((type) => type.startsWith('image/') && type !== 'image/svg+xml'); return this; }
+    /** Maximum size of attached files, in kilobytes. */
+    fileAttachmentsMaxSize(kilobytes) { this._attachmentMaxSize = kilobytes; return this; }
+    canAttachFiles() { return this.hasToolbarButton('attachFiles') && (this._attachmentsStorage ?? FileUpload.storage) !== null; }
+    visibleToolbar() {
+        if (this.canAttachFiles())
+            return this._toolbarButtons;
+        return this._toolbarButtons.map((group) => (Array.isArray(group) ? group.filter((name) => name !== 'attachFiles') : group)).filter((group) => (Array.isArray(group) ? group.length > 0 : group !== 'attachFiles'));
+    }
     getExposedMethods() { return ['getUploadedFileAttachmentTemporaryUrl', 'saveUploadedFileAttachmentAndGetUrl']; }
     getUploadedFileAttachmentTemporaryUrl() { return null; }
-    saveUploadedFileAttachmentAndGetUrl() { return null; }
+    /** Stores the file just uploaded to `componentFileAttachments.<state path>` and returns its URL. */
+    async saveUploadedFileAttachmentAndGetUrl() {
+        if (!this.canAttachFiles() || (await this.isDisabled()))
+            return null;
+        return storeEditorAttachment(this, null, { storage: this._attachmentsStorage ?? FileUpload.storage, directory: this._attachmentsDirectory, types: this._attachmentTypes, maxSize: this._attachmentMaxSize });
+    }
     async toHtml() {
         const id = this.getId();
         const accessibility = accessibilityOf(this);
@@ -1214,7 +2612,7 @@ export class MarkdownEditor extends Field {
             tools: Object.fromEntries(['attach_files', 'blockquote', 'bold', 'bullet_list', 'code_block', 'heading', 'italic', 'link', 'ordered_list', 'redo', 'strike', 'table', 'undo'].map((tool) => [tool, tr(`tools.${tool}`)])),
         };
         const config = `markdownEditorFormComponent({
- canAttachFiles: false,
+ canAttachFiles: ${this.canAttachFiles() ? 'true' : 'false'},
  isLiveDebounced: ${this._live?.debounce !== null && this._live?.debounce !== undefined ? 'true' : 'false'},
  isLiveOnBlur: ${this._live?.onBlur ? 'true' : 'false'},
  label: ${js(await this.getLabel())},
@@ -1223,10 +2621,26 @@ export class MarkdownEditor extends Field {
  minHeight: ${js(this._minHeight)},
  placeholder: ${js(this._placeholder)},
  state: $wire.$entangle(${js(this.getStatePath())}, ${entangleLive(this._live)}),
- toolbarButtons: ${js(this._toolbarButtons)},
+ toolbarButtons: ${js(this.visibleToolbar())},
  translations: ${js(translations)},
  uploadFileAttachmentUsing: async (file, onSuccess, onError) => {
+ const acceptedTypes = ${js(this._attachmentTypes)}
+ if (acceptedTypes && ! acceptedTypes.includes(file.type)) {
+ return onError(${js(tr('file_attachments_accepted_file_types_message').replace(':values', this._attachmentTypes.join(', ')))})
+ }
+ const maxSize = ${js(this._attachmentMaxSize)}
+ if (maxSize && file.size > +maxSize * 1024) {
+ return onError(${js(tr('file_attachments_max_size_message').replace(':max', String(this._attachmentMaxSize)))})
+ }
+ $wire.upload(${js(`componentFileAttachments.${this.getStatePath()}`)}, file, () => {
+ $saveUploadedFileAttachmentAndGetUrl()
+ .then((url) => {
+ if (! url) {
  return onError()
+ }
+ onSuccess(url)
+ })
+ })
  },
  })`;
         const wrapper = new Attributes().class(['fi-fo-markdown-editor', 'fi-input-wrp', { 'fi-invalid': this.hasError() }]);
@@ -1508,6 +2922,26 @@ export function fillSchemaFromRecord(schema, target, record) {
         writePath(target, segments, c.hydrateState(readPath(record, segments) ?? c.getDefaultState()));
     }
 }
+/** Fills the fields that load their state from the record's relationships (`loadStateFromRelationshipsUsing()`, `Select::relationship()`…). */
+export async function loadSchemaRelationships(schema, target, record) {
+    if (!record)
+        return;
+    for (const c of schema.getFlatComponents()) {
+        if (!(c instanceof Field))
+            continue;
+        const loaded = await c.loadStateFromRelationships(record);
+        if (loaded)
+            writePath(target, relativePath(schema, c), c.hydrateState(loaded.state));
+    }
+}
+/** Saves the visible fields that write the record's relationships, once the record is created or updated. */
+export async function saveSchemaRelationships(schema, record) {
+    if (!record)
+        return;
+    for (const c of await schema.getVisibleFlatComponents())
+        if (c instanceof Field && (await c.isDehydrated() || c._dehydrated === false) && (await c.savesRelationships()))
+            await c.saveRelationships(record);
+}
 /** Validates every visible field of a schema; returns errors by state path. */
 export async function validateSchema(schema) {
     const errors = {};
@@ -1524,11 +2958,21 @@ export async function validateSchema(schema) {
 export async function getSchemaState(schema) {
     const data = {};
     const fields = [];
+    const skipped = [];
     for (const c of await schema.getVisibleFlatComponents()) {
         if (!(c instanceof Field) || !(await c.isDehydrated()))
             continue;
+        // Relationship fields (and the fields of their items) save themselves after the record (see saveSchemaRelationships), unless forced with `dehydrated()`.
+        if (skipped.some((path) => c.getStatePath().startsWith(`${path}.`)))
+            continue;
+        if (c._dehydrated !== true && (await c.savesRelationships())) {
+            skipped.push(c.getStatePath());
+            continue;
+        }
         const state = await c.dehydrateState(c.context().state);
         writePath(data, relativePath(schema, c), state === '' || state === undefined ? null : state);
+        for (const [name, value] of Object.entries(c.getExtraDehydratedState?.() ?? {}))
+            writePath(data, [...relativePath(schema, c).slice(0, -1), name], value);
         fields.push(c);
     }
     // Deepest first: a container sees its children already shaped.
@@ -1716,6 +3160,60 @@ export class Wizard extends Component {
     }
 }
 /** Local disk storage, served under a public URL. File names are random; the extension comes from the detected type. */
+/**
+ * A file name chosen by the application or the user, made safe for storage: no directory part, only letters, digits, `_` and
+ * `-`, and always the extension detected from the file's content (an uploaded `shell.php` declared as an image is stored
+ * as `shell.png`).
+ */
+export function safeStorageName(name, extension) {
+    const base = (name.split(/[\\/]/).pop() ?? '').replace(/\.[^.]*$/, '').normalize('NFKD').replace(/[^A-Za-z0-9_-]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 180) || randomUUID();
+    return `${base}.${extension.replace(/[^A-Za-z0-9]/g, '') || 'bin'}`;
+}
+/** Width and height of a PNG, GIF, JPEG or WebP image, read from its header; `null` for other files. */
+export function readImageSize(path) {
+    let buffer;
+    try {
+        const fd = openSync(path, 'r');
+        buffer = Buffer.alloc(1024 * 1024);
+        const read = readSync(fd, buffer, 0, buffer.length, 0);
+        closeSync(fd);
+        buffer = buffer.subarray(0, read);
+    }
+    catch {
+        return null;
+    }
+    if (buffer.length >= 24 && buffer.readUInt32BE(0) === 0x89504e47)
+        return { width: buffer.readUInt32BE(16), height: buffer.readUInt32BE(20) };
+    if (buffer.length >= 10 && buffer.toString('ascii', 0, 3) === 'GIF')
+        return { width: buffer.readUInt16LE(6), height: buffer.readUInt16LE(8) };
+    if (buffer.length >= 30 && buffer.toString('ascii', 0, 4) === 'RIFF' && buffer.toString('ascii', 8, 12) === 'WEBP') {
+        const chunk = buffer.toString('ascii', 12, 16);
+        if (chunk === 'VP8X')
+            return { width: 1 + buffer.readUIntLE(24, 3), height: 1 + buffer.readUIntLE(27, 3) };
+        if (chunk === 'VP8L') {
+            const bits = buffer.readUInt32LE(21);
+            return { width: 1 + (bits & 0x3fff), height: 1 + ((bits >> 14) & 0x3fff) };
+        }
+        if (chunk === 'VP8 ')
+            return { width: buffer.readUInt16LE(26) & 0x3fff, height: buffer.readUInt16LE(28) & 0x3fff };
+        return null;
+    }
+    if (buffer.length >= 4 && buffer[0] === 0xff && buffer[1] === 0xd8) {
+        let offset = 2;
+        while (offset + 9 < buffer.length) {
+            if (buffer[offset] !== 0xff) {
+                offset++;
+                continue;
+            }
+            const marker = buffer[offset + 1];
+            if (marker >= 0xc0 && marker <= 0xcf && ![0xc4, 0xc8, 0xcc].includes(marker))
+                return { width: buffer.readUInt16BE(offset + 7), height: buffer.readUInt16BE(offset + 5) };
+            offset += 2 + buffer.readUInt16BE(offset + 2);
+        }
+    }
+    return null;
+}
+const ratioOf = (ratio) => { const [width, height] = ratio.split(/[:/]/).map(Number); return width > 0 && height > 0 ? width / height : null; };
 export class LocalFileStorage {
     root;
     baseUrl;
@@ -1725,13 +3223,24 @@ export class LocalFileStorage {
             return null;
         return nodePath.join(this.root, ...key.split('/'));
     }
-    async store(file, directory) {
-        const key = [directory, `${randomUUID()}.${file.extension}`].filter(Boolean).join('/');
+    async store(file, directory, name = null) {
+        let key = [directory, name === null ? `${randomUUID()}.${file.extension}` : safeStorageName(name, file.extension)].filter(Boolean).join('/');
+        // A chosen name never overwrites another file: a short random suffix is added.
+        if (name !== null && this.resolve(key) && existsSync(this.resolve(key)))
+            key = key.replace(/(\.[A-Za-z0-9]+)$/, `-${randomUUID().slice(0, 8)}$1`);
         const target = this.resolve(key);
         if (!target)
             throw new Error('Invalid upload directory.');
         mkdirSync(nodePath.dirname(target), { recursive: true });
-        copyFileSync(file.path, target);
+        try {
+            copyFileSync(file.path, target, fsConstants.COPYFILE_EXCL);
+        }
+        catch (error) {
+            // Another save took this name meanwhile: random suffix.
+            if (error?.code !== 'EEXIST' || name === null)
+                throw error;
+            return this.store(file, directory, `${safeStorageName(name, file.extension).replace(/\.[^.]*$/, '')}-${randomUUID().slice(0, 8)}`);
+        }
         writeFileSync(`${target}.meta.json`, JSON.stringify({ name: file.name, type: file.type }));
         return key;
     }
@@ -1764,7 +3273,107 @@ export class FileUpload extends Field {
     _storeFiles = true;
     _storage = null;
     _getUploadedFileUsing = null;
+    _minSize = null;
+    _ui = {};
+    _avatar = false;
+    _imageEditor = false;
+    _circleCropper = false;
+    _editorAspectRatios = [];
+    _cropAspectRatio = null;
+    _imageAspectRatios = null;
+    _dimensions = null;
+    _deletable = true;
+    _preserveFilenames = false;
+    _fileNameUsing = null;
+    _fileNamesField = null;
+    _storedNames = {};
+    _alignment = null;
+    _placeholder = null;
     static make(name) { return configured(new FileUpload(name)); }
+    /** Minimum file size, in kilobytes. */
+    minSize(kilobytes) { this._minSize = kilobytes; return this; }
+    /** Download button on each saved file. */
+    downloadable(condition = true) { this._ui.isDownloadable = condition; return this; }
+    /** Button opening each saved file in a new tab. */
+    openable(condition = true) { this._ui.isOpenable = condition; return this; }
+    /** `false`: no preview of images. */
+    previewable(condition = true) { this._ui.isPreviewable = condition; return this; }
+    /** `false`: files cannot be pasted from the clipboard. */
+    pasteable(condition = true) { this._ui.isPasteable = condition; return this; }
+    /** New files are added after the existing ones (instead of before). */
+    appendFiles(condition = true) { this._ui.shouldAppendFiles = condition; return this; }
+    /** `false`: saved files cannot be removed (the remove button is hidden, and removing is refused on the server). */
+    deletable(condition = true) { this._deletable = condition; return this; }
+    /** `'grid'` (with `multiple()`), `'compact'`, `'integrated'` or `'circle'`. */
+    panelLayout(layout) { this._ui.panelLayout = layout; return this; }
+    panelAspectRatio(ratio) { this._ui.panelAspectRatio = ratio; return this; }
+    itemPanelAspectRatio(ratio) { this._ui.itemPanelAspectRatio = ratio; return this; }
+    imagePreviewHeight(height) { this._ui.imagePreviewHeight = height; return this; }
+    loadingIndicatorPosition(position) { this._ui.loadingIndicatorPosition = position; return this; }
+    removeUploadedFileButtonPosition(position) { this._ui.removeUploadedFileButtonPosition = position; return this; }
+    uploadButtonPosition(position) { this._ui.uploadButtonPosition = position; return this; }
+    uploadProgressIndicatorPosition(position) { this._ui.uploadProgressIndicatorPosition = position; return this; }
+    /** Message shown while a file uploads. */
+    uploadingMessage(message) { this._ui.uploadingMessage = message; return this; }
+    /** Number of files uploaded at the same time. */
+    maxParallelUploads(count) { this._ui.maxParallelUploads = count; return this; }
+    /** Extension → MIME type map for files the browser cannot type (`{ zip: 'application/zip' }`). */
+    mimeTypeMap(map) { this._ui.mimeTypeMap = map; return this; }
+    /** `false`: images keep their EXIF orientation. */
+    orientImagesFromExif(condition = true) { this._ui.shouldOrientImageFromExif = condition; return this; }
+    alignment(alignment) { this._alignment = alignment; return this; }
+    /** Text of the drop area. */
+    placeholder(text) { this._placeholder = text; return this; }
+    /** Round avatar: one image, cropped to a square and shown as a circle. */
+    avatar() { this._avatar = true; this.image(); this._ui.panelLayout ??= 'compact circle'; this._ui.imagePreviewHeight ??= '250'; this._cropAspectRatio ??= '1:1'; this._ui.automaticallyResizeImagesHeight ??= '500'; this._ui.automaticallyResizeImagesWidth ??= '500'; this._ui.loadingIndicatorPosition ??= 'center bottom'; this._ui.removeUploadedFileButtonPosition ??= 'center bottom'; this._ui.uploadButtonPosition ??= 'center bottom'; this._ui.uploadProgressIndicatorPosition ??= 'center bottom'; this._alignment ??= 'center'; return this; }
+    /** Image editor (crop, rotate, flip, zoom) opened from each image, powered by Cropper.js in the browser. */
+    imageEditor(condition = true) { this._imageEditor = condition; return this; }
+    /** Aspect ratios offered by the image editor (`['16:9', '4:3', '1:1']`; `null` for a free crop). */
+    imageEditorAspectRatioOptions(ratios) { this._editorAspectRatios = ratios; return this; }
+    imageEditorAspectRatios(ratios) { return this.imageEditorAspectRatioOptions(ratios); }
+    /** Cropper.js view mode (1, 2 or 3). */
+    imageEditorMode(mode) { this._ui.imageEditorMode = mode; return this; }
+    imageEditorEmptyFillColor(color) { this._ui.imageEditorEmptyFillColor = color; return this; }
+    imageEditorViewportWidth(width) { this._ui.imageEditorViewportWidth = width === null ? null : String(width); return this; }
+    imageEditorViewportHeight(height) { this._ui.imageEditorViewportHeight = height === null ? null : String(height); return this; }
+    _autoOpenEditor = true;
+    /** With `imageEditor()` and a single aspect ratio, opens the editor when an uploaded image has another ratio (on by default). */
+    automaticallyOpenImageEditorForAspectRatio(condition = true) { this._autoOpenEditor = condition; return this; }
+    autoOpenEditorRatio() {
+        if (!this._imageEditor || !this._autoOpenEditor)
+            return null;
+        const ratio = this._cropAspectRatio ?? (this._imageAspectRatios?.length === 1 ? this._imageAspectRatios[0] : null);
+        return ratio === null ? null : ratioOf(ratio);
+    }
+    /** Circle crop in the image editor (avatars). */
+    circleCropper(condition = true) { this._circleCropper = condition; return this; }
+    /** Crops images to this ratio in the browser before upload (`'16:9'`), without opening the editor. */
+    automaticallyCropImagesToAspectRatio(ratio) { this._cropAspectRatio = ratio; return this; }
+    imageCropAspectRatio(ratio) { return this.automaticallyCropImagesToAspectRatio(ratio); }
+    /** Resizes images in the browser before upload (`'cover'`, `'contain'` or `'force'`). */
+    automaticallyResizeImagesMode(mode) { this._ui.automaticallyResizeImagesMode = mode; return this; }
+    automaticallyResizeImagesToWidth(width) { this._ui.automaticallyResizeImagesWidth = width === null ? null : String(width); return this; }
+    automaticallyResizeImagesToHeight(height) { this._ui.automaticallyResizeImagesHeight = height === null ? null : String(height); return this; }
+    automaticallyUpscaleImagesWhenResizing(condition = true) { this._ui.shouldAutomaticallyUpscaleImagesWhenResizing = condition; return this; }
+    imageResizeMode(mode) { return this.automaticallyResizeImagesMode(mode); }
+    imageResizeTargetWidth(width) { return this.automaticallyResizeImagesToWidth(width); }
+    imageResizeTargetHeight(height) { return this.automaticallyResizeImagesToHeight(height); }
+    /** Accepted aspect ratio(s) of uploaded images (`'16:9'` or a list), checked on the server. */
+    imageAspectRatio(ratio) { this._imageAspectRatios = ratio === null ? null : [ratio].flat(); return this; }
+    /** Width, height and ratio bounds of uploaded images (`{ minWidth: 800, maxHeight: 1080 }`), checked on the server. */
+    imageDimensions(dimensions) { this._dimensions = dimensions; return this; }
+    /** Stores files under their original (sanitized) names. See the security notes in the docs. */
+    preserveFilenames(condition = true) { this._preserveFilenames = condition; return this; }
+    /** Name of the stored file, from the temporary file; sanitized, and its extension is the detected one. */
+    getUploadedFileNameForStorageUsing(callback) { this._fileNameUsing = callback; return this; }
+    /** Saves the original file names (keyed by stored file) in another attribute of the record. */
+    storeFileNamesIn(field) { this._fileNamesField = field; return this; }
+    /** Extra saved values, next to the field (the original file names of `storeFileNamesIn()`). */
+    getExtraDehydratedState() {
+        if (this._fileNamesField === null)
+            return {};
+        return { [this._fileNamesField]: this._multiple ? this._storedNames : (Object.values(this._storedNames)[0] ?? null) };
+    }
     multiple(condition = true) { this._multiple = condition; return this; }
     maxFiles(count) { this._maxFiles = count; return this; }
     /** Maximum file size, in kilobytes. */
@@ -1799,6 +3408,23 @@ export class FileUpload extends Field {
         return new Set(Object.values(this.hydrateState(record?.[this.getName()])));
     }
     isTemporary(value) { return value.startsWith('livewire-file:'); }
+    /** Original names saved by `storeFileNamesIn()`, by stored key. */
+    savedFileNames() {
+        if (this._fileNamesField === null)
+            return {};
+        const record = this.container.getRecord();
+        let names = record?.[this._fileNamesField];
+        if (typeof names === 'string') {
+            try {
+                names = JSON.parse(names);
+            }
+            catch {
+                const key = [...this.originalKeys()][0];
+                return key ? { [key]: names } : {};
+            }
+        }
+        return names && typeof names === 'object' && !Array.isArray(names) ? Object.fromEntries(Object.entries(names).filter(([, name]) => typeof name === 'string')) : {};
+    }
     getExposedMethods() { return ['deleteUploadedFile', 'removeUploadedFile', 'reorderUploadedFiles', 'getUploadedFiles']; }
     async getUploadedFiles() {
         const original = this.originalKeys();
@@ -1809,6 +3435,9 @@ export class FileUpload extends Field {
                 continue;
             }
             const info = this._getUploadedFileUsing ? await this._getUploadedFileUsing(value, this.context()) : await this.getStorage()?.info(value);
+            const savedName = this.savedFileNames()[value];
+            if (info && savedName)
+                info.name = savedName;
             // Only local or http(s) URLs are sent to the browser.
             files[fileKey] = info && /^(\/(?!\/)|https?:\/\/)/.test(info.url) ? info : null;
         }
@@ -1818,6 +3447,9 @@ export class FileUpload extends Field {
     /** Removes a file from the field. A stored file is only deleted by the application when the form is saved. */
     removeUploadedFile(fileKey) {
         const removed = this.entries().find(([key]) => key === fileKey);
+        // `deletable(false)`: a saved file stays (a file just uploaded can still be removed).
+        if (removed && !this._deletable && !this.isTemporary(removed[1]))
+            return;
         if (removed && this.isTemporary(removed[1]))
             this.uploads?.remove(removed[1].slice('livewire-file:'.length));
         this.writeState(this.entries().filter(([key]) => key !== fileKey));
@@ -1846,6 +3478,23 @@ export class FileUpload extends Field {
             rules.push({ name: 'mimetypes', passes: () => temporary().every((file) => file !== null && accepts(file.type)), message: (a) => `The ${a} field must be a file of type: ${this._acceptedFileTypes.join(', ')}.` });
         if (this._maxSize !== null)
             rules.push({ name: 'max', passes: () => temporary().every((file) => file !== null && file.size <= this._maxSize * 1024), message: (a) => `The ${a} field must not be greater than ${this._maxSize} kilobytes.` });
+        if (this._minSize !== null)
+            rules.push({ name: 'min', passes: () => temporary().every((file) => file !== null && file.size >= this._minSize * 1024), message: (a) => `The ${a} field must be at least ${this._minSize} kilobytes.` });
+        // Image rules only apply to new uploads, as in Laravel; a file whose size cannot be read fails them.
+        if (this._dimensions) {
+            const d = this._dimensions;
+            const fits = (size) => size !== null
+                && (d.width === undefined || size.width === d.width) && (d.height === undefined || size.height === d.height)
+                && (d.minWidth === undefined || size.width >= d.minWidth) && (d.maxWidth === undefined || size.width <= d.maxWidth)
+                && (d.minHeight === undefined || size.height >= d.minHeight) && (d.maxHeight === undefined || size.height <= d.maxHeight)
+                && (d.ratio === undefined || Math.abs(size.width / size.height - d.ratio) < 0.01)
+                && (d.minRatio === undefined || size.width / size.height >= d.minRatio - 1e-9) && (d.maxRatio === undefined || size.width / size.height <= d.maxRatio + 1e-9);
+            rules.push({ name: 'dimensions', passes: () => temporary().every((file) => file !== null && fits(readImageSize(file.path))), message: (a) => `The ${a} field has invalid image dimensions.` });
+        }
+        if (this._imageAspectRatios) {
+            const ratios = this._imageAspectRatios.map(ratioOf).filter((ratio) => ratio !== null);
+            rules.push({ name: 'dimensions', passes: () => temporary().every((file) => { const size = file && readImageSize(file.path); return !!size && size.height > 0 && ratios.some((ratio) => Math.abs(size.width / size.height - ratio) < 0.01); }), message: (a) => `The ${a} field has invalid image dimensions.` });
+        }
         return rules;
     }
     /** Validates the whole state, even when empty (a required field without files must fail). */
@@ -1861,6 +3510,8 @@ export class FileUpload extends Field {
     /** On save: temporary files are stored, unrecognized existing keys are dropped. */
     async dehydrateState() {
         const original = this.originalKeys();
+        const savedNames = this.savedFileNames();
+        this._storedNames = {};
         const out = [];
         for (const [, value] of this.entries()) {
             if (this.isTemporary(value)) {
@@ -1874,74 +3525,115 @@ export class FileUpload extends Field {
                 const storage = this.getStorage();
                 if (!storage)
                     throw new Error('FileUpload: no storage configured (FileUpload.storage).');
-                out.push(await storage.store(file, this._directory));
+                const name = this._fileNameUsing ? await this._fileNameUsing(file, this.context()) : this._preserveFilenames ? file.name : null;
+                const stored = await storage.store(file, this._directory, name);
+                this._storedNames[stored] = file.name;
+                out.push(stored);
                 this.uploads?.remove(file.id);
             }
-            else if (original.has(value))
+            else if (original.has(value)) {
                 out.push(this._storeFiles ? value : { key: value });
+                if (savedNames[value])
+                    this._storedNames[value] = savedNames[value];
+            }
         }
+        // `deletable(false)`: a saved file the browser dropped from the state is kept.
+        if (!this._deletable)
+            for (const key of original)
+                if (!out.some((item) => item === key || (typeof item === 'object' && 'key' in item && item.key === key))) {
+                    out.push(this._storeFiles ? key : { key });
+                    if (savedNames[key])
+                        this._storedNames[key] = savedNames[key];
+                }
         return this._multiple ? out : (out[0] ?? null);
     }
+    /** Filament's image editor dialog (Cropper.js), rendered once per field. */
+    imageEditorHtml() {
+        const tr = (key, replace = {}) => t(`filament-forms::components.file_upload.editor.${key}`, replace);
+        const explicit = this._imageEditor;
+        const fields = [
+            ['x_position', 'xPositionInput', 'editor.setData({...editor.getData(true), x: +$el.value})'], ['y_position', 'yPositionInput', 'editor.setData({...editor.getData(true), y: +$el.value})'],
+            ['width', 'widthInput', 'editor.setData({...editor.getData(true), width: +$el.value})'], ['height', 'heightInput', 'editor.setData({...editor.getData(true), height: +$el.value})'],
+            ['rotation', 'rotationInput', 'editor.rotateTo(+$el.value)'],
+        ].map(([name, ref, save]) => `<label><div class="fi-input-wrp"><div class="fi-input-wrp-prefix fi-input-wrp-prefix-has-content fi-input-wrp-prefix-has-label"><span class="fi-input-wrp-label">${e(tr(`fields.${name}.label`))}</span></div><div class="fi-input-wrp-content-ctn"><input x-on:keyup.enter.prevent.stop="editor &amp;&amp; ${e(save)}" x-on:blur="editor &amp;&amp; ${e(save)}" x-ref="${ref}" x-on:keydown.enter.prevent type="text" class="fi-input" /></div><div class="fi-input-wrp-suffix fi-input-wrp-suffix-has-label"><span class="fi-input-wrp-label">${e(tr(`fields.${name}.unit`))}</span></div></div></label>`).join('');
+        const groups = [
+            [['drag_move', 'fi-o-arrows-move', "editor.setDragMode('move')"], ['drag_crop', 'fi-o-crop', "editor.setDragMode('crop')"], ['zoom_in', 'o-magnifying-glass-plus', 'editor.zoom(0.1)'], ['zoom_out', 'o-magnifying-glass-minus', 'editor.zoom(-0.1)'], ['zoom_100', 'o-arrows-pointing-out', 'editor.zoomTo(1)']],
+            [['move_left', 'o-arrow-left-circle', 'editor.move(-10, 0)'], ['move_right', 'o-arrow-right-circle', 'editor.move(10, 0)'], ['move_up', 'o-arrow-up-circle', 'editor.move(0, -10)'], ['move_down', 'o-arrow-down-circle', 'editor.move(0, 10)']],
+            [['rotate_left', 'o-arrow-uturn-left', 'editor.rotate(-90)'], ['rotate_right', 'o-arrow-uturn-right', 'editor.rotate(90)'], ['flip_horizontal', 'fi-o-flip-horizontal', 'editor.scaleX(-editor.getData().scaleX || -1)'], ['flip_vertical', 'fi-o-flip-vertical', 'editor.scaleY(-editor.getData().scaleY || -1)']],
+        ].map((group) => `<div class="fi-btn-group">${group.map(([name, iconName, click]) => { const label = tr(`actions.${name}.label`); return `<button aria-label="${e(label)}" type="button" x-on:click.prevent.stop="${e(click)}" x-tooltip="${e(`{ content: ${js(label)}, theme: $store.theme }`)}" class="fi-btn">${icon(iconName)}</button>`; }).join('')}</div>`).join('');
+        const ratioOptions = [...this._editorAspectRatios, ...(this._cropAspectRatio !== null ? [this._cropAspectRatio] : [])].filter((ratio, index, all) => all.indexOf(ratio) === index)
+            .map((ratio) => [ratio === null ? tr('aspect_ratios.no_fixed.label') : ratio.replace('/', ':'), ratio === null ? 'NaN' : (ratioOf(ratio) ?? 'NaN')]);
+        const ratios = ratioOptions.length >= 2 ? `<div class="fi-fo-file-upload-editor-control-panel-group"><div class="fi-fo-file-upload-editor-control-panel-group-title">${e(tr('aspect_ratios.label'))}</div>${Array.from({ length: Math.ceil(ratioOptions.length / 5) }, (_, chunk) => `<div class="fi-btn-group">${ratioOptions.slice(chunk * 5, chunk * 5 + 5).map(([label, ratio]) => `<button type="button" x-on:click.prevent.stop="${e(`currentRatio = ${js(label)}; editor.setAspectRatio(${ratio === 'NaN' ? 'NaN' : ratio})`)}" x-tooltip="${e(`{ content: ${js(tr('actions.set_aspect_ratio.label', { ratio: label }))}, theme: $store.theme }`)}" x-bind:class="${e(`{ 'fi-active': currentRatio === ${js(label)} }`)}" class="fi-btn">${e(label)}</button>`).join('')}</div>`).join('')}</div>` : '';
+        const success = cls(['fi-btn', ...(colorManager?.getComponentClasses('button', 'success') ?? [])]);
+        const cancel = `<button type="button" x-on:click.prevent="pond.imageEditEditor.oncancel" class="fi-btn">${e(tr('actions.cancel.label'))}</button>`;
+        const save = `<button type="button" x-on:click.prevent="saveEditor" class="${success}">${e(tr('actions.save.label'))}</button>`;
+        const main = explicit ? `<div class="fi-fo-file-upload-editor-control-panel-main"><div class="fi-fo-file-upload-editor-control-panel-group">${fields}</div><div class="fi-fo-file-upload-editor-control-panel-group">${groups}</div>${ratios}<div class="fi-fo-file-upload-editor-control-panel-reset-action-ctn"><button type="button" x-on:click.prevent.stop="editor.reset()" class="${cls(['fi-link', 'fi-size-sm', 'fi-fo-file-upload-editor-control-panel-reset-action', ...(colorManager?.getComponentClasses('link', 'danger') ?? [])])}"><span class="fi-link-label">${e(tr('actions.reset.label'))}</span></button></div></div>` : '';
+        return `<div aria-label="${e(tr('label'))}" aria-modal="true" role="dialog" x-show="isEditorOpen" x-cloak x-on:click.stop="" x-trap.noscroll="isEditorOpen" x-on:keydown.escape.prevent.stop="closeEditor" class="${cls(['fi-fo-file-upload-editor', { 'fi-fo-file-upload-editor-circle-cropper': this._circleCropper, 'fi-fo-file-upload-editor-crop-only': !explicit }])}"><div aria-hidden="true" class="fi-fo-file-upload-editor-overlay"></div><div class="fi-fo-file-upload-editor-window"><div class="fi-fo-file-upload-editor-image-ctn"><img alt="" x-ref="editor" class="fi-fo-file-upload-editor-image" /></div><div class="fi-fo-file-upload-editor-control-panel">${main}<div class="fi-fo-file-upload-editor-control-panel-footer">${explicit ? cancel + save : save + cancel}</div></div></div></div>`;
+    }
     async toHtml() {
         const isDisabled = await this.isDisabled();
         const id = this.getId();
         const label = (await this.getLabel()).toLowerCase();
         const tr = (key) => t(`filament-forms::components.file_upload.${key}`);
+        const ui = (key, fallback) => (this._ui[key] === undefined ? fallback : this._ui[key]);
+        const hasEditor = (this._imageEditor || this._cropAspectRatio !== null || this._circleCropper) && !isDisabled;
         const config = `fileUploadFormComponent({
  acceptedFileTypes: ${this._acceptedFileTypes ? js(this._acceptedFileTypes) : 'null'},
- automaticallyCropImagesAspectRatio: null,
- automaticallyOpenImageEditorForAspectRatio: null,
- automaticallyResizeImagesMode: null,
- automaticallyResizeImagesHeight: null,
- automaticallyResizeImagesWidth: null,
+ automaticallyCropImagesAspectRatio: ${js(this._cropAspectRatio)},
+ automaticallyOpenImageEditorForAspectRatio: ${js(this.autoOpenEditorRatio())},
+ automaticallyResizeImagesMode: ${js(ui('automaticallyResizeImagesMode', null))},
+ automaticallyResizeImagesHeight: ${js(ui('automaticallyResizeImagesHeight', null))},
+ automaticallyResizeImagesWidth: ${js(ui('automaticallyResizeImagesWidth', null))},
  canEditSvgs: true,
  confirmSvgEditingMessage: ${js(tr('editor.svg.messages.confirmation'))},
  disabledSvgEditingMessage: ${js(tr('editor.svg.messages.disabled'))},
- hasCircleCropper: false,
- hasImageEditor: false,
- imageEditorEmptyFillColor: null,
- imageEditorMode: 1,
- imageEditorViewportHeight: null,
- imageEditorViewportWidth: null,
- imagePreviewHeight: null,
- isAvatar: false,
- isDeletable: true,
+ hasCircleCropper: ${js(this._circleCropper)},
+ hasImageEditor: ${js(hasEditor)},
+ imageEditorEmptyFillColor: ${js(ui('imageEditorEmptyFillColor', null))},
+ imageEditorMode: ${js(ui('imageEditorMode', 1))},
+ imageEditorViewportHeight: ${js(ui('imageEditorViewportHeight', null))},
+ imageEditorViewportWidth: ${js(ui('imageEditorViewportWidth', null))},
+ imagePreviewHeight: ${js(ui('imagePreviewHeight', null))},
+ isAvatar: ${js(this._avatar)},
+ isDeletable: ${js(this._deletable)},
  isDisabled: ${isDisabled ? 'true' : 'false'},
- isDownloadable: false,
- isImageEditorExplicitlyEnabled: false,
+ isDownloadable: ${js(ui('isDownloadable', false))},
+ isImageEditorExplicitlyEnabled: ${js(this._imageEditor)},
  isMultiple: ${this._multiple ? 'true' : 'false'},
- isOpenable: false,
- isPasteable: true,
- isPreviewable: true,
+ isOpenable: ${js(ui('isOpenable', false))},
+ isPasteable: ${js(ui('isPasteable', true))},
+ isPreviewable: ${js(ui('isPreviewable', true))},
  isReorderable: ${this._reorderable ? 'true' : 'false'},
  isSvgEditingConfirmed: false,
- itemPanelAspectRatio: null,
- loadingIndicatorPosition: 'right',
+ itemPanelAspectRatio: ${js(ui('itemPanelAspectRatio', null))},
+ loadingIndicatorPosition: ${js(ui('loadingIndicatorPosition', 'right'))},
  locale: 'en',
  maxFiles: ${this._maxFiles ?? 'null'},
  maxFilesValidationMessage: ${this._maxFiles !== null ? js(`The ${label} field must not have more than ${this._maxFiles} items.`) : 'null'},
- maxParallelUploads: null,
+ maxParallelUploads: ${js(ui('maxParallelUploads', null))},
  maxSize: ${this._maxSize !== null ? js(`${this._maxSize}KB`) : 'null'},
- mimeTypeMap: [],
- minSize: null,
- panelAspectRatio: null,
- panelLayout: 'compact',
- placeholder: null,
- removeUploadedFileButtonPosition: 'left',
- shouldAppendFiles: false,
- shouldAutomaticallyUpscaleImagesWhenResizing: true,
- shouldOrientImageFromExif: true,
- shouldTransformImage: false,
+ mimeTypeMap: ${ui('mimeTypeMap', null) ? js(ui('mimeTypeMap', null)) : '[]'},
+ minSize: ${this._minSize !== null ? js(`${this._minSize}KB`) : 'null'},
+ panelAspectRatio: ${js(ui('panelAspectRatio', null))},
+ panelLayout: ${js(ui('panelLayout', 'compact'))},
+ placeholder: ${js(this._placeholder)},
+ removeUploadedFileButtonPosition: ${js(ui('removeUploadedFileButtonPosition', 'left'))},
+ shouldAppendFiles: ${js(ui('shouldAppendFiles', false))},
+ shouldAutomaticallyUpscaleImagesWhenResizing: ${js(ui('shouldAutomaticallyUpscaleImagesWhenResizing', true))},
+ shouldOrientImageFromExif: ${js(ui('shouldOrientImageFromExif', true))},
+ shouldTransformImage: ${js(Boolean(this._cropAspectRatio || ui('automaticallyResizeImagesHeight', null) || ui('automaticallyResizeImagesWidth', null)))},
  state: $wire.$entangle(${js(this.getStatePath())}, false),
  statePath: ${js(this.getStatePath())},
- uploadButtonPosition: 'right',
- uploadingMessage: ${js(t('filament::components/button.messages.uploading_file'))},
+ uploadButtonPosition: ${js(ui('uploadButtonPosition', 'right'))},
+ uploadingMessage: ${js(ui('uploadingMessage', t('filament::components/button.messages.uploading_file')))},
  downloadActionLabel: ${js(tr('actions.download.label'))},
  openActionLabel: ${js(tr('actions.open.label'))},
- uploadProgressIndicatorPosition: 'right',
+ uploadProgressIndicatorPosition: ${js(ui('uploadProgressIndicatorPosition', 'right'))},
  })`;
-        const key = `${this.getLivewireKey()}.${createHash('md5').update(JSON.stringify([this._acceptedFileTypes, this._maxFiles, this._multiple, isDisabled])).digest('hex')}`;
+        const key = `${this.getLivewireKey()}.${createHash('md5').update(JSON.stringify([this._acceptedFileTypes, this._maxFiles, this._multiple, isDisabled, this._ui, this._imageEditor, this._cropAspectRatio])).digest('hex')}`;
         const input = new Attributes().merge({ 'x-ref': 'input', 'aria-labelledby': `${id}-label`, disabled: isDisabled, multiple: this._multiple ? 'multiple' : null, type: 'file' });
-        return this.wrap(`<div hidden data-field-accessibility data-preserve-filepond-description></div><div x-load x-load-src="${e(asset('file-upload'))}" x-data="${e(config)}" wire:ignore wire:key="${e(key)}" aria-labelledby="${e(id)}-label" id="${e(id)}" role="group" class="fi-fo-file-upload fi-align-start"><div class="fi-fo-file-upload-input-ctn"><input ${input.toHtml()} /></div><div x-show="error" x-text="error" x-cloak role="alert" class="fi-fo-file-upload-error-message"></div></div>`, { labelAsDiv: true });
+        return this.wrap(`<div hidden data-field-accessibility data-preserve-filepond-description></div><div x-load x-load-src="${e(asset('file-upload'))}" x-data="${e(config)}" wire:ignore wire:key="${e(key)}" aria-labelledby="${e(id)}-label" id="${e(id)}" role="group" class="${cls(['fi-fo-file-upload', { 'fi-fo-file-upload-avatar': this._avatar }, `fi-align-${this._alignment ?? 'start'}`])}"><div class="fi-fo-file-upload-input-ctn"><input ${input.toHtml()} /></div><div x-show="error" x-text="error" x-cloak role="alert" class="fi-fo-file-upload-error-message"></div>${hasEditor ? this.imageEditorHtml() : ''}</div>`, { labelAsDiv: true });
     }
 }
+// Modal wizards of actions (`Action.steps()`): the wizard is not contained, the last step submits the action.
+Action.stepsRenderer = (steps, submit, cancel) => Wizard.make(steps).contained(false).submitAction(submit).cancelAction(cancel);