@navette-js/forms 0.0.0-stage → 1.0.0-beta.2

package/lib/index.js

@@ -0,0 +1,1947 @@
+// @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 { 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 { Action } from '@navette-js/actions';
+import { loadingIndicator } from '@navette-js/support';
+import { randomUUID } from 'node:crypto';
+import { generateHTML, generateJSON } from '@tiptap/html/server';
+import StarterKit from '@tiptap/starter-kit';
+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 { 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';
+views.namespace('filament-forms', fileURLToPath(new URL('../views', import.meta.url)));
+let colorManager = null;
+export const useColorManager = (manager) => { colorManager = manager; };
+const asset = (name) => views.render('filament-forms::asset', { path: name }).trim();
+/** Number for an HTML attribute: beyond exact integers, a float with 14 significant digits (`1.844674407371E+19`). */
+const phpNumber = (n) => {
+    if (n === null || Number.isSafeInteger(n) || Math.abs(n) < 1e15)
+        return 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);
+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;
+    _required = false;
+    _disabled = false;
+    _autofocus = false;
+    _default = null;
+    _rules = [];
+    _afterStateUpdated = null;
+    _dehydrated = null;
+    _hiddenLabel = false;
+    _helperText = null;
+    constructor(name) { super(); this._name = name; }
+    hasStatePath() { return true; }
+    getName() { return this._name; }
+    getId() { return this.getKey(); }
+    label(label) { this._label = label; return this; }
+    required(condition = true) { this._required = condition; return this; }
+    disabled(condition = true) { this._disabled = condition; return this; }
+    autofocus(condition = true) { this._autofocus = condition; return this; }
+    default(value) { this._default = value; return this; }
+    /** Helper text shown under the field. */
+    helperText(text) { this._helperText = text; 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. */
+    hiddenLabel(condition = true) { this._hiddenLabel = condition; return this; }
+    _hint = null;
+    _hintColor = null;
+    _hintIcon = null;
+    _hintIconTooltip = null;
+    _hintActions = [];
+    /**
+     * Hint shown to the right of the label (a `Text` component). The text is escaped; an `HtmlString` from `@navette-js/support`
+     * (`raw('<a href="…">…</a>')`) is inserted as is, so only put values escaped with `e()` in it.
+     */
+    hint(hint) { this._hint = hint; return this; }
+    /** Color of the hint and its icon (by default `gray` for the text, `primary` for the icon). */
+    hintColor(color) { this._hintColor = color; return this; }
+    /** Hint icon, with an optional tooltip (also used as its accessible name). */
+    hintIcon(name, tooltip) {
+        this._hintIcon = name;
+        if (arguments.length >= 2)
+            this._hintIconTooltip = tooltip ?? null;
+        return this;
+    }
+    hintIconTooltip(tooltip) { this._hintIconTooltip = tooltip; return this; }
+    /** Action shown after the hint (small link), mounted on the field. */
+    hintAction(action) { return this.hintActions([action]); }
+    hintActions(actions) { this._hintActions = [...this._hintActions, ...actions]; return this; }
+    getHintActions() { return this._hintActions; }
+    /** Actions the field exposes for mounting (`schemaComponent` = field key): its hint actions. */
+    getActions() { return this.getHintActions(); }
+    /** Row after the label: hint, hint icon and hint actions. */
+    async renderAfterLabel() {
+        const ctx = this.context();
+        const hint = await evaluate(this._hint, ctx);
+        const color = await evaluate(this._hintColor, ctx);
+        const iconName = await evaluate(this._hintIcon, ctx);
+        const items = [];
+        if (hint !== null && hint !== undefined && (hint instanceof HtmlString ? hint.html : hint) !== '')
+            items.push(Text.make(hint).color(color));
+        if (iconName)
+            items.push(SchemaIcon.make(iconName).tooltip(await evaluate(this._hintIconTooltip, ctx)).color(color));
+        items.push(...this._hintActions);
+        if (!items.length)
+            return '';
+        // Row components take the field's path, and the field's schema path as their container path.
+        return renderInlineItems(this, items, { alignment: 'end', scope: { path: this.getStatePath(), containerPath: this.container.getStatePath() }, mountKey: this.getKey(), actionView: 'link' });
+    }
+    /** Runs on the server when the field state changes (`live()` field). `set(name, value)` changes another field of the same form. */
+    afterStateUpdated(callback) { this._afterStateUpdated = callback; return this; }
+    hasAfterStateUpdated() { return this._afterStateUpdated !== null; }
+    async callAfterStateUpdated(set) { await this._afterStateUpdated?.({ ...this.context(), set }); }
+    /** Forces the field into the submitted data, even when disabled (`.disabled().dehydrated()`). */
+    dehydrated(condition = true) { this._dehydrated = condition; return this; }
+    /** By default, a disabled field is neither validated nor saved. */
+    async isDehydrated() { return this._dehydrated ?? !(await this.isDisabled()); }
+    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; }
+    /** `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({
+            name: 'unique',
+            passes: async (value, ctx) => {
+                const host = ctx.livewire;
+                const adapter = host.getDataAdapter?.();
+                if (!adapter)
+                    throw new Error('unique(): the host component provides no data adapter (getDataAdapter).');
+                const ignored = options.ignoreRecord ? (ctx.record ? adapter.getKey(ctx.record) : (host.getRecordKey?.() ?? null)) : null;
+                return !(await adapter.exists(options.column ?? this._name, value, ignored));
+            },
+            message: (a) => `The ${a} has already been taken.`,
+        });
+    }
+    async getLabel() { return (await evaluate(this._label, this.context())) ?? headline(this._name); }
+    isRequired() { return evaluate(this._required, this.context()); }
+    isDisabled() { return evaluate(this._disabled, this.context()); }
+    getErrors() { return this.livewire._errors[this.getStatePath()] ?? []; }
+    hasError() { return this.getErrors().length > 0; }
+    /** Validation rules: `required` first, then the field's own. */
+    async getValidationRules() {
+        const rules = [];
+        if (await this.isRequired())
+            rules.push({ name: 'required', passes: (v) => !blank(v) && v !== false, message: (a) => `The ${a} field is required.` });
+        return [...rules, ...this._rules];
+    }
+    async validate() {
+        // A field that is not saved (`dehydrated(false)`: confirmation, current password) is still validated;
+        // only a disabled field (not forced by `dehydrated()`) is skipped.
+        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();
+        for (const rule of await this.getValidationRules()) {
+            if (rule.name !== 'required' && blank(value))
+                continue;
+            if (!(await rule.passes(value, this.context())))
+                return [rule.message(attribute)];
+        }
+        return [];
+    }
+    /** Value written to the data to save (composite fields only leave a skeleton, filled by their children). */
+    dehydrateState(state) { return state; }
+    /** Final shaping of the saved value, once child fields are dehydrated (e.g. a Builder's item list). */
+    finalizeDehydratedState(state) { return state; }
+    async wrap(html, options = {}) {
+        const errors = this.getErrors();
+        // FusedGroup field: the wrapper is reduced to a screen-reader label.
+        if (this.container.getFieldWrapperView?.() === 'filament-forms::plain-field-wrapper') {
+            const label = await this.getLabel();
+            const labelHtml = label === '' ? '' : options.labelAsDiv ? `<div id="${e(this.getId())}-label" class="fi-fo-field-label fi-sr-only">${e(label)}</div>` : `<label for="${e(this.getId())}" class="fi-fo-field-label fi-sr-only">${e(label)}</label>`;
+            return `<div data-field-wrapper class="fi-fo-field">${labelHtml}${options.labelPrefix ?? ''}${html}${options.after ?? ''}</div>`;
+        }
+        // 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>`;
+        return views.render('filament-forms::components.field-wrapper', {
+            id: this.getId(), label: await this.getLabel(), required: (await this.isRequired()) && !(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,
+        });
+    }
+}
+export class TextInput extends Field {
+    _type = null;
+    _isPassword = false;
+    _isRevealable = false;
+    _autocomplete = null;
+    _maxLength = null;
+    _minLength = null;
+    _placeholder = null;
+    _numeric = null;
+    _minValue = null;
+    _maxValue = null;
+    _prefix = null;
+    _live = null;
+    static make(name) { return configured(new TextInput(name)); }
+    /** 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"`. */
+    integer() { this._numeric = 'integer'; return this.rule({ name: 'integer', passes: (v) => /^-?\d+$/.test(String(v).trim()), message: (a) => `The ${a} field must be an integer.` }); }
+    _step = null;
+    /** Input `step` of a numeric field, overriding the one implied by `numeric()` or `integer()`. */
+    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; }
+    _suffix = null;
+    /** Label shown after the input ("hours", "kg"…). */
+    suffix(label) { this._suffix = label; 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. */
+    autocomplete(value = true) { this._autocomplete = value === true ? 'on' : value === false ? 'off' : value; return this; }
+    placeholder(text) { this._placeholder = text; return this; }
+    _mask = null;
+    /** Alpine input mask (`(999) 999-9999`): guides typing in the browser, with no validation value. */
+    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.` }); }
+    /** 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);
+        }
+        catch {
+            return false;
+        } }, message: (a) => `The ${a} field must be a valid URL.` }); }
+    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(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.` }); }
+    async toHtml() {
+        const isDisabled = await this.isDisabled();
+        const revealable = this._isPassword && this._isRevealable;
+        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()
+            .merge({
+            '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,
+            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,
+            // 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 }]);
+        const wrapper = new Attributes()
+            .merge({
+            'x-data': revealable ? 'passwordRevealFormComponent()' : this._mask !== null ? '{}' : null,
+            'x-load': revealable ? '' : null,
+            'x-load-src': revealable ? views.render('filament-forms::asset', { path: 'text-input/password-reveal' }).trim() : null,
+            'x-on:focus-input.stop': "$el.querySelector('input')?.focus()",
+        })
+            .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,
+            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>`);
+    }
+}
+/**
+ * Dropdown. Native (`<select>`) by default; `searchable()` switches to the JavaScript select,
+ * which queries the server through the exposed methods (`getSearchResultsForJs`…).
+ */
+export class Select extends Field {
+    _options = [];
+    _placeholder = null;
+    _searchable = false;
+    _dynamic = null;
+    _searchOnServer = null;
+    _live = false;
+    _hasNoInitialOptions = false;
+    _multiple = false;
+    _optionLabelsUsing = null;
+    _disableOptionWhen = null;
+    _searchResultsUsing = null;
+    _optionLabelUsing = null;
+    static make(name) { return configured(new Select(name)); }
+    /** Search results computed by the server on every keystroke (no preloaded option list). */
+    getSearchResultsUsing(resolver) { this._searchResultsUsing = resolver; this._searchable = true; return this; }
+    /** Label of a value; also used to validate that a searched value exists. */
+    getOptionLabelUsing(resolver) { this._optionLabelUsing = resolver; return this; }
+    /**
+     * Fixed options, or a (possibly async) function evaluated on every request.
+     * `dynamic: false`: options come from a function but stay fixed for the page's lifetime (announced as static to the browser).
+     * `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; }
+    /** 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. */
+    live(condition = true) { this._live = condition; return this; }
+    placeholder(label) { this._placeholder = label; return this; }
+    _selectablePlaceholder = true;
+    /** `false`: the native select has no empty option. */
+    selectablePlaceholder(condition = true) { this._selectablePlaceholder = condition; return this; }
+    searchable(condition = true) { this._searchable = condition; return this; }
+    /** Multiple selection: the state is a list of values; always uses the JavaScript select. */
+    multiple(condition = true) { this._multiple = condition; if (condition)
+        this._searchable = true; return this; }
+    isMultiple() { return this._multiple; }
+    /** Labels of several values at once (multiple selection with server search); also used to validate the values. */
+    getOptionLabelsUsing(resolver) { this._optionLabelsUsing = resolver; return this; }
+    getDefaultState() { return this._default ?? (this._multiple ? [] : null); }
+    /** Sanitized selected values: unique strings. */
+    selectedValues() { const state = this.context().state; return [...new Set((Array.isArray(state) ? state : []).filter((v) => typeof v === 'string' || typeof v === 'number').map(String))]; }
+    async labelsOf(values) {
+        if (!values.length)
+            return [];
+        const known = 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; }
+    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() {
+        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)]);
+    }
+    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()), { 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())); }
+    withDisabled(options) {
+        if (!this._disableOptionWhen)
+            return options;
+        const ctx = this.context();
+        return options.map((option) => ({ ...option, isDisabled: this._disableOptionWhen(option.value, ctx) }));
+    }
+    async getSearchResultsForJs(search = '') {
+        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)));
+    }
+    async getOptionLabel() {
+        const state = this.context().state;
+        if (state === null || state === undefined || state === '')
+            return null;
+        if (this._optionLabelUsing)
+            return this._optionLabelUsing(String(state), this.context());
+        return (await this.resolveOptions()).find(([value]) => value === String(state))?.[1] ?? null;
+    }
+    async getOptionLabelsForJs() { return this._multiple ? (await this.labelsOf(this.selectedValues())).map(([value, label]) => ({ label, value })) : []; }
+    _createOptionForm = null;
+    _createOptionUsing = null;
+    _createOptionModalHeading = null;
+    _modifyCreateOptionAction = null;
+    _editOptionForm = null;
+    _updateOptionUsing = null;
+    _fillEditOptionForm = null;
+    _editOptionModalHeading = null;
+    _modifyEditOptionAction = null;
+    /**
+     * Form of the "Create" modal opened by the field's "+" button, validated on the server.
+     * `createOptionUsing()` saves the option and returns its value, which becomes the field state (appended for `multiple()`).
+     * Options must come from a function (`options(() => …)`, or server search) for the new value to appear.
+     */
+    createOptionForm(schema) { this._createOptionForm = schema; return this; }
+    /** Saves the option from the validated modal data; returns the value (key) of the created option. */
+    createOptionUsing(callback) { this._createOptionUsing = callback; return this; }
+    createOptionModalHeading(heading) { this._createOptionModalHeading = heading; return this; }
+    /** Customizes the create action (label, icon, modal width…). */
+    createOptionAction(modify) { this._modifyCreateOptionAction = modify; return this; }
+    /**
+     * Form of the "Edit" modal for the selected option (single selection only). The field becomes `live()` so the button
+     * appears as soon as an option is picked. Filled by `fillEditOptionActionFormUsing()`, saved by `updateOptionUsing()`.
+     */
+    editOptionForm(schema) { this._editOptionForm = schema; this._live = true; return this; }
+    updateOptionUsing(callback) { this._updateOptionUsing = callback; return this; }
+    /** Initial data of the "Edit" modal (the context carries the current field state in `state`). */
+    fillEditOptionActionFormUsing(callback) { this._fillEditOptionForm = callback; return this; }
+    editOptionModalHeading(heading) { this._editOptionModalHeading = heading; return this; }
+    editOptionAction(modify) { this._modifyEditOptionAction = modify; return this; }
+    /** Same form for creating and editing. */
+    manageOptionForm(schema) { return this.createOptionForm(schema).editOptionForm(schema); }
+    setState(value) { writePath(this.livewire, this.getStatePath().split('.'), value); }
+    getCreateOptionAction() {
+        if (!this._createOptionForm)
+            return null;
+        const tr = (key) => t(`filament-forms::components.select.actions.create_option.${key}`);
+        const action = Action.make('createOption').label(tr('label')).icon('m-plus').iconButton().color('gray')
+            .hidden(() => this.isDisabled())
+            .modalHeading(this._createOptionModalHeading ?? tr('modal.heading'))
+            .modalSubmitActionLabel(tr('modal.actions.create.label'))
+            .schema(this._createOptionForm)
+            .action(async ({ data }) => {
+            if (!this._createOptionUsing)
+                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));
+            await this.callAfterStateUpdated((name, value) => writePath(this.livewire, [...this.container.getStatePath().split('.').filter(Boolean), ...name.split('.')], value));
+        });
+        // Multiple selection: "Create & create another" keeps the modal open on an empty form.
+        if (this._multiple)
+            action.extraModalFooterActions([Action.make('createAnother').label(tr('modal.actions.create_another.label')).color('gray').action(`callMountedAction(${js({ another: true })})`)]);
+        return this._modifyCreateOptionAction?.(action) ?? action;
+    }
+    getEditOptionAction() {
+        if (!this._editOptionForm || this._multiple)
+            return null;
+        const tr = (key) => t(`filament-forms::components.select.actions.edit_option.${key}`);
+        const filled = () => { const state = this.context().state; return state !== null && state !== undefined && state !== ''; };
+        const action = Action.make('editOption').label(tr('label')).icon('m-pencil-square').iconButton().color('gray')
+            .hidden(async () => (await this.isDisabled()) || !filled())
+            .modalHeading(this._editOptionModalHeading ?? tr('modal.heading'))
+            .modalSubmitActionLabel(tr('modal.actions.save.label'))
+            .schema(this._editOptionForm)
+            .fillForm(async () => (await this._fillEditOptionForm?.(this.context())) ?? {})
+            .action(async ({ data }) => {
+            if (!this._updateOptionUsing)
+                throw new Error(`Select [${this.getStatePath()}]: updateOptionUsing() is required with editOptionForm().`);
+            await this._updateOptionUsing(data, this.context());
+        });
+        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. */
+    async suffixHtml() {
+        const ctx = this.context();
+        const context = { ...(this.livewire.getActionMountContext?.() ?? {}), schemaComponent: this.getKey() };
+        const buttons = [];
+        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>` : '';
+    }
+    async toHtml() {
+        const isDisabled = await this.isDisabled();
+        const resolved = await this.resolveOptions();
+        const suffix = await this.suffixHtml();
+        if (this._searchable) {
+            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 });
+        }
+        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' });
+    }
+    /** JavaScript select rendering. */
+    async toJsHtml(options, isDisabled, suffix = '') {
+        const state = this.context().state;
+        const hasState = !this._multiple && state !== null && state !== undefined && state !== '';
+        const selected = this._multiple ? await this.labelsOf(this.selectedValues()) : [];
+        const isRequired = (await this.isRequired()) && !isDisabled;
+        // 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));
+        // 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);
+        const config = `selectFormComponent({
+ canOptionLabelsWrap: true,
+ canSelectPlaceholder: true,
+ 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'},
+ 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,
+ isMultiple: ${this._multiple ? 'true' : 'false'},
+ isReorderable: false,
+ isSearchable: true,
+ 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'))},
+ options: ${forJs.length ? js(forJs) : '[]'},
+ optionsLimit: 50,
+ placeholder: ${js(this._placeholder ?? tr('placeholder'))},
+ position: null,
+ removeButtonLabel: ${js(tr('actions.remove_option.label'))},
+ searchDebounce: 1000,
+ searchingMessage: ${js(tr('searching_message'))},
+ searchLabel: ${js(tr('search_label'))},
+ searchPrompt: ${js(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="{
+ isDisabled: ${isDisabled ? 'true' : 'false'},
+ init() {
+ const container = $el.nextElementSibling
+ container.dispatchEvent(
+ new CustomEvent('set-select-property', {
+ detail: { isDisabled: this.isDisabled },
+ }),
+ )
+ },
+ }"></div><div x-load x-load-src="${e(asset('select'))}" x-data="${e(config)}" wire:ignore wire:key="${e(key)}" x-on:set-select-property="$event.detail.isDisabled ? select.disable() : select.enable()" class="fi-select-input"><div x-ref="select"></div></div></div>${suffix}</div>`;
+    }
+}
+/** Column of a table Repeater: label and width. */
+export class TableColumn {
+    label;
+    _width = null;
+    constructor(label) { this.label = label; }
+    static make(label) { return configured(new TableColumn(label)); }
+    width(width) { this._width = typeof width === 'number' ? `${width}px` : width; return this; }
+    getWidth() { return this._width; }
+}
+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.
+ * The state is a map `item key → fields`; key order is display order.
+ * Add, delete and move are component actions, mounted with `schemaComponent`.
+ */
+export class Repeater extends Field {
+    _schema = () => [];
+    _columns = [];
+    _defaultItems = 0;
+    _maxItems = 500;
+    _itemLinks = [];
+    static make(name) { return configured(new Repeater(name)); }
+    /** Item fields: a function called for each item. */
+    schema(factory) { this._schema = factory; return this; }
+    /** Table display, one column per field. */
+    table(columns) { this._columns = columns; return this; }
+    defaultItems(count) { this._defaultItems = count; return this; }
+    maxItems(count) { this._maxItems = 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; }
+    /** Link shown on each row (an item action pointing to a URL). */
+    extraItemLink(resolver) { this._itemLinks.push(resolver); return this; }
+    /** Well-formed items only: keys come from the browser, so only simple keys are kept. */
+    getItems() {
+        const state = this.context().state;
+        if (!state || typeof state !== 'object' || Array.isArray(state))
+            return {};
+        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()])); }
+    getDefaultState() { return Object.fromEntries(Array.from({ length: this._defaultItems }, () => [randomUUID(), this.itemDefaults()])); }
+    /** Relationship records → `record-<id>` items, limited to the declared fields. */
+    hydrateState(value) {
+        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())]))]));
+    }
+    dehydrateState() { return Object.fromEntries(Object.keys(this.getItems()).map((key) => [key, {}])); }
+    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()));
+    }
+    async getValidationRules() {
+        const rules = [];
+        if (await this.isRequired())
+            rules.push({ name: 'required', passes: () => Object.keys(this.getItems()).length > 0, message: (a) => `The ${a} field is required.` });
+        return [...rules, ...this._rules];
+    }
+    getActions() {
+        const move = (offset) => ({ arguments: args }) => {
+            const items = this.getItems();
+            const keys = Object.keys(items);
+            const from = keys.indexOf(String(args.item));
+            const to = from + offset;
+            if (from < 0 || to < 0 || to >= keys.length)
+                return;
+            [keys[from], keys[to]] = [keys[to], keys[from]];
+            this.setItems(Object.fromEntries(keys.map((key) => [key, items[key]])));
+        };
+        return [
+            ...this.getHintActions(),
+            Action.make('add').action(() => { const items = this.getItems(); if (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))
+                return; delete items[key]; this.setItems(items); }),
+            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 }) => {
+                const items = this.getItems();
+                const keys = Object.keys(items);
+                const order = Array.isArray(args.items) ? args.items.map(String) : [];
+                if (order.length !== keys.length || new Set(order).size !== keys.length || !order.every((key) => Object.hasOwn(items, key)))
+                    return;
+                this.setItems(Object.fromEntries(order.map((key) => [key, items[key]])));
+            }),
+        ];
+    }
+    async toHtml() {
+        if (!colorManager)
+            throw new Error('No color manager: call useColorManager().');
+        const id = this.getId();
+        const key = this.getKey();
+        const livewireKey = this.getLivewireKey() ?? '';
+        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 button = 'fi-ac-icon-btn-action fi-icon-btn';
+        const loading = (target) => `${loadingIndicator(new Attributes({ 'wire:loading.delay.default': '', 'wire:target': target }))}`;
+        const actionIcon = (name, target) => icon(name, { attributes: new Attributes({ 'wire:loading.remove.delay.default': '1', 'wire:target': target }) });
+        const itemLabel = tr('reordering.item');
+        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;
+        for (const [index, itemKey] of keys.entries()) {
+            const moveButton = (action, label, iconName, direction, disabled) => {
+                const expr = expression(action, { item: itemKey });
+                return `<div x-on:click.stop class="fi-sr-only"><button title="${e(label)}" ${disabled ? 'aria-disabled="true" ' : ''}aria-label="${e(label)}" ${disabled ? 'disabled="disabled" ' : ''}tabindex="-1" type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="${button}${disabled ? ' fi-disabled' : ''} fi-size-sm" data-reorder-hidden="data-reorder-hidden" data-reorder-direction="${direction}" data-reorder-action="${e(expr)}" aria-describedby="${e(descriptionId(itemKey))}" wire:click="${e(expr)}">${actionIcon(iconName, expr)}${loading(expr)}</button></div>`;
+            };
+            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)
+                .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>`);
+        }
+        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>`;
+        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>`);
+    }
+}
+/** Native `datetime-local` input: the saved state is `YYYY-MM-DD HH:MM:SS`. */
+export class DateTimePicker extends Field {
+    _seconds = true;
+    static make(name) { return configured(new DateTimePicker(name)); }
+    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;
+    }
+    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 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>`);
+    }
+}
+/** Single choice as radio buttons. */
+export class Radio extends Field {
+    _options = [];
+    _descriptions = {};
+    _inline = false;
+    _live = false;
+    static make(name) { return configured(new Radio(name)); }
+    options(options) { this._options = (Array.isArray(options) ? options : Object.entries(options)).map(([value, label]) => [String(value), String(label)]); return this; }
+    /** Helper text per value, under the option label. */
+    descriptions(descriptions) { this._descriptions = descriptions; return this; }
+    /** Options side by side. */
+    inline(condition = true) { this._inline = condition; return this; }
+    live(condition = true) { this._live = condition; return this; }
+    async getValidationRules() {
+        return [...(await super.getValidationRules()), { name: 'in', passes: (v) => this._options.some(([value]) => value === String(v)), message: (a) => `The selected ${a} is invalid.` }];
+    }
+    async toHtml() {
+        const id = this.getId();
+        const isDisabled = await this.isDisabled();
+        const isRequired = (await this.isRequired()) && !isDisabled;
+        const container = new Attributes()
+            .merge({ 'aria-describedby': this.hasError() ? `${id}-error` : null, 'aria-labelledby': `${id}-label`, 'aria-required': isRequired ? 'true' : null, role: 'radiogroup' })
+            .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() })
+                .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>`;
+        });
+        return this.wrap(`<div ${container.toHtml()}>${items.join('')}</div>`, { labelAsDiv: true });
+    }
+}
+export class Textarea extends Field {
+    _rows = null;
+    _maxLength = null;
+    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.` }); }
+    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(),
+        });
+        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,
+ state: $wire.$entangle(${e(js(this.getStatePath()))}),
+ })" x-model="state" ${textarea.toHtml()}></textarea></div></div></div>`, { wrapperClass: 'fi-fo-textarea-wrp' });
+    }
+}
+/** Tag list input: the state is an array of strings. */
+export class TagsInput extends Field {
+    _placeholder = null;
+    _suggestions = [];
+    _splitKeys = [];
+    static make(name) { return configured(new TagsInput(name)); }
+    placeholder(text) { this._placeholder = text; return this; }
+    /** Values suggested while typing. */
+    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; }
+    getDefaultState() { return this._default ?? []; }
+    hydrateState(value) {
+        if (typeof value === 'string') {
+            try {
+                value = JSON.parse(value);
+            }
+            catch {
+                value = value === '' ? [] : [value];
+            }
+        }
+        return Array.isArray(value) ? value.filter((tag) => typeof tag === 'string' || typeof tag === 'number').map(String) : [];
+    }
+    /** 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().');
+        const id = this.getId();
+        const isDisabled = await this.isDisabled();
+        const label = await this.getLabel();
+        const wrapper = new Attributes()
+            .merge({ 'aria-label': label, role: 'group', 'x-on:focus-input.stop': "$el.querySelector('input')?.focus()" })
+            .class(['fi-fo-tags-input', 'fi-input-wrp', { 'fi-disabled': isDisabled, 'fi-invalid': this.hasError() }]);
+        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 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' });
+    }
+}
+/** On/off switch. */
+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'; }
+    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 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>` : ''}` });
+    }
+}
+/** Single choice shown as buttons. */
+export class ToggleButtons extends Field {
+    _options = [];
+    _inline = false;
+    _grouped = false;
+    _colors = {};
+    _icons = {};
+    static make(name) { return configured(new ToggleButtons(name)); }
+    _live = false;
+    /** Sends the state to the server as soon as it changes. */
+    live(condition = true) { this._live = condition; return this; }
+    /** Color per value (e.g. from an enum). */
+    colors(colors) { this._colors = colors; return this; }
+    /** Icon per value. */
+    icons(icons) { this._icons = icons; return this; }
+    options(options) { this._options = (Array.isArray(options) ? options : Object.entries(options)).map(([value, label]) => [String(value), String(label)]); return this; }
+    /** Buttons side by side. */
+    inline(condition = true) { this._inline = condition; return this; }
+    /** Buttons joined into a single group. */
+    grouped(condition = true) { this._grouped = condition; return this; }
+    async getValidationRules() {
+        return [...(await super.getValidationRules()), { name: 'in', passes: (v) => this._options.some(([value]) => value === String(v)), message: (a) => `The selected ${a} is invalid.` }];
+    }
+    async toHtml() {
+        if (!colorManager)
+            throw new Error('No color manager: call useColorManager().');
+        const id = this.getId();
+        const isDisabled = await this.isDisabled();
+        const isRequired = (await this.isRequired()) && !isDisabled;
+        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]);
+        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 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>`;
+            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 });
+    }
+}
+// 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];
+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));
+/** 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); }
+/**
+ * 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.
+ */
+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);
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Rich text editor: the browser works on a TipTap document, the database receives HTML.
+ * Not supported yet: attachments, custom blocks, mentions.
+ */
+export class RichEditor extends Field {
+    static make(name) { return configured(new RichEditor(name)); }
+    hydrateState(value) { return isRichDocument(value) ? value : richHtmlToDocument(typeof value === 'string' ? value : ''); }
+    getDefaultState() { return richHtmlToDocument(typeof this._default === 'string' ? this._default : ''); }
+    dehydrateState(state) { return richDocumentToHtml(state); }
+    async getValidationRules() {
+        const rules = [];
+        if (await this.isRequired())
+            rules.push({ name: 'required', passes: (value) => richDocumentToHtml(value) !== null, message: (a) => `The ${a} field is required.` });
+        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. */
+    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')
+                .fillForm(({ arguments: args }) => ({ url: typeof args.url === 'string' ? args.url : null, shouldOpenInNewTab: args.shouldOpenInNewTab === true }))
+                .schema(() => [
+                TextInput.make('url').label(tr('modal.form.url.label'))
+                    // Only URLs that cannot execute code are accepted.
+                    .rule({ name: 'url', passes: (value) => /^(https?:\/\/|mailto:|tel:|\/|#)/i.test(String(value)), message: (a) => `The ${a} field must be a valid URL.` }),
+                Checkbox.make('shouldOpenInNewTab').label(tr('modal.form.should_open_in_new_tab.label')),
+            ])
+                .action(({ livewire, arguments: args, data }) => {
+                const selection = (args.editorSelection ?? null);
+                const single = selection?.head === selection?.anchor;
+                const url = typeof data.url === 'string' && data.url !== '' ? data.url : null;
+                const commands = [
+                    ...(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 });
+            }),
+        ];
+    }
+    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 });
+    }
+}
+/** 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.` });
+    }
+    async toHtml() {
+        const isDisabled = await this.isDisabled();
+        const state = this.context().state;
+        const id = this.getId();
+        const key = this.getLivewireKey() ?? '';
+        // Key hash over the serialized `[isDisabled]` options.
+        const hash = createHash('md5').update(`a:1:{i:0;b:${isDisabled ? 1 : 0};}`).digest('hex');
+        const input = new Attributes().merge({
+            'aria-controls': `${id}-panel`, 'aria-expanded': 'false', 'aria-haspopup': 'dialog', 'aria-invalid': this.hasError() ? 'true' : null, autocomplete: 'off',
+            disabled: isDisabled, id, required: (await this.isRequired()) && !isDisabled, role: 'combobox', type: 'text', 'x-model': 'state',
+        }).class(['fi-input']);
+        const wrapper = new Attributes().merge({ 'x-on:focus-input.stop': "$el.querySelector('input')?.focus()" }).class(['fi-fo-color-picker', 'fi-input-wrp', { 'fi-disabled': isDisabled, 'fi-invalid': this.hasError() }]);
+        return this.wrap(`<div ${wrapper.toHtml()}><div class="fi-input-wrp-content-ctn"><div x-load x-load-src="${e(asset('color-picker'))}" x-data="colorPickerFormComponent({
+ isAutofocused: false,
+ isDisabled: ${isDisabled ? 'true' : 'false'},
+ isLive: false,
+ isLiveDebounced: false,
+ isLiveOnBlur: false,
+ liveDebounce: null,
+ 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>`);
+    }
+}
+export class Checkbox extends Field {
+    static make(name) { return configured(new Checkbox(name)); }
+    getDefaultState() { return this._default ?? false; }
+    async toHtml() {
+        const input = new Attributes()
+            .merge({ type: 'checkbox', disabled: await this.isDisabled(), id: this.getId(), required: await this.isRequired(), 'wire:model': this.getStatePath() })
+            .class(['fi-checkbox-input', this.hasError() ? 'fi-invalid' : 'fi-valid']);
+        return this.wrap('', { labelPrefix: `<input ${input.toHtml()} />` });
+    }
+}
+/** Checkboxes for a list of values (no search or "select all" yet). */
+export class CheckboxList extends Field {
+    _options = [];
+    _optionColumns = null;
+    static make(name) { return configured(new CheckboxList(name)); }
+    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; }
+    getDefaultState() { return this._default ?? []; }
+    hydrateState(value) {
+        let list = value;
+        if (typeof value === 'string') {
+            try {
+                list = JSON.parse(value);
+            }
+            catch {
+                list = [];
+            }
+        }
+        return (Array.isArray(list) ? list : []).map(String);
+    }
+    /** Only offered values are kept, without duplicates, in option order. */
+    dehydrateState(state) {
+        const chosen = new Set((Array.isArray(state) ? state : []).map(String));
+        return this._options.map(([value]) => value).filter((value) => chosen.has(value));
+    }
+    async getValidationRules() {
+        const known = new Set(this._options.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 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;"';
+        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 });
+    }
+}
+/** Free-form key/value pairs, saved as an object. */
+export class KeyValue extends Field {
+    _keyLabel = null;
+    _valueLabel = null;
+    _reorderable = false;
+    static make(name) { return configured(new KeyValue(name)); }
+    keyLabel(label) { this._keyLabel = label; return this; }
+    valueLabel(label) { this._valueLabel = label; return this; }
+    reorderable(condition = true) { this._reorderable = condition; 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); }
+    static toPairs(value) {
+        let object = value;
+        if (typeof value === 'string') {
+            try {
+                object = JSON.parse(value);
+            }
+            catch {
+                object = {};
+            }
+        }
+        return object && typeof object === 'object' && !Array.isArray(object) ? Object.entries(object).map(([key, v]) => ({ key, value: v })) : [];
+    }
+    hydrateState(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 = {};
+        if (!Array.isArray(state))
+            return out;
+        for (const pair of state.slice(0, 200)) {
+            if (!pair || typeof pair !== 'object' || typeof pair.key !== 'string')
+                continue;
+            const value = pair.value;
+            const name = pair.key.trim().slice(0, 255);
+            if (!name || name === '__proto__' || name === 'constructor' || name === 'prototype')
+                continue;
+            out[name] = value === null || value === undefined || typeof value === 'object' ? null : String(value).slice(0, 5000);
+        }
+        return out;
+    }
+    async toHtml() {
+        const id = this.getId();
+        const tr = (key) => t(`filament-forms::components.key_value.${key}`);
+        const keyLabel = this._keyLabel ?? tr('fields.key.label'), valueLabel = this._valueLabel ?? tr('fields.value.label');
+        const reordering = { row: tr('reordering.row'), position: tr('reordering.position'), moved: tr('reordering.moved') };
+        const key = `${this.getLivewireKey()}.${createHash('md5').update(JSON.stringify([keyLabel, valueLabel, this._reorderable])).digest('hex')}`;
+        const iconButton = 'type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled"';
+        const dangerClasses = ['fi-ac-icon-btn-action', 'fi-icon-btn', 'fi-size-sm', ...(colorManager?.getComponentClasses('icon-button', 'danger') ?? [])].join(' ');
+        const reorderCell = this._reorderable ? `<td class="fi-has-action"><span class="fi-sr-only" data-reorder-description x-bind:id="$id('key-value-row') + '-' + row.id" x-text="rowDescription(row, index)"></span><div x-sortable-handle class="fi-fo-key-value-table-row-sortable-handle"><button title="${e(tr('actions.reorder.label'))}" aria-label="${e(tr('actions.reorder.label'))}" ${iconButton} class="fi-ac-icon-btn-action fi-icon-btn fi-size-sm" x-bind:tabindex="rows.length &gt; 1 ? -1 : 0" x-bind:aria-hidden="rows.length &gt; 1 ? 'true' : null">${icon('m-arrows-up-down')}</button></div><div class="fi-sr-only"><button type="button" tabindex="-1" data-reorder-hidden data-reorder-direction="up" x-on:click.stop="moveRow(row.id, index - 1)" x-bind:disabled="index === 0" x-bind:aria-describedby="$id('key-value-row') + '-' + row.id">${e(tr('actions.move_up.label'))}</button><button type="button" tabindex="-1" data-reorder-hidden data-reorder-direction="down" x-on:click.stop="moveRow(row.id, index + 1)" x-bind:disabled="index === rows.length - 1" x-bind:aria-describedby="$id('key-value-row') + '-' + row.id">${e(tr('actions.move_down.label'))}</button></div></td>` : '';
+        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' });
+    }
+}
+/** Developer-written JavaScript expression (e.g. a Slider tooltip formatter), inserted as is: never put user data in it. */
+export class RawJs {
+    js;
+    constructor(js) { this.js = js; }
+    static make(js) { return new RawJs(js); }
+    toString() { return this.js; }
+}
+/** Simple CSS length (`10rem`, `300px`, `50%`); anything else is rejected, since it ends up in a `style` attribute. */
+const cssLength = (value) => (value !== null && /^\d+(\.\d+)?(px|rem|em|%|vh|vw)$/.test(value.trim()) ? value.trim() : null);
+/** Field accessibility attributes: helper text and error message. */
+function accessibilityOf(field, options = {}) {
+    const ids = [field.getHelperTextId(), field.hasError() ? `${field.getId()}-error` : null].filter(Boolean);
+    return { 'aria-describedby': ids.length ? ids.join(' ') : null, 'aria-invalid': options.withInvalid !== false && field.hasError() ? 'true' : null };
+}
+/** 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']];
+/**
+ * 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()`),
+ * the text is shown escaped, without Markdown conversion.
+ */
+export class MarkdownEditor extends Field {
+    _toolbarButtons = MARKDOWN_TOOLBAR;
+    _minHeight = '10rem';
+    _maxHeight = null;
+    _placeholder = null;
+    _live = null;
+    static make(name) { return configured(new MarkdownEditor(name)); }
+    /** Toolbar buttons, grouped (`[['bold', 'italic'], ['undo', 'redo']]`) or flat. */
+    toolbarButtons(buttons) { this._toolbarButtons = buttons; return this; }
+    /** Removes buttons; with no argument, removes them all. */
+    disableToolbarButtons(names = []) {
+        this._toolbarButtons = names.length ? this._toolbarButtons.map((group) => (Array.isArray(group) ? group.filter((name) => !names.includes(name)) : group)).filter((group) => (Array.isArray(group) ? group.length > 0 : !names.includes(group))) : [];
+        return this;
+    }
+    disableAllToolbarButtons(condition = true) { if (condition)
+        this._toolbarButtons = []; return this; }
+    /** Adds buttons (in a separate group). */
+    enableToolbarButtons(names) { this._toolbarButtons = [...this._toolbarButtons, names]; return this; }
+    getToolbarButtons() { return this._toolbarButtons; }
+    hasToolbarButton(name) { return this._toolbarButtons.some((group) => (Array.isArray(group) ? group.includes(name) : group === name)); }
+    /** Minimum height of the editing area (`10rem` by default). */
+    minHeight(height) { this._minHeight = cssLength(height); return this; }
+    maxHeight(height) { this._maxHeight = cssLength(height); return this; }
+    placeholder(text) { this._placeholder = text; return this; }
+    /** Sends the state to the server while typing (`debounce` in milliseconds), or on blur with `onBlur`. */
+    live(options = {}) { this._live = { onBlur: options.onBlur === true, debounce: options.debounce ?? null }; return 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(length) { return this.rule({ name: 'min', passes: (v) => String(v).length >= length, message: (a) => `The ${a} field must be at least ${length} characters.` }); }
+    hydrateState(value) { return typeof value === 'string' ? value : null; }
+    async getValidationRules() {
+        return [...(await super.getValidationRules()), { name: 'string', passes: (v) => typeof v === 'string', message: (a) => `The ${a} field must be a string.` }];
+    }
+    getExposedMethods() { return ['getUploadedFileAttachmentTemporaryUrl', 'saveUploadedFileAttachmentAndGetUrl']; }
+    getUploadedFileAttachmentTemporaryUrl() { return null; }
+    saveUploadedFileAttachmentAndGetUrl() { return null; }
+    async toHtml() {
+        const id = this.getId();
+        const accessibility = accessibilityOf(this);
+        if (await this.isDisabled()) {
+            const state = this.context().state;
+            const attributes = new Attributes().merge({ 'aria-labelledby': `${id}-label`, 'aria-describedby': accessibility['aria-describedby'], id, role: 'group', tabindex: this._maxHeight ? '0' : null })
+                .style([this._minHeight ? `--min-height: ${this._minHeight}` : null, this._maxHeight ? `--max-height: ${this._maxHeight}` : null])
+                .class(['fi-fo-markdown-editor', 'fi-disabled', 'fi-prose']);
+            const content = typeof state === 'string' && state.trim() !== ''
+                ? state.split(/\n{2,}/).map((paragraph) => `<p>${e(paragraph.trim()).replace(/\n/g, '<br />')}</p>`).join('')
+                : `<span class="fi-fo-markdown-editor-placeholder">${e(this._placeholder ?? '')}</span>`;
+            return this.wrap(`<div ${attributes.toHtml()}>${content}</div>`, { labelAsDiv: true });
+        }
+        const tr = (key) => t(`filament-forms::components.markdown_editor.${key}`);
+        const translations = {
+            file_attachments_accepted_file_types_message: tr('file_attachments_accepted_file_types_message'),
+            file_attachments_max_size_message: tr('file_attachments_max_size_message'),
+            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,
+ isLiveDebounced: ${this._live?.debounce !== null && this._live?.debounce !== undefined ? 'true' : 'false'},
+ isLiveOnBlur: ${this._live?.onBlur ? 'true' : 'false'},
+ label: ${js(await this.getLabel())},
+ liveDebounce: ${js(this._live?.debounce ?? null)},
+ maxHeight: ${js(this._maxHeight)},
+ minHeight: ${js(this._minHeight)},
+ placeholder: ${js(this._placeholder)},
+ state: $wire.$entangle(${js(this.getStatePath())}, ${entangleLive(this._live)}),
+ toolbarButtons: ${js(this._toolbarButtons)},
+ translations: ${js(translations)},
+ uploadFileAttachmentUsing: async (file, onSuccess, onError) => {
+ return onError()
+ },
+ })`;
+        const wrapper = new Attributes().class(['fi-fo-markdown-editor', 'fi-input-wrp', { 'fi-invalid': this.hasError() }]);
+        return this.wrap(`<div ${wrapper.toHtml()}><div class="fi-input-wrp-content-ctn"><div hidden data-field-accessibility ${new Attributes().merge(accessibility).toHtml()}></div><div aria-labelledby="${e(id)}-label" id="${e(id)}" role="group" x-load x-load-src="${e(asset('markdown-editor'))}" x-data="${e(config)}" wire:ignore><textarea x-ref="editor" x-cloak></textarea></div></div></div>`, { labelAsDiv: true });
+    }
+}
+const CODE_LANGUAGES = ['cpp', 'css', 'go', 'html', 'java', 'javascript', 'json', 'markdown', 'php', 'python', 'sql', 'xml', 'yaml'];
+/** Code editor (CodeMirror): highlighting from `language()`, line wrapping with `wrap()`. */
+export class CodeEditor extends Field {
+    _language = null;
+    _canWrap = false;
+    _live = null;
+    static make(name) { return configured(new CodeEditor(name)); }
+    /** Language: `cpp`, `css`, `go`, `html`, `java`, `javascript`, `json`, `markdown`, `php`, `python`, `sql`, `xml`, `yaml`. */
+    language(language) {
+        if (language !== null && !CODE_LANGUAGES.includes(language))
+            throw new Error(`CodeEditor: unknown language "${language}".`);
+        this._language = language;
+        return this;
+    }
+    getLanguage() { return this._language; }
+    /**
+     * Wraps long lines. Called with an HTML string, it is the inherited field wrapper,
+     * which the component's rendering uses.
+     */
+    wrap(condition, options) {
+        if (typeof condition === 'string')
+            return super.wrap(condition, options);
+        this._canWrap = condition ?? true;
+        return this;
+    }
+    canWrap() { return this._canWrap; }
+    live(options = {}) { this._live = { onBlur: options.onBlur === true, debounce: options.debounce ?? null }; return this; }
+    hydrateState(value) { return typeof value === 'string' ? value : value === null || value === undefined ? null : JSON.stringify(value); }
+    async getValidationRules() {
+        return [...(await super.getValidationRules()), { name: 'string', passes: (v) => typeof v === 'string', message: (a) => `The ${a} field must be a string.` }];
+    }
+    async toHtml() {
+        const id = this.getId();
+        const isDisabled = await this.isDisabled();
+        const config = `codeEditorFormComponent({
+ canWrap: ${this._canWrap ? 'true' : 'false'},
+ isDisabled: ${isDisabled ? 'true' : 'false'},
+ isLive: ${this._live !== null ? 'true' : 'false'},
+ isLiveDebounced: ${this._live?.debounce !== null && this._live?.debounce !== undefined ? 'true' : 'false'},
+ isLiveOnBlur: ${this._live?.onBlur ? 'true' : 'false'},
+ label: ${js(await this.getLabel())},
+ liveDebounce: ${js(this._live?.debounce ?? null)},
+ language: ${js(this._language)},
+ state: $wire.$entangle(${js(this.getStatePath())}, ${entangleLive(this._live)}),
+ })`;
+        // Key hash over the serialized `[isDisabled, language]` options.
+        const hash = createHash('md5').update(`a:2:{i:0;b:${isDisabled ? 1 : 0};i:1;${this._language === null ? 'N;' : `s:${this._language.length}:"${this._language}";`}}`).digest('hex');
+        const wrapper = new Attributes().class(['fi-fo-code-editor', 'fi-input-wrp', { 'fi-disabled': isDisabled, 'fi-invalid': this.hasError() }]);
+        return super.wrap(`<div ${wrapper.toHtml()}><div class="fi-input-wrp-content-ctn"><div hidden data-field-accessibility ${new Attributes().merge(accessibilityOf(this)).toHtml()}></div><div aria-labelledby="${e(id)}-label" id="${e(id)}" role="group" x-load x-load-src="${e(asset('code-editor'))}" x-data="${e(config)}" wire:ignore wire:key="${e(this.getLivewireKey() ?? '')}.${hash}"><div x-ref="editor" x-cloak></div></div></div></div>`, { labelAsDiv: true });
+    }
+}
+/**
+ * Slider (noUiSlider): one value, or several handles when the state is a list (`default([20, 70])`).
+ * Required by default; bounds, step and numeric type are checked on the server.
+ */
+export class Slider extends Field {
+    _minValue = 0;
+    _maxValue = 100;
+    _step = null;
+    _minDifference = null;
+    _maxDifference = null;
+    _rangePadding = null;
+    _fillTrack = null;
+    _vertical = false;
+    _rtl = null;
+    _behavior = 'tap';
+    _tooltips = false;
+    _pipsMode = null;
+    _pipsDensity = null;
+    _pipsFormatter = null;
+    _pipsValues = null;
+    _steppedPips = false;
+    _pipsFilter = null;
+    _nonLinearPoints = null;
+    _decimalPlaces = null;
+    _live = null;
+    constructor(name) { super(name); this._required = true; }
+    static make(name) { return configured(new Slider(name)); }
+    range(minValue, maxValue) { this._minValue = minValue; this._maxValue = maxValue; return this; }
+    minValue(value) { this._minValue = value; return this; }
+    maxValue(value) { this._maxValue = value; return this; }
+    /** Step between values; `1` requires an integer, otherwise the value must be a multiple of the step. */
+    step(step) { this._step = step; return this; }
+    /** Minimum / maximum gap between two handles. */
+    minDifference(difference) { this._minDifference = difference; return this; }
+    maxDifference(difference) { this._maxDifference = difference; return this; }
+    /** Forbidden margin at the ends: a number, or `[start, end]`. */
+    rangePadding(padding) { this._rangePadding = padding; return this; }
+    /** Colored track segments, one boolean per segment (`[true, false]` by default). */
+    fillTrack(fill = [true, false]) { this._fillTrack = fill; return this; }
+    vertical(condition = true) { this._vertical = condition; return this; }
+    /** Right to left (top to bottom for a vertical slider, the default when vertical). */
+    rtl(condition = true) { this._rtl = condition; return this; }
+    /** Handle behavior (`tap`, `drag`, `fixed`, `snap`, `unconstrained`…); `null`: none. */
+    behavior(behavior = null) { this._behavior = behavior; return this; }
+    /** Handle tooltips: a boolean, one boolean per handle, or a `RawJs` formatting `$value`. */
+    tooltips(tooltips = true) { this._tooltips = tooltips; return this; }
+    /** Pips: `range` (default), `steps`, `positions`, `count`, `values`. */
+    pips(mode = 'range', density = null) { this._pipsMode = mode; this._pipsDensity = density; return this; }
+    pipsMode(mode) { this._pipsMode = mode; return this; }
+    pipsDensity(density) { this._pipsDensity = density; return this; }
+    /** Pip formatter (a `RawJs` receiving `$value`). */
+    pipsFormatter(formatter) { this._pipsFormatter = formatter; return this; }
+    pipsValues(values) { this._pipsValues = values; return this; }
+    steppedPips(condition = true) { this._steppedPips = condition; return this; }
+    /** Pip filter (a `RawJs` receiving `$value`). */
+    pipsFilter(filter) { this._pipsFilter = filter; return this; }
+    /** Non-linear scale (`{ '10%': 500, '50%': 4000 }`). */
+    nonLinearPoints(points) { this._nonLinearPoints = points; return this; }
+    /** Decimal places of the saved value. */
+    decimalPlaces(places) { this._decimalPlaces = places; return this; }
+    live(options = {}) { this._live = { onBlur: options.onBlur === true, debounce: options.debounce ?? null }; return this; }
+    getMinValueWithPadding() { const padding = this._rangePadding; return this._minValue + (typeof padding === 'number' ? padding : Array.isArray(padding) ? (padding[0] ?? 0) : 0); }
+    getMaxValueWithPadding() { const padding = this._rangePadding; return this._maxValue - (typeof padding === 'number' ? padding : Array.isArray(padding) ? (padding[1] ?? 0) : 0); }
+    isMultiple() { return Array.isArray(this.context().state); }
+    getDefaultState() { return this._default ?? this._minValue; }
+    cast(value) {
+        if (typeof value !== 'number' && (typeof value !== 'string' || value.trim() === '' || !Number.isFinite(Number(value))))
+            return value;
+        const number = Number(value);
+        return this._decimalPlaces === null ? number : Number(number.toFixed(this._decimalPlaces));
+    }
+    hydrateState(value) { return Array.isArray(value) ? value.map((item) => this.cast(item)) : this.cast(value); }
+    dehydrateState(state) { return Array.isArray(state) ? state.map((item) => this.cast(item)) : this.cast(state); }
+    async getValidationRules() {
+        const min = this.getMinValueWithPadding(), max = this.getMaxValueWithPadding(), step = this._step;
+        const isNumber = (v) => (typeof v === 'number' || typeof v === 'string') && String(v).trim() !== '' && Number.isFinite(Number(v));
+        const onStep = (v) => step === null || (step === 1 ? Number.isInteger(Number(v)) : Math.abs(Number(v) / step - Math.round(Number(v) / step)) < 1e-9);
+        const each = (test) => (v) => (Array.isArray(v) ? v.length > 0 && v.every(test) : test(v));
+        return [
+            ...(await super.getValidationRules()),
+            { name: 'numeric', passes: each(isNumber), message: (a) => `The ${a} field must be a number.` },
+            { name: 'min', passes: each((v) => Number(v) >= min), message: (a) => `The ${a} field must be at least ${min}.` },
+            { name: 'max', passes: each((v) => Number(v) <= max), message: (a) => `The ${a} field must not be greater than ${max}.` },
+            { name: step === 1 ? 'integer' : 'multiple_of', passes: each(onStep), message: (a) => (step === 1 ? `The ${a} field must be an integer.` : `The ${a} field must be a multiple of ${step}.`) },
+        ];
+    }
+    /** A `RawJs` becomes a `{ to: ($value) => … }` formatter object. */
+    static formatters(value) {
+        if (value instanceof RawJs)
+            return `{ to: ($value) => ${value.js} }`;
+        if (Array.isArray(value))
+            return `[${value.map((item) => Slider.formatters(item)).join(', ')}]`;
+        return js(value);
+    }
+    async toHtml() {
+        const id = this.getId();
+        const isDisabled = await this.isDisabled();
+        const hasTooltips = Array.isArray(this._tooltips) ? this._tooltips.some((tooltip) => tooltip !== false) : this._tooltips !== false;
+        const behavior = this._behavior === null || (Array.isArray(this._behavior) && !this._behavior.length) ? 'none' : [].concat(this._behavior).join('-');
+        const config = `sliderFormComponent({
+ arePipsStepped: ${this._steppedPips ? 'true' : 'false'},
+ behavior: ${js(behavior)},
+ decimalPlaces: ${js(this._decimalPlaces)},
+ fillTrack: ${js(this._fillTrack)},
+ isDisabled: ${isDisabled ? 'true' : 'false'},
+ isRtl: ${(this._rtl ?? this._vertical) ? 'true' : 'false'},
+ isVertical: ${this._vertical ? 'true' : 'false'},
+ maxDifference: ${js(this._maxDifference)},
+ minDifference: ${js(this._minDifference)},
+ maxValue: ${js(this._maxValue)},
+ minValue: ${js(this._minValue)},
+ nonLinearPoints: ${js(this._nonLinearPoints)},
+ pipsDensity: ${js(this._pipsDensity)},
+ pipsFilter: ${this._pipsFilter ? `($value) => ${this._pipsFilter.js}` : 'null'},
+ pipsFormatter: ${Slider.formatters(this._pipsFormatter)},
+ pipsMode: ${js(this._pipsMode)},
+ pipsValues: ${js(this._pipsValues)},
+ rangePadding: ${js(this._rangePadding)},
+ state: $wire.$entangle(${js(this.getStatePath())}, ${this._live !== null ? 'true' : 'false'}),
+ step: ${js(this._step)},
+ tooltips: ${Slider.formatters(this._tooltips)},
+ })`;
+        const accessibility = accessibilityOf(this, { withInvalid: !this.isMultiple() });
+        const attributes = new Attributes().merge({ 'aria-labelledby': `${id}-label`, id, role: 'group', ...this._extraAttributes })
+            .class(['fi-fo-slider', { 'fi-fo-slider-has-pips': this._pipsMode !== null, 'fi-fo-slider-has-tooltips': hasTooltips, 'fi-fo-slider-vertical': this._vertical }]);
+        // Key hash over the serialized `[isDisabled]` options.
+        const hash = createHash('md5').update(`a:1:{i:0;b:${isDisabled ? 1 : 0};}`).digest('hex');
+        return this.wrap(`<div hidden data-field-accessibility ${new Attributes().merge(accessibility).toHtml()}></div><div x-load x-load-src="${e(asset('slider'))}" x-data="${e(config)}" wire:ignore wire:key="${e(this.getLivewireKey() ?? '')}.${hash}" ${attributes.toHtml()}></div>`, { labelAsDiv: true });
+    }
+}
+/** Hidden field: an `<input type="hidden">` bound to the state, with no label or grid slot. */
+export class Hidden extends Field {
+    constructor(name) { super(name); this._columnSpan = { default: 'hidden' }; }
+    static make(name) { return configured(new Hidden(name)); }
+    async toHtml() {
+        const attributes = new Attributes().merge({ id: this.getId(), type: 'hidden', 'wire:model': this.getStatePath(), ...this._extraAttributes }).class(['fi-fo-hidden']);
+        return `<input ${attributes.toHtml()} />`;
+    }
+}
+/** One-time code: one box per digit; the state is a digit string of exactly `length()` characters. */
+export class OneTimeCodeInput extends Field {
+    _length = 6;
+    _submitOnCompletion = false;
+    _readOnly = false;
+    constructor(name) {
+        super(name);
+        // `numeric` rather than `integer`, which would reject leading zeros; then `digits:<length>`.
+        this.rule({ name: 'numeric', passes: (v) => /^\d+$/.test(String(v)), message: (a) => `The ${a} field must be a number.` });
+        this.rule({ name: 'digits', passes: (v) => new RegExp(`^\\d{${this._length}}$`).test(String(v)), message: (a) => `The ${a} field must be ${this._length} digits.` });
+    }
+    static make(name) { return configured(new OneTimeCodeInput(name)); }
+    /** Number of digits (6 by default). */
+    length(length) { this._length = Math.max(1, Math.min(32, Math.floor(length))); return this; }
+    getLength() { return this._length; }
+    /** Submits the form as soon as the last digit is typed. */
+    submitOnCompletion(condition = true) { this._submitOnCompletion = condition; return this; }
+    readOnly(condition = true) { this._readOnly = condition; return this; }
+    hydrateState(value) { return value === null || value === undefined ? null : String(value); }
+    async toHtml() {
+        const isDisabled = await this.isDisabled();
+        const accessibility = accessibilityOf(this);
+        const label = await this.getLabel();
+        const container = new Attributes().merge({ ...this._extraAttributes, 'aria-describedby': accessibility['aria-describedby'], 'aria-label': label !== '' ? label : null }).class(['fi-one-time-code-input-ctn']);
+        const first = new Attributes().merge({ ...accessibility, autofocus: this._autofocus, disabled: isDisabled, id: this.getId(), readonly: this._readOnly, required: await this.isRequired() }).class(['fi-one-time-code-input-digit']);
+        const digit = new Attributes().merge(accessibility);
+        const inputs = Array.from({ length: this._length }, (_, index) => (index === 0
+            ? `<input autocomplete="one-time-code" inputmode="numeric" type="text" ${first.toHtml()} />`
+            : `<input aria-label="${e(t('filament::components/input/one-time-code.aria_label', { position: index + 1, count: this._length }))}" autocomplete="off" inputmode="numeric" type="text" ${digit.toHtml()}${isDisabled ? ' disabled' : ''}${this._readOnly ? ' readonly' : ''} class="fi-one-time-code-input-digit" />`));
+        return this.wrap(`<div x-data="${e(`{ code: $wire.$entangle(${js(this.getStatePath())}, false), }`)}"><div x-data="filamentOneTimeCodeInput({ shouldSubmitOnCompletion: ${this._submitOnCompletion ? 'true' : 'false'} })" x-modelable="state" x-model="code" dir="ltr" role="group" ${container.toHtml()}>${inputs.join('')}</div></div>`);
+    }
+}
+/**
+ * Read-only text in a form. Nothing is saved. An `HtmlString` is inserted as is.
+ */
+export class Placeholder extends Component {
+    _label = null;
+    _content = null;
+    _hiddenLabel = false;
+    constructor(name) { super(); this._name = name; }
+    static make(name) { return configured(new Placeholder(name)); }
+    hasStatePath() { return true; }
+    label(label) { this._label = label; return this; }
+    hiddenLabel(condition = true) { this._hiddenLabel = condition; return this; }
+    content(content) { this._content = content; return this; }
+    async toHtml() {
+        const ctx = this.context();
+        const label = e((await evaluate(this._label, ctx)) ?? headline(this._name));
+        const content = await evaluate(this._content, ctx);
+        const html = content instanceof HtmlString ? content.html : e(content);
+        const labelCol = this._hiddenLabel ? `<div class="fi-in-entry-label fi-sr-only" role="term">${label}</div>` : `<div class="fi-in-entry-label-col"><div class="fi-in-entry-label-ctn"><div class="fi-in-entry-label" role="term">${label}</div></div></div>`;
+        return `<div class="fi-in-entry">${labelCol}<div class="fi-in-entry-content-col"><div class="fi-in-entry-content-ctn" role="definition"><div class="fi-in-entry-content"><div class="fi-in-text-item fi-size-sm fi-in-text fi-wrapped">${html}</div></div></div></div></div>`;
+    }
+}
+// Nested state: a field inside a stateful group (e.g. `address.city`) is read and written at its path relative to the schema.
+function relativePath(schema, field) {
+    const base = schema.getStatePath();
+    const full = field.getStatePath();
+    return (base && full.startsWith(`${base}.`) ? full.slice(base.length + 1) : full).split('.');
+}
+const readPath = (source, segments) => segments.reduce((node, key) => (node === null || node === undefined ? undefined : node[key]), source);
+function writePath(target, segments, value) {
+    let node = target;
+    for (const key of segments.slice(0, -1)) {
+        if (node[key] === null || typeof node[key] !== 'object')
+            node[key] = {};
+        node = node[key];
+    }
+    node[segments[segments.length - 1]] = value;
+}
+/** Fills the default state of every field in a schema. */
+export function fillSchema(schema, target) {
+    for (const c of schema.getFlatComponents())
+        if (c instanceof Field)
+            writePath(target, relativePath(schema, c), c.getDefaultState());
+}
+/** Fills the form state from a record, field by field. */
+export function fillSchemaFromRecord(schema, target, record) {
+    for (const c of schema.getFlatComponents()) {
+        if (!(c instanceof Field))
+            continue;
+        const segments = relativePath(schema, c);
+        writePath(target, segments, c.hydrateState(readPath(record, segments) ?? c.getDefaultState()));
+    }
+}
+/** Validates every visible field of a schema; returns errors by state path. */
+export async function validateSchema(schema) {
+    const errors = {};
+    for (const c of await schema.getVisibleFlatComponents()) {
+        if (!(c instanceof Field))
+            continue;
+        const messages = await c.validate();
+        if (messages.length)
+            errors[c.getStatePath()] = messages;
+    }
+    return errors;
+}
+/** State to save: only declared, visible, dehydrated fields; an empty string becomes `null`. */
+export async function getSchemaState(schema) {
+    const data = {};
+    const fields = [];
+    for (const c of await schema.getVisibleFlatComponents()) {
+        if (!(c instanceof Field) || !(await c.isDehydrated()))
+            continue;
+        const state = await c.dehydrateState(c.context().state);
+        writePath(data, relativePath(schema, c), state === '' || state === undefined ? null : state);
+        fields.push(c);
+    }
+    // Deepest first: a container sees its children already shaped.
+    for (const c of fields.reverse()) {
+        const path = relativePath(schema, c);
+        const current = readPath(data, path);
+        const final = c.finalizeDehydratedState(current);
+        if (final !== current)
+            writePath(data, path, final);
+    }
+    return data;
+}
+/** Throw from a step's `beforeValidation` / `afterValidation` to stay on the current step. */
+export class Halt extends Error {
+    constructor() { super('Halt'); }
+}
+/** A wizard step: a label, an optional description and icon, and its own schema. */
+export class Step extends Component {
+    children = [];
+    _columns = {};
+    label;
+    _description = null;
+    _icon = null;
+    _completedIcon = null;
+    _beforeValidation = null;
+    _afterValidation = null;
+    constructor(label) { super(); this.label = label; this._keyName = `${slug(label)}::data::wizard-step`; }
+    static make(label) { return configured(new Step(label)); }
+    schema(components) { this.children = components; return this; }
+    columns(columns = 2) { this._columns = columns; return this; }
+    description(description) { this._description = description; return this; }
+    icon(name) { this._icon = name; return this; }
+    completedIcon(name) { this._completedIcon = name; return this; }
+    /** Runs before the step is validated, on "Next"; throw `Halt` to stay on the step. */
+    beforeValidation(callback) { this._beforeValidation = callback; return this; }
+    /** Runs after a successful validation, before moving to the next step; throw `Halt` to stay on the step. */
+    afterValidation(callback) { this._afterValidation = callback; return this; }
+    getLabel() { return this.label; }
+    getDescription() { return this._description; }
+    getIcon() { return this._icon; }
+    getCompletedIcon() { return this._completedIcon; }
+    async callBeforeValidation() { await this._beforeValidation?.(this.context()); }
+    async callAfterValidation() { await this._afterValidation?.(this.context()); }
+    getChildSchemas() { return [childSchema(this, this.children).columns(this._columns)]; }
+    async toHtml() { return this.getChildSchemas()[0].toHtml(); }
+    /** Step panel: a `<form>` when the wizard has a submit handler (Enter goes to the next step, or saves on the last one). */
+    async toStepHtml(submitHandler, hasHeader) {
+        const key = this.getKey();
+        const tag = submitHandler ? 'form' : 'div';
+        const attributes = new Attributes().merge({
+            'aria-labelledby': hasHeader ? `${key}-tab` : null,
+            'aria-label': hasHeader ? null : this.label,
+            id: key,
+            role: 'group',
+            'x-data': `filamentSchemaComponent(${js(this.getAlpineScopeConfiguration())})`,
+        }).class(['fi-sc-wizard-step']);
+        return `<${tag} x-bind:tabindex="$el.querySelector('[autofocus]') ? '-1' : '0'" x-bind:class="{
+                'fi-active': step === ${e(js(key))},
+            }" x-on:expand="
+                if (! isStepAccessible(${e(js(key))})) {
+                    return
+                }
+
+                step = ${e(js(key))}            "${submitHandler ? ` x-on:submit.prevent="isLastStep() ? ${e(submitHandler)} : requestNextStep()"` : ''} x-cloak x-ref="step-${e(key)}" ${attributes.toHtml()}>${await this.toHtml()}${submitHandler ? '<input type="submit" hidden />' : ''}</${tag}>`;
+    }
+}
+/**
+ * Multi-step wizard: every step is rendered, the browser only shows the current one.
+ * "Next" validates the current step on the server before moving on, unless the wizard is `skippable()`.
+ */
+export class Wizard extends Component {
+    steps;
+    _label = null;
+    _skippable = false;
+    _startStep = 1;
+    _contained = true;
+    _headerHidden = false;
+    _cancelAction = null;
+    _submitAction = null;
+    _alpineSubmitHandler = null;
+    _stepQueryStringKey = null;
+    _modifyNext = null;
+    _modifyPrevious = null;
+    constructor(steps = []) { super(); this.steps = steps; }
+    static make(steps = []) { return configured(new Wizard(steps)); }
+    schema(steps) { this.steps = steps; return this; }
+    label(label) { this._label = label; return this; }
+    /** Steps can be visited in any order, without validation. */
+    skippable(condition = true) { this._skippable = condition; return this; }
+    /** Step shown on open (1-based). */
+    startOnStep(step) { this._startStep = step; return this; }
+    /** `false`: no card around the wizard (as on a resource page). */
+    contained(condition = true) { this._contained = condition; return this; }
+    hiddenHeader(condition = true) { this._headerHidden = condition; return this; }
+    /** Action shown instead of "Back" on the first step. */
+    cancelAction(action) { this._cancelAction = action; return this; }
+    /** Action shown instead of "Next" on the last step. */
+    submitAction(action) { this._submitAction = action; return this; }
+    /** Alpine expression run when the last step is submitted from the keyboard (e.g. `$wire.create()`). */
+    alpineSubmitHandler(handler) { this._alpineSubmitHandler = handler; return this; }
+    /** Keeps the current step in the URL (`?step=…`). */
+    persistStepInQueryString(key = 'step') { this._stepQueryStringKey = key; return this; }
+    nextAction(modify) { this._modifyNext = modify; return this; }
+    previousAction(modify) { this._modifyPrevious = modify; return this; }
+    getKey() {
+        const statePath = this.container.getStatePath();
+        const own = statePath ? `${statePath}::wizard` : 'wizard';
+        return `${this.container.getKey()}.${this._label ? `${slug(this._label)}::${own}` : own}`;
+    }
+    getExposedMethods() { return ['nextStep', 'previousStep']; }
+    /** "Next" re-renders the component so the step's validation errors show up. */
+    isRenderlessMethod() { return false; }
+    getChildSchemas() { return [childSchema(this, this.steps)]; }
+    getSteps() { this.getChildSchemas(); return this.steps; }
+    /** Called by the browser on "Next": validates the current step, then announces the next one. */
+    async nextStep(currentStepIndex = null, currentStepKey = null) {
+        const steps = this.getSteps();
+        if (!Number.isInteger(currentStepIndex) || currentStepIndex < 0 || currentStepIndex >= steps.length - 1)
+            return;
+        const current = steps[currentStepIndex];
+        if (currentStepKey !== null && current.getKey() !== currentStepKey)
+            return;
+        const livewire = this.livewire;
+        if (!this._skippable) {
+            try {
+                await current.callBeforeValidation();
+                const errors = await validateSchema(current.getChildSchemas()[0]);
+                livewire._errors = errors;
+                if (Object.keys(errors).length) {
+                    livewire.dispatch('form-validation-error', { livewireId: livewire.id });
+                    return;
+                }
+                await current.callAfterValidation();
+            }
+            catch (error) {
+                if (error instanceof Halt)
+                    return;
+                throw error;
+            }
+        }
+        livewire.dispatch('next-wizard-step', { key: this.getKey(), step: steps[currentStepIndex + 1].getKey(), currentStep: current.getKey() });
+    }
+    /** Going back happens in the browser; this exposed method is a no-op the front end still calls. */
+    previousStep() { }
+    async toHtml() {
+        const steps = this.getSteps();
+        const key = this.getKey();
+        const ctx = this.context();
+        const tr = (name) => t(`filament-schemas::components.wizard.${name}`);
+        const previous = Action.make('previous').label(tr('actions.previous_step.label')).color('gray');
+        const previousAction = this._modifyPrevious?.(previous) ?? previous;
+        const next = Action.make('next').label(tr('actions.next_step.label')).iconPosition('after');
+        if (steps.length > 1)
+            next.livewireTarget(steps.slice(0, -1).map((step, index) => `callSchemaComponentMethod(${js(key)}, 'nextStep', ${js({ currentStepIndex: index, currentStepKey: step.getKey() })})`).join(', '));
+        const nextAction = this._modifyNext?.(next) ?? next;
+        const [previousDisabled, nextDisabled] = [await previousAction.isDisabled(ctx), await nextAction.isDisabled(ctx)];
+        const visibleKeys = [];
+        for (const step of steps)
+            if (await step.isVisible())
+                visibleKeys.push(step.getKey());
+        const header = [];
+        steps.forEach((step, index) => {
+            const stepKey = step.getKey();
+            const shown = new Attributes({ 'x-cloak': 'x-cloak', 'x-show': `getStepIndex(step) <= ${index}` });
+            const stepIcon = step.getIcon()
+                ? icon(step.getIcon(), { size: 'lg', attributes: shown })
+                : `<span x-show="getStepIndex(step) &lt;= ${index}" aria-hidden="true" class="fi-sc-wizard-header-step-number">${String(index + 1).padStart(2, '0')}</span>`;
+            header.push(`<li class="fi-sc-wizard-header-step" x-bind:class="{
+                                'fi-active': getStepIndex(step) === ${index},
+                                'fi-completed': getStepIndex(step) &gt; ${index},
+                            }"><button type="button" id="${e(stepKey)}-tab" aria-controls="${e(stepKey)}" x-bind:aria-current="getStepIndex(step) === ${index} ? 'step' : null" x-on:click="step = ${e(js(stepKey))}" x-bind:disabled="! isStepAccessible(${e(js(stepKey))}) || ${previousDisabled ? 'true' : 'false'}" class="fi-sc-wizard-header-step-btn"><div class="fi-sc-wizard-header-step-icon-ctn">${icon(step.getCompletedIcon() ?? 'o-check', { size: 'lg', attributes: new Attributes({ 'x-cloak': 'x-cloak', 'x-show': `getStepIndex(step) > ${index}` }) })}${stepIcon}</div><div class="fi-sc-wizard-header-step-text"><span class="fi-sc-wizard-header-step-label">${e(step.getLabel())}</span>${step.getDescription() ? `<span class="fi-sc-wizard-header-step-description">${e(step.getDescription())}</span>` : ''}<span class="fi-sr-only" x-text="getStepIndex(step) &gt; ${index} ? ${e(js(tr('header.step.statuses.completed')))} : (getStepIndex(step) === ${index} ? '' : ${e(js(tr('header.step.statuses.upcoming')))})"></span></div></button>${index < steps.length - 1 ? '<svg fill="none" preserveAspectRatio="none" viewBox="0 0 22 80" aria-hidden="true" class="fi-sc-wizard-header-step-separator"><path d="M0 -2L20 40L0 82" stroke-linejoin="round" stroke="currentcolor" vector-effect="non-scaling-stroke"></path></svg>' : ''}</li>`);
+        });
+        const panels = [];
+        for (const step of steps)
+            panels.push(await step.toStepHtml(this._alpineSubmitHandler, !this._headerHidden));
+        const outer = new Attributes().merge({ id: key }).class(['fi-sc-wizard', { 'fi-contained': this._contained, 'fi-sc-wizard-header-hidden': this._headerHidden }]);
+        return `<div x-load x-load-src="${e(views.render('filament-schemas::asset', { path: 'wizard' }).trim())}" x-data="wizardSchemaComponent({
+                        isSkippable: ${this._skippable ? 'true' : 'false'},
+                        isStepPersistedInQueryString: ${this._stepQueryStringKey ? 'true' : 'false'},
+                        livewireId: ${e(js(this.livewire.id))},
+                        schemaKey: ${e(js(this.container.getKey().split('.')[0]))},
+                        startStep: ${this._startStep},
+                        stepQueryStringKey: ${e(js(this._stepQueryStringKey))},
+                    })" x-on:next-wizard-step.window="${e(`if ($event.detail.key === ${js(key)}) goToNextStep($event.detail.step, $event.detail.currentStep)`)}" x-on:go-to-wizard-step.window="${e(`$event.detail.key === ${js(key)} && goToStep($event.detail.step)`)}" wire:ignore.self ${outer.toHtml()}><input type="hidden" value="${e(JSON.stringify(visibleKeys))}" x-ref="stepsData" />${this._headerHidden ? '' : `<ol${this._label ? ` aria-label="${e(this._label)}"` : ''} role="list" x-cloak x-ref="header" class="fi-sc-wizard-header">${header.join('')}</ol>`}${panels.join('')}<div x-cloak class="fi-sc-wizard-footer"><div x-cloak${previousDisabled ? '' : ' x-on:click="goToPreviousStep"'} x-show="! isFirstStep()">${await previousAction.toHtml(ctx)}</div><div x-show="isFirstStep()">${this._cancelAction ? await this._cancelAction.toHtml(ctx) : ''}</div><div x-cloak${nextDisabled ? '' : ` x-on:click.capture="if ($el.hasAttribute('aria-disabled')) { $event.preventDefault(); $event.stopImmediatePropagation() }" x-on:click="if (! $el.hasAttribute('aria-disabled')) requestNextStep()"`} x-bind:class="{ 'fi-hidden': isLastStep() }" wire:loading.attr="aria-disabled">${await nextAction.toHtml(ctx)}</div><div x-bind:class="{ 'fi-hidden': ! isLastStep() }">${this._submitAction ? await this._submitAction.toHtml(ctx) : ''}</div></div></div>`;
+    }
+}
+/** Local disk storage, served under a public URL. File names are random; the extension comes from the detected type. */
+export class LocalFileStorage {
+    root;
+    baseUrl;
+    constructor(root, baseUrl) { this.root = root; this.baseUrl = baseUrl.replace(/\/$/, ''); }
+    resolve(key) {
+        if (!/^[A-Za-z0-9][A-Za-z0-9._/-]{0,250}$/.test(key) || key.split('/').some((part) => part === '..' || part === '.'))
+            return null;
+        return nodePath.join(this.root, ...key.split('/'));
+    }
+    async store(file, directory) {
+        const key = [directory, `${randomUUID()}.${file.extension}`].filter(Boolean).join('/');
+        const target = this.resolve(key);
+        if (!target)
+            throw new Error('Invalid upload directory.');
+        mkdirSync(nodePath.dirname(target), { recursive: true });
+        copyFileSync(file.path, target);
+        writeFileSync(`${target}.meta.json`, JSON.stringify({ name: file.name, type: file.type }));
+        return key;
+    }
+    async info(key) {
+        const target = this.resolve(key);
+        if (!target || !existsSync(target))
+            return null;
+        let meta = {};
+        try {
+            meta = JSON.parse(readFileSync(`${target}.meta.json`, 'utf8'));
+        }
+        catch { /* file dropped in without metadata */ }
+        return { name: meta.name ?? nodePath.basename(key), size: statSync(target).size, type: meta.type ?? 'application/octet-stream', url: `${this.baseUrl}/${key.split('/').map(encodeURIComponent).join('/')}` };
+    }
+}
+/**
+ * File upload (FilePond).
+ * State: `{ <file key>: <stored key> | 'livewire-file:<temporary id>' }`. A stored key from the browser is only accepted
+ * if the record being edited already has it, so nobody can claim someone else's file.
+ */
+export class FileUpload extends Field {
+    /** Application-wide default storage. */
+    static storage = null;
+    _multiple = false;
+    _maxFiles = null;
+    _maxSize = null;
+    _reorderable = false;
+    _acceptedFileTypes = null;
+    _directory = null;
+    _storeFiles = true;
+    _storage = null;
+    _getUploadedFileUsing = null;
+    static make(name) { return configured(new FileUpload(name)); }
+    multiple(condition = true) { this._multiple = condition; return this; }
+    maxFiles(count) { this._maxFiles = count; return this; }
+    /** Maximum file size, in kilobytes. */
+    maxSize(kilobytes) { this._maxSize = kilobytes; return this; }
+    reorderable(condition = true) { this._reorderable = condition; return this; }
+    /** Accepted MIME types (`image/jpeg`, `image/*`…), checked against the received file's content. */
+    acceptedFileTypes(types) { this._acceptedFileTypes = types; return this; }
+    image() { return this.acceptedFileTypes(['image/*']); }
+    directory(directory) { this._directory = directory; return this; }
+    storage(storage) { this._storage = storage; return this; }
+    /** `false`: the field stores nothing itself; the data receives `FileUploadEntry` items for the adapter to process (media). */
+    storeFiles(condition = true) { this._storeFiles = condition; return this; }
+    /** Info about an already saved file (name, size, type, URL), when it does not come from the storage. */
+    getUploadedFileUsing(resolver) { this._getUploadedFileUsing = resolver; return this; }
+    getDefaultState() { return {}; }
+    hydrateState(value) {
+        const keys = Array.isArray(value) ? value : value === null || value === undefined || value === '' ? [] : typeof value === 'object' ? Object.values(value) : [value];
+        return Object.fromEntries(keys.filter((key) => typeof key === 'string' || typeof key === 'number').map((key) => [randomUUID(), String(key)]));
+    }
+    get uploads() { return this.livewire._runtime?.uploads ?? null; }
+    getStorage() { return this._storage ?? FileUpload.storage; }
+    /** Sanitized state entries: safe file key, string value. */
+    entries() {
+        const state = this.context().state;
+        if (!state || typeof state !== 'object' || Array.isArray(state))
+            return [];
+        return Object.entries(state).filter(([key, value]) => /^[A-Za-z0-9-]{1,64}$/.test(key) && typeof value === 'string').map(([key, value]) => [key, value]).slice(0, 100);
+    }
+    /** Stored keys the current record already owns: the only ones accepted back from the browser. */
+    originalKeys() {
+        const record = this.container.getRecord();
+        return new Set(Object.values(this.hydrateState(record?.[this.getName()])));
+    }
+    isTemporary(value) { return value.startsWith('livewire-file:'); }
+    getExposedMethods() { return ['deleteUploadedFile', 'removeUploadedFile', 'reorderUploadedFiles', 'getUploadedFiles']; }
+    async getUploadedFiles() {
+        const original = this.originalKeys();
+        const files = {};
+        for (const [fileKey, value] of this.entries()) {
+            if (this.isTemporary(value) || !original.has(value)) {
+                files[fileKey] = null;
+                continue;
+            }
+            const info = this._getUploadedFileUsing ? await this._getUploadedFileUsing(value, this.context()) : await this.getStorage()?.info(value);
+            // Only local or http(s) URLs are sent to the browser.
+            files[fileKey] = info && /^(\/(?!\/)|https?:\/\/)/.test(info.url) ? info : null;
+        }
+        return files;
+    }
+    writeState(entries) { writePath(this.livewire, this.getStatePath().split('.'), Object.fromEntries(entries)); }
+    /** 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);
+        if (removed && this.isTemporary(removed[1]))
+            this.uploads?.remove(removed[1].slice('livewire-file:'.length));
+        this.writeState(this.entries().filter(([key]) => key !== fileKey));
+    }
+    deleteUploadedFile(fileKey) { this.removeUploadedFile(fileKey); }
+    reorderUploadedFiles(fileKeys) {
+        if (!this._reorderable || !Array.isArray(fileKeys))
+            return;
+        const entries = new Map(this.entries());
+        const ordered = fileKeys.map(String).filter((key) => entries.has(key));
+        this.writeState([...ordered.map((key) => [key, entries.get(key)]), ...[...entries].filter(([key]) => !ordered.includes(key))]);
+    }
+    async getValidationRules() {
+        const entries = () => this.entries();
+        const temporary = () => entries().filter(([, value]) => this.isTemporary(value)).map(([, value]) => this.uploads?.resolve(value) ?? null);
+        const accepts = (type) => (this._acceptedFileTypes ?? []).some((accepted) => accepted === type || (accepted.endsWith('/*') && type.startsWith(accepted.slice(0, -1))));
+        const rules = [];
+        if (await this.isRequired())
+            rules.push({ name: 'required', passes: () => entries().length > 0, message: (a) => `The ${a} field is required.` });
+        rules.push({ name: 'file', passes: () => temporary().every((file) => file !== null), message: (a) => `The ${a} field must be a file.` });
+        if (!this._multiple)
+            rules.push({ name: 'max_files', passes: () => entries().length <= 1, message: (a) => `The ${a} field must not have more than 1 items.` });
+        if (this._maxFiles !== null)
+            rules.push({ name: 'max_files', passes: () => entries().length <= this._maxFiles, message: (a) => `The ${a} field must not have more than ${this._maxFiles} items.` });
+        if (this._acceptedFileTypes)
+            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.` });
+        return rules;
+    }
+    /** Validates the whole state, even when empty (a required field without files must fail). */
+    async validate() {
+        if (!(await this.isDehydrated()))
+            return [];
+        const attribute = (await this.getLabel()).toLowerCase();
+        for (const rule of await this.getValidationRules())
+            if (!(await rule.passes(this.context().state, this.context())))
+                return [rule.message(attribute)];
+        return [];
+    }
+    /** On save: temporary files are stored, unrecognized existing keys are dropped. */
+    async dehydrateState() {
+        const original = this.originalKeys();
+        const out = [];
+        for (const [, value] of this.entries()) {
+            if (this.isTemporary(value)) {
+                const file = this.uploads?.resolve(value);
+                if (!file)
+                    continue;
+                if (!this._storeFiles) {
+                    out.push({ file });
+                    continue;
+                }
+                const storage = this.getStorage();
+                if (!storage)
+                    throw new Error('FileUpload: no storage configured (FileUpload.storage).');
+                out.push(await storage.store(file, this._directory));
+                this.uploads?.remove(file.id);
+            }
+            else if (original.has(value))
+                out.push(this._storeFiles ? value : { key: value });
+        }
+        return this._multiple ? out : (out[0] ?? null);
+    }
+    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 config = `fileUploadFormComponent({
+ acceptedFileTypes: ${this._acceptedFileTypes ? js(this._acceptedFileTypes) : 'null'},
+ automaticallyCropImagesAspectRatio: null,
+ automaticallyOpenImageEditorForAspectRatio: null,
+ automaticallyResizeImagesMode: null,
+ automaticallyResizeImagesHeight: null,
+ 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,
+ isDisabled: ${isDisabled ? 'true' : 'false'},
+ isDownloadable: false,
+ isImageEditorExplicitlyEnabled: false,
+ isMultiple: ${this._multiple ? 'true' : 'false'},
+ isOpenable: false,
+ isPasteable: true,
+ isPreviewable: true,
+ isReorderable: ${this._reorderable ? 'true' : 'false'},
+ isSvgEditingConfirmed: false,
+ itemPanelAspectRatio: null,
+ 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,
+ 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,
+ state: $wire.$entangle(${js(this.getStatePath())}, false),
+ statePath: ${js(this.getStatePath())},
+ uploadButtonPosition: 'right',
+ uploadingMessage: ${js(t('filament::components/button.messages.uploading_file'))},
+ downloadActionLabel: ${js(tr('actions.download.label'))},
+ openActionLabel: ${js(tr('actions.open.label'))},
+ uploadProgressIndicatorPosition: 'right',
+ })`;
+        const key = `${this.getLivewireKey()}.${createHash('md5').update(JSON.stringify([this._acceptedFileTypes, this._maxFiles, this._multiple, isDisabled])).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 });
+    }
+}