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

package/lib/index.d.ts

@@ -1,12 +1,14 @@
 import { HtmlString, type ColorManager, type Lazy } from '@navette-js/support';
-import { Component, Schema, type ComponentContext } from '@navette-js/schemas';
+import { Component, Schema, type ComponentContext, type ComponentSlot } from '@navette-js/schemas';
 import { Action } from '@navette-js/actions';
+import { TextColor, MentionProvider, type CustomBlockClass } from './rich-content.ts';
+export { CustomBlockNode, GridColumnNode, GridNode, LeadNode, MentionNode, MentionProvider, MergeTagNode, registerRichContentExtensions, RichContentCustomBlock, RichContentRenderer, sanitizeCssColor, SizedImage, SmallMark, TextColor, TextColorMark, type CustomBlockClass } from './rich-content.ts';
+import { RichEditorTool } from './rich-editor-tool.ts';
+export { RichEditorTool, type RichEditorToolDefinition } from './rich-editor-tool.ts';
+export { RICH_EDITOR_TOOL_DEFINITIONS } from './rich-editor-tools.ts';
 export declare const useColorManager: (manager: ColorManager) => void;
-type Rule = {
-    name: string;
-    passes: (value: unknown, ctx: ComponentContext) => boolean | Promise<boolean>;
-    message: (attribute: string) => string;
-};
+import { type Rule } from './rules.ts';
+export type { Rule } from './rules.ts';
 export declare abstract class Field extends Component {
     protected _label: Lazy<string | null, ComponentContext>;
     protected _required: Lazy<boolean, ComponentContext>;
@@ -20,7 +22,18 @@ export declare abstract class Field extends Component {
     protected _dehydrated: boolean | null;
     protected _hiddenLabel: boolean;
     protected _helperText: string | null;
+    protected _liveMode: 'live' | 'blur' | null;
+    protected _validationAttribute: string | null;
+    protected _validationMessages: Record<string, string | ((attribute: string) => string)>;
+    protected _markedAsRequired: boolean | null;
     constructor(name: string);
+    /** Sends the state to the server as soon as it changes (`onBlur`: when the field loses focus). `false` turns it off. */
+    live(condition?: boolean | {
+        onBlur?: boolean;
+    }): this;
+    isLive(): boolean;
+    /** `wire:model` directive of the field, with its live modifiers. */
+    protected wireModel(): string;
     hasStatePath(): boolean;
     getName(): string;
     getId(): string;
@@ -31,6 +44,9 @@ export declare abstract class Field extends Component {
     default(value: unknown): this;
     /** Helper text shown under the field. */
     helperText(text: string | null): this;
+    protected _belowContent: ComponentSlot;
+    /** Text, components or actions under the control (after the helper text). Strings are escaped. */
+    belowContent(content: ComponentSlot): this;
     /** Helper text id, linked to the control through `aria-describedby`. */
     protected getHelperTextId(): string | null;
     /** Keeps the label for screen readers only. */
@@ -71,7 +87,100 @@ export declare abstract class Field extends Component {
     getDefaultState(): unknown;
     /** Shapes a record value as it enters the form (hydration). */
     hydrateState(value: unknown): unknown;
-    rule(rule: Rule): this;
+    /** Adds a rule: an object `{ name, passes, message }`, or a Laravel-style string (`'max:255'`, `'regex:/^[a-z]+$/'`). */
+    rule(rule: Rule | string, condition?: boolean | ((ctx: ComponentContext) => boolean | Promise<boolean>)): this;
+    /** Several rules at once: `rules(['required', 'max:255'])` or `rules('required|max:255')`. */
+    rules(rules: (Rule | string)[] | string, condition?: boolean | ((ctx: ComponentContext) => boolean | Promise<boolean>)): this;
+    /** Value checked by the rules (a subclass may trim it, for instance). */
+    protected stateForValidation(state: unknown): unknown;
+    /** Sizes (`min`, `max`, `size`, `between`) compare the number, not the text length. */
+    protected hasNumericValidation(): boolean;
+    /** Name of the field in validation messages (the lowercased label by default). */
+    validationAttribute(name: string | null): this;
+    /** Custom messages by rule name (`{ required: 'Tell us your name.', max: 'Too long.' }`); `:attribute` is replaced by the field name. */
+    validationMessages(messages: Record<string, string | ((attribute: string) => string)>): this;
+    protected _loadStateFromRelationships: ((record: any, ctx: ComponentContext) => unknown) | null;
+    protected _saveRelationships: ((args: {
+        record: any;
+        state: unknown;
+        ctx: ComponentContext;
+    }) => void | Promise<void>) | null;
+    /** Fills the field from the record's relationships (after the record's own values): `(record, ctx) => state`. */
+    loadStateFromRelationshipsUsing(callback: ((record: any, ctx: ComponentContext) => unknown) | null): this;
+    /** Saves the field into the record's relationships, once the record is created or updated. Such a field is not in the saved data. */
+    saveRelationshipsUsing(callback: ((args: {
+        record: any;
+        state: unknown;
+        ctx: ComponentContext;
+    }) => void | Promise<void>) | null): this;
+    /** Whether the field saves itself through `saveRelationshipsUsing()` (and is then left out of the saved data). */
+    savesRelationships(): Promise<boolean>;
+    loadStateFromRelationships(record: any): Promise<{
+        state: unknown;
+    } | null>;
+    saveRelationships(record: any): Promise<void>;
+    /** Shows (or hides, with `false`) the required asterisk, regardless of `required()`. */
+    markAsRequired(condition?: boolean): this;
+    isMarkedAsRequired(): Promise<boolean>;
+    private stringRuleWith;
+    /** The value must match the pattern (a RegExp, or a `/pattern/flags` string). */
+    regex(pattern: RegExp | string): this;
+    notRegex(pattern: RegExp | string): this;
+    alpha(): this;
+    alphaDash(): this;
+    alphaNum(): this;
+    ascii(): this;
+    uuid(): this;
+    ulid(): this;
+    json(): this;
+    ip(): this;
+    ipv4(): this;
+    ipv6(): this;
+    macAddress(): this;
+    hexColor(): this;
+    multipleOf(value: number): this;
+    /** The value must be one of these (a list, or the values of an enum-like object). */
+    in(values: readonly (string | number)[] | Record<string, string | number>): this;
+    notIn(values: readonly (string | number)[]): this;
+    /** `in()` with the values of an enum-like object. */
+    enum(values: Record<string, string | number>): this;
+    startsWith(prefixes: string | string[]): this;
+    endsWith(suffixes: string | string[]): this;
+    doesntStartWith(prefixes: string | string[]): this;
+    doesntEndWith(suffixes: string | string[]): this;
+    /** The field must equal `<name>_confirmation` (or the given field) of the same form. */
+    confirmed(field?: string | null): this;
+    same(field: string): this;
+    different(field: string): this;
+    /** Compares with a number or another field of the same form. */
+    gt(fieldOrValue: string | number): this;
+    gte(fieldOrValue: string | number): this;
+    lt(fieldOrValue: string | number): this;
+    lte(fieldOrValue: string | number): this;
+    /** No duplicates in a list value (tags, multiple select, checkbox list). */
+    distinct(): this;
+    /** Required when another field of the form has one of these values (`requiredIf('type', 'company')`). */
+    requiredIf(field: string, values: unknown): this;
+    requiredUnless(field: string, values: unknown): this;
+    requiredIfAccepted(field: string): this;
+    requiredWith(fields: string | string[]): this;
+    requiredWithAll(fields: string | string[]): this;
+    requiredWithout(fields: string | string[]): this;
+    requiredWithoutAll(fields: string | string[]): this;
+    prohibited(condition?: boolean): this;
+    prohibitedIf(field: string, values: unknown): this;
+    prohibitedUnless(field: string, values: unknown): this;
+    prohibits(fields: string | string[]): this;
+    /**
+     * The value must exist: in a column of the host's data adapter (`exists()`, `exists({ column })`), in another adapter
+     * (`exists({ adapter: new ObjectionAdapter(Brand), column: 'id' })`), or according to a function.
+     */
+    exists(check?: {
+        adapter?: {
+            exists(column: string, value: unknown, exceptKey?: string | number | null): Promise<boolean>;
+        };
+        column?: string;
+    } | ((value: unknown, ctx: ComponentContext) => boolean | Promise<boolean>)): this;
     /** `unique` rule: the value must not exist in the column of the same name; `ignoreRecord` excludes the record being edited. */
     unique(options?: {
         ignoreRecord?: boolean;
@@ -111,6 +220,7 @@ export declare class TextInput extends Field {
     private _prefix;
     private _live;
     static make(name: string): TextInput;
+    protected hasNumericValidation(): boolean;
     /** Decimal number: `type="number"`, `step="any"`. */
     numeric(): this;
     /** Integer: `type="number"`, `step="1"`. */
@@ -120,11 +230,57 @@ export declare class TextInput extends Field {
     step(step: number | 'any' | null): this;
     minValue(value: number): this;
     maxValue(value: number): this;
-    /** Label shown before the input (e.g. `$`). */
-    prefix(label: string | null): this;
+    /** Label shown before the input (e.g. `$`); `isInline`: inside the input instead of a separate box. */
+    prefix(label: string | null, isInline?: boolean): this;
     private _suffix;
     /** Label shown after the input ("hours", "kg"…). */
-    suffix(label: string | null): this;
+    suffix(label: string | null, isInline?: boolean): this;
+    private _prefixInline;
+    private _suffixInline;
+    private _prefixIcon;
+    private _suffixIcon;
+    private _prefixIconColor;
+    private _suffixIconColor;
+    private _prefixActions;
+    private _suffixActions;
+    prefixIcon(icon: string | null, isInline?: boolean): this;
+    suffixIcon(icon: string | null, isInline?: boolean): this;
+    prefixIconColor(color: string | null): this;
+    suffixIconColor(color: string | null): this;
+    /**
+     * Icon button before the input, running an action. The action gets the field's `state`, and `set(name, value)` to change a
+     * field of the same form.
+     */
+    prefixAction(action: Action, isInline?: boolean): this;
+    prefixActions(actions: Action[]): this;
+    suffixAction(action: Action, isInline?: boolean): this;
+    suffixActions(actions: Action[]): this;
+    /** Affix actions, mounted through the schema component. */
+    getActions(): Action[];
+    /** Exact length: `minlength` and `maxlength`, and the matching rule. */
+    length(length: number): this;
+    private _datalist;
+    /** Suggestions offered by the browser while typing (`<datalist>`). */
+    datalist(options: string[]): this;
+    private _readOnly;
+    /** The value is shown and sent, but cannot be changed (`readonly`). */
+    readOnly(condition?: boolean): this;
+    private _copyable;
+    /** A button after the input copies its value (the browser only allows it on HTTPS or `localhost`). */
+    copyable(condition?: boolean, copyMessage?: string | null, copyMessageDuration?: number): this;
+    private _trim;
+    /** Removes the spaces around the value before it is validated and saved. */
+    trim(condition?: boolean): this;
+    hydrateState(value: unknown): unknown;
+    /** `trim()`: the submitted value is trimmed before it is validated and saved. */
+    protected stateForValidation(state: unknown): unknown;
+    dehydrateState(state: unknown): unknown;
+    private _inputMode;
+    private _autocapitalize;
+    /** Virtual keyboard: `none`, `text`, `decimal`, `numeric`, `tel`, `search`, `email` or `url`. */
+    inputMode(mode: string | null): this;
+    /** `none`, `sentences`, `words` or `characters` (`true` / `false` for `on` / `off`). */
+    autocapitalize(mode?: string | boolean | null): this;
     /** Sends the state to the server on every keystroke, or on blur with `onBlur`. */
     live(options?: {
         onBlur?: boolean;
@@ -140,33 +296,25 @@ export declare class TextInput extends Field {
     mask(pattern: string | null): this;
     /** Phone number: digits, spaces and common punctuation. */
     tel(): this;
+    email(condition?: boolean): this;
     /** Web address: `url` input type, a valid http(s) value is required. */
     url(): this;
     maxLength(length: number): this;
     minLength(length: number): this;
     toHtml(): Promise<string>;
 }
-/** Native date picker (`<input type="date">`). */
-export declare class DatePicker extends Field {
-    private _maxDate;
-    private _minDate;
-    private _live;
-    static make(name: string): DatePicker;
-    private _datePlaceholder;
-    /** Placeholder attribute (browsers do not display it on a native `date` input). */
-    placeholder(text: string | null): this;
-    /** Sends the state to the server as soon as it changes (`wire:model.live`). */
-    live(condition?: boolean): this;
-    /** The state is a `YYYY-MM-DD` date, whatever the stored precision. */
-    hydrateState(value: unknown): unknown;
-    private static resolve;
-    private bound;
-    /** Latest accepted date: `'today'`, a `YYYY-MM-DD` date, or a context function (`({ get }) => get('endDate') || 'today'`). */
-    maxDate(date: Lazy<string | null, ComponentContext>): this;
-    minDate(date: Lazy<string | null, ComponentContext>): this;
-    toHtml(): Promise<string>;
-}
 type Options = [string, string][] | Record<string, string>;
+/** Options, possibly grouped: `{ 'In process': { draft: 'Draft', reviewing: 'Reviewing' }, Reviewed: { … } }`. */
+type GroupedOptions = Options | Record<string, string | Record<string, string>> | [string, string | [string, string][]][];
+type OptionGroup = {
+    label: string;
+    options: [string, string][];
+};
+/**
+ * Copy of a component and of the components it holds (layout children, item schemas), so that each repeated item gets its own
+ * instances: components keep a reference to their container.
+ */
+export declare function cloneComponentTree<T extends Component>(component: T): T;
 /**
  * Dropdown. Native (`<select>`) by default; `searchable()` switches to the JavaScript select,
  * which queries the server through the exposed methods (`getSearchResultsForJs`…).
@@ -175,6 +323,15 @@ export declare class Select extends Field {
     private _options;
     private _placeholder;
     private _searchable;
+    private _native;
+    private _allowHtml;
+    private _maxItems;
+    private _minItems;
+    private _optionsLimit;
+    private _searchDebounce;
+    private _messages;
+    private _relationship;
+    private _affixes;
     private _dynamic;
     private _searchOnServer;
     private _live;
@@ -194,10 +351,55 @@ export declare class Select extends Field {
      * `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: Options | ((ctx: ComponentContext) => Options | Promise<Options>), config?: {
+    options(options: GroupedOptions | ((ctx: ComponentContext) => GroupedOptions | Promise<GroupedOptions>), config?: {
         dynamic?: boolean;
         searchOnServer?: boolean;
     }): this;
+    /** "Yes" / "No" options, saved as `1` / `0`. */
+    boolean(trueLabel?: string | null, falseLabel?: string | null, placeholder?: string | null): this;
+    /** `false`: the JavaScript select, even without search. */
+    native(condition?: boolean): this;
+    /** Option labels are HTML (sanitized on the server; JavaScript select only). */
+    allowHtml(condition?: boolean): this;
+    /** Maximum (and minimum) number of selected items of a multiple select, checked on the server. */
+    maxItems(count: number | null): this;
+    minItems(count: number | null): this;
+    /** Number of options shown at once in the JavaScript select (50 by default). */
+    optionsLimit(limit: number): this;
+    searchDebounce(ms: number): this;
+    loadingMessage(message: string): this;
+    noSearchResultsMessage(message: string): this;
+    searchPrompt(message: string): this;
+    searchingMessage(message: string): this;
+    noOptionsMessage(message: string): this;
+    prefix(label: string | null, isInline?: boolean): this;
+    suffix(label: string | null, isInline?: boolean): this;
+    prefixIcon(name: string | null, isInline?: boolean): this;
+    suffixIcon(name: string | null, isInline?: boolean): this;
+    prefixIconColor(color: string | null): this;
+    suffixIconColor(color: string | null): this;
+    prefixAction(action: Action, isInline?: boolean): this;
+    suffixAction(action: Action, isInline?: boolean): this;
+    prefixActions(actions: Action[]): this;
+    suffixActions(actions: Action[]): this;
+    /**
+     * Options from a relationship of the form's model (Objection `relationMappings`): a belongs-to relationship (the field is the
+     * foreign key, `Select.make('author_id').relationship('author', 'name')`), or a many-to-many one with `multiple()` (the field is
+     * named after the relationship, and saves the links once the record is saved). `modifyQueryUsing(query, search)` scopes the
+     * options; picked keys outside that scope are rejected. With `searchable()`, the options are searched on the server.
+     */
+    relationship(name: string, titleAttribute?: string | null, modifyQueryUsing?: ((query: any, search?: string) => unknown) | null, options?: {
+        model?: any;
+    }): this;
+    private relationInfo;
+    private relationshipOptions;
+    private isManyRelationship;
+    savesRelationships(): Promise<boolean>;
+    loadStateFromRelationships(record: any): Promise<{
+        state: unknown;
+    } | null>;
+    /** Many-to-many: links the picked records and unlinks the others (only keys allowed by the relationship's query). */
+    saveRelationships(record: any): Promise<void>;
     /** Disables an option depending on the context (e.g. already picked in another row). */
     disableOptionWhen(condition: (value: string, ctx: ComponentContext) => boolean): this;
     /** Sends the state to the server as soon as it changes. */
@@ -216,19 +418,20 @@ export declare class Select extends Field {
     /** Sanitized selected values: unique strings. */
     private selectedValues;
     private labelsOf;
-    /** No-op: options are always loaded with the form. */
-    preload(): this;
+    private _preload;
+    /** Relationship with `searchable()`: loads the options with the form, instead of on search only. Other options are always loaded. */
+    preload(condition?: boolean): this;
     hydrateState(value: unknown): unknown;
     dehydrateState(state: unknown): unknown;
+    /** Options with their groups (labels sanitized when `allowHtml()`). */
+    resolveGroupedOptions(): Promise<(OptionGroup | [string, string])[]>;
     resolveOptions(): Promise<[string, string][]>;
+    private itemCountRules;
     getValidationRules(): Promise<Rule[]>;
     getExposedMethods(): string[];
     private static forJs;
-    getOptionsForJs(): Promise<{
-        label: string;
-        value: string;
-        isDisabled: boolean;
-    }[]>;
+    private groupsForJs;
+    getOptionsForJs(): Promise<unknown[]>;
     private withDisabled;
     getSearchResultsForJs(search?: unknown): Promise<{
         label: string;
@@ -274,7 +477,10 @@ export declare class Select extends Field {
     private getEditOptionAction;
     /** Actions mounted on the field: hint, create option and edit option. */
     getActions(): Action[];
-    /** "+" and "edit" buttons on the right of the field. */
+    private affixIcon;
+    private affixActionsHtml;
+    private prefixHtml;
+    /** Suffix: label, icon, actions, then the "+" and "edit" buttons. */
     private suffixHtml;
     toHtml(): Promise<string>;
     /** JavaScript select rendering. */
@@ -295,59 +501,221 @@ type ItemLink = {
     url: string;
 };
 /**
- * List of repeated items sharing the same fields, displayed as a table.
+ * List of repeated items sharing the same fields: stacked cards (default), a table (`table()`), or one field per item (`simple()`).
  * The state is a map `item key → fields`; key order is display order.
- * Add, delete and move are component actions, mounted with `schemaComponent`.
+ * Add, delete, clone and move are component actions, mounted with `schemaComponent`.
  */
 export declare class Repeater extends Field {
     private _schema;
     private _columns;
     private _defaultItems;
     private _maxItems;
+    private _minItems;
     private _itemLinks;
+    private _simple;
+    private _grid;
+    private _collapsible;
+    private _collapsed;
+    private _persistCollapsed;
+    private _cloneable;
+    private _addable;
+    private _deletable;
+    private _reorderableWithButtons;
+    private _itemLabel;
+    private _itemNumbers;
+    private _truncateItemLabel;
+    private _headingTag;
+    private _addActionLabel;
+    private _addActionAlignment;
+    private _labelBetweenItems;
+    private _itemHeaders;
+    private _relationship;
     static make(name: string): Repeater;
-    /** Item fields: a function called for each item. */
-    schema(factory: () => Field[]): this;
+    /** Item components: a function called for each item. */
+    schema(factory: (() => Component[]) | Component[]): this;
     /** Table display, one column per field. */
     table(columns: TableColumn[]): this;
+    isTable(): boolean;
+    /**
+     * One field per item, without a card: the state is saved as a list of values (`['a@example.com', 'b@example.com']`).
+     * The field is cloned for each item.
+     */
+    simple(field: Field | null): this;
     defaultItems(count: number): this;
     maxItems(count: number): this;
+    /** Minimum number of items, checked on the server. */
+    minItems(count: number | null): this;
     private _reorderable;
     /** `false`: items keep their order (e.g. a relationship without an order column). */
     reorderable(condition?: boolean): this;
+    private _dragAndDrop;
+    /** Move up / move down buttons in each item header, besides drag and drop. */
+    reorderableWithButtons(condition?: boolean): this;
+    /** `false`: no drag and drop (buttons may still reorder, with `reorderableWithButtons()`). */
+    reorderableWithDragAndDrop(condition?: boolean): this;
+    /** Reordering is off with `reorderable(false)`, and for a relationship without `orderColumn()` (the order could not be saved). */
+    private isReorderable;
+    private canDrag;
+    private canMove;
     /** Link shown on each row (an item action pointing to a URL). */
     extraItemLink(resolver: (ctx: {
         item: Record<string, unknown>;
         key: string;
     }) => ItemLink | null): this;
+    /** Items laid out in a grid (`2`, or `{ md: 2, xl: 3 }`). */
+    grid(columns?: Record<string, number> | number | null): this;
+    /** Items can be collapsed from their header; `collapsed()` collapses them on load. */
+    collapsible(condition?: boolean): this;
+    collapsed(condition?: boolean): this;
+    /** Keeps each item's collapsed state in the browser (local storage). */
+    persistCollapsed(condition?: boolean): this;
+    cloneable(condition?: boolean): this;
+    /** `false`: no "Add" button (and adding is refused on the server). */
+    addable(condition?: boolean): this;
+    /** `false`: no delete button (and deleting is refused on the server). */
+    deletable(condition?: boolean): this;
+    /** Item header label: a string, or a function of the item's state (`({ state }) => state.name ?? null`). Escaped. */
+    itemLabel(label: ((ctx: {
+        state: Record<string, unknown>;
+        key: string;
+        index: number;
+    }) => string | null) | string | null): this;
+    /** Item number after the label. */
+    itemNumbers(condition?: boolean): this;
+    truncateItemLabel(condition?: boolean): this;
+    /** `false`: items have no header (and so no buttons): only their fields. */
+    itemHeaders(condition?: boolean): this;
+    addActionLabel(label: string | null): this;
+    addActionAlignment(alignment: 'start' | 'center' | 'end' | null): this;
+    labelBetweenItems(label: string | null): this;
+    /**
+     * Items are the records of a has-many relationship of the form's model (Objection `relationMappings`): loaded when the form is
+     * filled, then created, updated and deleted once the record is saved. `orderColumn()` saves the items' order.
+     */
+    relationship(name?: string | null, modifyQueryUsing?: ((query: any) => unknown) | null, options?: {
+        model?: any;
+    }): this;
+    orderColumn(column?: string | null): this;
+    private _orderColumnPending;
+    private itemComponents;
+    private itemFields;
     /** Well-formed items only: keys come from the browser, so only simple keys are kept. */
     getItems(): Record<string, Record<string, unknown>>;
     private setItems;
     private itemDefaults;
     getDefaultState(): unknown;
-    /** Relationship records → `record-<id>` items, limited to the declared fields. */
+    /** A list (records → `record-<id>` items; simple values → one-field items) or a keyed map, limited to the declared fields. */
     hydrateState(value: unknown): unknown;
     dehydrateState(): unknown;
+    /** Simple repeater: saved as a list of values. */
+    finalizeDehydratedState(state: unknown): unknown;
     getChildSchemas(): Schema[];
+    private _childColumns;
+    /** Grid columns inside each item. */
+    columns(columns: Record<string, number> | number | null): this;
     getValidationRules(): Promise<Rule[]>;
+    private relationInfo;
+    savesRelationships(): Promise<boolean>;
+    private relatedQuery;
+    loadStateFromRelationships(record: any): Promise<{
+        state: unknown;
+    } | null>;
+    /** Creates, updates and deletes the related records; only records of this owner (and query) are touched. */
+    saveRelationships(record: any): Promise<void>;
     getActions(): Action[];
+    private itemLabelOf;
     toHtml(): Promise<string>;
+    private toTableHtml;
 }
-/** Native time input: the state is `HH:MM` with `seconds(false)`, `HH:MM:SS` otherwise. */
-export declare class TimePicker extends Field {
-    private _seconds;
-    static make(name: string): TimePicker;
+/** PHP date format (`M j, Y H:i`) to day.js (`MMM D, YYYY HH:mm`), as Filament's `convert_date_format()`. Escaped characters (`\at`) become literals. */
+export declare function phpDateFormatToDayjs(format: string): string;
+type DateLimit = Lazy<string | null, ComponentContext>;
+/**
+ * Base of the date, time and date-time pickers: native browser input by default, or Filament's JavaScript picker with
+ * `native(false)` (display format, disabled dates, first day of the week, locale). Limits and disabled dates are checked on the server.
+ */
+declare abstract class TemporalField extends Field {
+    protected abstract hasDate(): boolean;
+    protected abstract hasTime(): boolean;
+    protected _seconds: boolean;
+    protected _native: boolean;
+    protected _maxDate: DateLimit;
+    protected _minDate: DateLimit;
+    protected _displayFormat: string | null;
+    protected _format: string | null;
+    protected _firstDayOfWeek: number;
+    protected _disabledDates: Lazy<string[], ComponentContext>;
+    protected _closeOnDateSelection: boolean;
+    protected _locale: string | null;
+    protected _timezone: string | null;
+    protected _hoursStep: number;
+    protected _minutesStep: number;
+    protected _secondsStep: number;
+    protected _defaultFocusedDate: string | null;
+    protected _temporalPlaceholder: string | null;
     seconds(condition?: boolean): this;
+    hasSeconds(): boolean;
+    /** `false`: Filament's JavaScript picker instead of the browser's native input. */
+    native(condition?: boolean): this;
+    isNative(): boolean;
+    /** Display format of the JavaScript picker, in PHP's notation (`'d/m/Y'`, `'M j, Y H:i'`). */
+    displayFormat(format: string | null): this;
+    /** Format of the saved value, in PHP's notation (`'Y-m-d'` by default for dates, `'Y-m-d H:i:s'` with a time). */
+    format(format: string | null): this;
+    /** First day of the week in the JavaScript picker: 0 (Sunday) to 6. */
+    firstDayOfWeek(day: number): this;
+    weekStartsOnMonday(): this;
+    weekStartsOnSunday(): this;
+    /** Dates that cannot be picked (`YYYY-MM-DD`), also rejected on the server. */
+    disabledDates(dates: Lazy<string[], ComponentContext>): this;
+    closeOnDateSelection(condition?: boolean): this;
+    /** Locale of the JavaScript picker's month and day names (`'fr'`). */
+    locale(locale: string | null): this;
+    /** Shows and edits the value in this time zone, while it is saved in UTC (date-time pickers). */
+    timezone(timezone: string | null): this;
+    hoursStep(step: number): this;
+    minutesStep(step: number): this;
+    secondsStep(step: number): this;
+    /** Date focused when the JavaScript picker opens on an empty field. */
+    defaultFocusedDate(date: string | null): this;
+    placeholder(text: string | null): this;
+    private static resolveLimit;
+    protected limit(date: DateLimit): Promise<string | null>;
+    /** Latest accepted date: `'today'`, a date, or a context function (`({ get }) => get('ends_at')`). */
+    maxDate(date: DateLimit): this;
+    minDate(date: DateLimit): this;
+    /** Comparable string of a value: the date only for date pickers, the time only for time pickers. */
+    private comparable;
+    getValidationRules(): Promise<Rule[]>;
+    /** Record value to form state, shown in the field's time zone. */
     hydrateState(value: unknown): unknown;
+    /** Form state as the input expects it. */
+    protected stateOf(local: string): string;
+    /** Wall-clock value of the field's time zone to UTC. */
+    private toUtc;
+    /** Saved value: in UTC, in `format()` (or the default format). */
+    dehydrateState(state: unknown): unknown;
+    protected defaultDisplayFormat(): string;
+    protected nativeType(): string;
     toHtml(): Promise<string>;
 }
-/** Native `datetime-local` input: the saved state is `YYYY-MM-DD HH:MM:SS`. */
-export declare class DateTimePicker extends Field {
-    private _seconds;
+/** Date picker: native `<input type="date">` by default; the saved state is `YYYY-MM-DD`. */
+export declare class DatePicker extends TemporalField {
+    static make(name: string): DatePicker;
+    protected hasDate(): boolean;
+    protected hasTime(): boolean;
+}
+/** Time picker: native `<input type="time">` by default; the state is `HH:MM:SS` (`HH:MM` with `seconds(false)`). */
+export declare class TimePicker extends TemporalField {
+    static make(name: string): TimePicker;
+    protected hasDate(): boolean;
+    protected hasTime(): boolean;
+}
+/** Date-time picker: native `datetime-local` input by default; the saved state is `YYYY-MM-DD HH:MM:SS`. */
+export declare class DateTimePicker extends TemporalField {
     static make(name: string): DateTimePicker;
-    seconds(condition?: boolean): this;
-    dehydrateState(state: unknown): unknown;
-    toHtml(): Promise<string>;
+    protected hasDate(): boolean;
+    protected hasTime(): boolean;
 }
 /** Single choice as radio buttons. */
 export declare class Radio extends Field {
@@ -362,6 +730,12 @@ export declare class Radio extends Field {
     /** Options side by side. */
     inline(condition?: boolean): this;
     live(condition?: boolean): this;
+    private _disableOptionWhen;
+    /** Options that cannot be picked; they are refused on the server too. */
+    disableOptionWhen(condition: ((value: string, label: string) => boolean) | null): this;
+    isOptionDisabled(value: string, label: string): boolean;
+    /** "Yes" (`1`) and "No" (`0`) options. */
+    boolean(trueLabel?: string | null, falseLabel?: string | null): this;
     getValidationRules(): Promise<Rule[]>;
     toHtml(): Promise<string>;
 }
@@ -371,6 +745,27 @@ export declare class Textarea extends Field {
     static make(name: string): Textarea;
     rows(rows: number): this;
     maxLength(length: number): this;
+    private _minLength;
+    private _placeholder;
+    private _readOnly;
+    private _autosize;
+    private _grammarly;
+    private _trim;
+    minLength(length: number): this;
+    /** Exact length. */
+    length(length: number): this;
+    placeholder(text: string | null): this;
+    readOnly(condition?: boolean): this;
+    /** The textarea grows with its content. */
+    autosize(condition?: boolean): this;
+    /** Stops the Grammarly extension from analyzing the content. */
+    disableGrammarly(condition?: boolean): this;
+    /** Removes the spaces around the value before it is validated and saved. */
+    trim(condition?: boolean): this;
+    hydrateState(value: unknown): unknown;
+    /** `trim()`: the submitted value is trimmed before it is validated and saved. */
+    protected stateForValidation(state: unknown): unknown;
+    dehydrateState(state: unknown): unknown;
     toHtml(): Promise<string>;
 }
 /** Tag list input: the state is an array of strings. */
@@ -384,10 +779,28 @@ export declare class TagsInput extends Field {
     suggestions(suggestions: string[]): this;
     /** Keys that confirm the current tag, besides Enter (`['Tab', ',']`). */
     splitKeys(keys: string[]): this;
+    private _separator;
+    private _tagPrefix;
+    private _tagSuffix;
+    private _reorderable;
+    private _tagColor;
+    private _tagRules;
+    /** Saves the tags as one string joined with this separator (`'a,b,c'`) instead of a list. */
+    separator(separator?: string | null): this;
+    /** Text shown before / after each tag (not saved). */
+    tagPrefix(prefix: string | null): this;
+    tagSuffix(suffix: string | null): this;
+    /** Tags can be reordered by dragging. */
+    reorderable(condition?: boolean): this;
+    /** Badge color of the tags (`primary` by default). */
+    color(color: string | null): this;
+    /** Rules applied to each tag (e.g. a maximum length); the message names the tag. */
+    nestedRecursiveRules(rules: (Rule | string)[]): this;
     getDefaultState(): unknown;
     hydrateState(value: unknown): unknown;
-    /** Only non-empty strings are saved, whatever shape the browser sends. */
+    /** Only non-empty strings are saved, whatever shape the browser sends (joined with the separator, if any). */
     dehydrateState(state: unknown): unknown;
+    getValidationRules(): Promise<Rule[]>;
     toHtml(): Promise<string>;
 }
 /** On/off switch. */
@@ -395,6 +808,19 @@ export declare class Toggle extends Field {
     static make(name: string): Toggle;
     getDefaultState(): unknown;
     hydrateState(value: unknown): unknown;
+    private _onIcon;
+    private _offIcon;
+    private _onColor;
+    private _offColor;
+    private _inline;
+    /** Icons inside the switch's knob. */
+    onIcon(icon: string | null): this;
+    offIcon(icon: string | null): this;
+    /** Colors when on (`primary` by default) and off (`gray`). */
+    onColor(color: string | null): this;
+    offColor(color: string | null): this;
+    /** `false`: the label goes above the switch instead of beside it. */
+    inline(condition?: boolean): this;
     toHtml(): Promise<string>;
 }
 /** Single choice shown as buttons. */
@@ -417,6 +843,34 @@ export declare class ToggleButtons extends Field {
     inline(condition?: boolean): this;
     /** Buttons joined into a single group. */
     grouped(condition?: boolean): this;
+    private _multiple;
+    private _tooltips;
+    private _size;
+    private _labelsHidden;
+    private _fullWidth;
+    private _columns;
+    private _disableOptionWhen;
+    /** Several buttons can be selected: the state is a list of values. */
+    multiple(condition?: boolean): this;
+    /** Tooltip per value. */
+    tooltips(tooltips: Record<string, string>): this;
+    /** Button size: `xs`, `sm`, `md` (default), `lg` or `xl`. */
+    size(size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null): this;
+    /** Icons only: the labels stay for screen readers. */
+    hiddenButtonLabels(condition?: boolean): this;
+    /** Buttons stretch to the width of the field. */
+    fullWidth(condition?: boolean): this;
+    /** Number of columns the buttons are spread over (from `lg`), when not inline. */
+    columns(columns: number | null): this;
+    /** Options that cannot be selected; they are refused on the server too. */
+    disableOptionWhen(condition: ((value: string, label: string) => boolean) | null): this;
+    isOptionDisabled(value: string, label: string): boolean;
+    /** "Yes" (`1`) and "No" (`0`) buttons, green and red, with check and cross icons. */
+    boolean(trueLabel?: string | null, falseLabel?: string | null): this;
+    getDefaultState(): unknown;
+    hydrateState(value: unknown): unknown;
+    /** Multiple: only offered values, in option order. */
+    dehydrateState(state: unknown): unknown;
     getValidationRules(): Promise<Rule[]>;
     toHtml(): Promise<string>;
 }
@@ -430,38 +884,153 @@ export declare function richHtmlToDocument(html: string | null | undefined): Ric
  * TipTap document → HTML to save, or null if empty or invalid. The document comes from the browser,
  * so it is rendered then re-parsed to keep only what the schema accepts.
  */
+/** HTML of a document already sanitized (`RichContentRenderer`): no re-parsing. */
+export declare function renderRichDocument(document: unknown): string;
 export declare function richDocumentToHtml(document: unknown): string | null;
+/** Tools of the rich editor's toolbar, in their default groups. */
+export declare const RICH_EDITOR_TOOLS: string[][];
+/** Custom blocks of an editor: a list, or groups of blocks by label. */
+export type CustomBlocks = CustomBlockClass[] | Record<string, CustomBlockClass[]>;
 /**
- * Rich text editor: the browser works on a TipTap document, the database receives HTML.
- * Not supported yet: attachments, custom blocks, mentions.
+ * Rich text editor (TipTap): the browser works on a document, the database receives HTML (or JSON with `json()`).
+ * Besides the starter kit: text colors, merge tags, mentions, custom blocks, columns, resizable images, and your own
+ * tools and TipTap extensions.
  */
 export declare class RichEditor extends Field {
+    private _toolbar;
+    private _disabledTools;
+    private _json;
+    private _richPlaceholder;
+    private _attachmentsStorage;
+    private _attachmentsDirectory;
+    private _attachmentTypes;
+    private _attachmentMaxSize;
+    private _customTools;
+    private _textColors;
+    private _customTextColors;
+    private _mergeTags;
+    private _noMergeTagResults;
+    private _mentions;
+    private _customBlocks;
+    private _minimalCustomBlockControls;
+    private _customBlocksGrid;
+    private _searchableCustomBlocks;
+    private _activePanel;
+    private _stickyToolbar;
+    private _resizableImages;
+    private _jsExtensions;
+    private _editorActions;
     static make(name: string): RichEditor;
+    /** Toolbar tools, by group (`[['bold', 'italic', 'link'], ['h2', 'h3'], ['undo', 'redo']]`); see `RICH_EDITOR_TOOLS` and `RICH_EDITOR_TOOL_DEFINITIONS`. */
+    toolbarButtons(groups: string[][] | string[]): this;
+    private assertKnownTools;
+    /** Removes buttons; with no argument, removes them all. */
+    disableToolbarButtons(tools?: string[]): this;
+    disableAllToolbarButtons(condition?: boolean): this;
+    /** Your own toolbar buttons (or replacements of built-in ones, by name); place them with `toolbarButtons()`. */
+    tools(tools: RichEditorTool[]): this;
+    /** Actions mounted by your tools (`RichEditorTool.make('x').action()`), run with the editor selection in `arguments.editorSelection`. */
+    editorActions(actions: Action[]): this;
+    /** Browser TipTap extensions: URLs of ES modules exporting an extension (or an array of them). Register their server side with `registerRichContentExtensions()`. */
+    extensions(urls: string[]): this;
+    /** Saves the content as the editor's JSON document instead of HTML. */
+    json(condition?: boolean): this;
+    placeholder(text: string | null): this;
+    /** Where files attached in the editor are stored (`FileUpload.storage` by default); without storage, attaching is off. */
+    fileAttachmentsStorage(storage: FileStorage | null): this;
+    fileAttachmentsDirectory(directory: string | null): this;
+    /** Accepted types of attached files, checked on the file's content (images only: they are inserted as images). */
+    fileAttachmentsAcceptedFileTypes(types: string[]): this;
+    /** Maximum size of attached files, in kilobytes. */
+    fileAttachmentsMaxSize(kilobytes: number): this;
+    /** Text colors offered by the `textColor` tool (the Tailwind palette by default): `{ brand: TextColor.make('Brand', '#0ea5e9', '#38bdf8') }`. */
+    textColors(colors: Record<string, TextColor> | null): this;
+    getTextColors(): Record<string, TextColor>;
+    /** Lets users pick any color, besides the listed ones. */
+    customTextColors(condition?: boolean): this;
+    /** Merge tags users insert (`mergeTags` tool and `{{` in the text), replaced by values when the content is rendered: `['name', 'today']` or `{ name: 'Name' }`. */
+    mergeTags(tags: string[] | Record<string, string>): this;
+    noMergeTagSearchResultsMessage(message: string | null): this;
+    /** Mentions: `[MentionProvider.make('@').items({ 1: 'Ada' })]`. */
+    mentions(providers: MentionProvider[]): this;
+    /** Custom blocks (`customBlocks` tool), as a list or grouped by label. */
+    customBlocks(blocks: CustomBlocks): this;
+    minimalCustomBlockControls(condition?: boolean): this;
+    /** Shows the blocks of the panel in a grid. */
+    customBlocksGrid(condition?: boolean): this;
+    /** Adds a search field to the blocks panel. */
+    searchableCustomBlocks(condition?: boolean): this;
+    /** Panel open when the editor loads (`customBlocks`, `mergeTags`). */
+    activePanel(panel: string | null): this;
+    /** Keeps the toolbar visible while scrolling the content. */
+    stickyToolbar(condition?: boolean): this;
+    /** Lets users resize images with handles; the size is saved on the image. */
+    resizableImages(condition?: boolean): this;
+    private attachmentsStorage;
+    private findTool;
+    private toolGroups;
+    private blockGroups;
+    getCustomBlock(id: unknown): CustomBlockClass | null;
     hydrateState(value: unknown): unknown;
     getDefaultState(): unknown;
+    /** HTML (sanitized by the editor's schema), or the JSON document with `json()` (normalized through the same schema). */
     dehydrateState(state: unknown): unknown;
     getValidationRules(): Promise<Rule[]>;
     getExposedMethods(): string[];
-    getMentionSearchResultsForJs(): unknown[];
-    getMentionLabelsForJs(): unknown[];
-    getCustomBlockPreviewsForJs(): unknown[];
-    getUploadedFileAttachmentTemporaryUrl(): null;
-    saveUploadedFileAttachmentAndGetUrl(): null;
-    /** Toolbar "link" action: a modal (URL, new tab), then commands sent back to the browser editor. */
+    private mentionProvider;
+    /** Mention search, for the editor's JavaScript: `[{ id, label }]`. */
+    getMentionSearchResultsForJs(search?: unknown, triggerCharacter?: unknown): Promise<{
+        id: string;
+        label: string;
+    }[]>;
+    /** Current labels of mentioned ids, by trigger character. */
+    getMentionLabelsForJs(mentions?: unknown): Promise<Record<string, Record<string, string>>>;
+    /** Previews of inserted blocks, for the editor's JavaScript. */
+    getCustomBlockPreviewsForJs(customBlocks?: unknown): {
+        key: number;
+        label: string;
+        preview: string;
+        shouldApplyProseStylingToPreview: boolean;
+    }[];
+    /**
+     * URL of a file the editor just uploaded: the file is checked (type from its content, size), stored, and its public URL returned.
+     * It stays stored even if the form is not saved.
+     */
+    getUploadedFileAttachmentTemporaryUrl(args?: unknown): Promise<string | null>;
+    saveUploadedFileAttachmentAndGetUrl(args?: unknown): Promise<string | null>;
+    /** Sends commands to the editor in the browser (after an action), on the given selection. */
+    runCommands(livewire: any, commands: {
+        name: string;
+        arguments?: unknown[];
+    }[], editorSelection?: unknown): void;
+    /** Toolbar actions: link, text color, custom block, and the ones of `editorActions()`. */
     getActions(): Action[];
+    private textColorAction;
+    /** Modal of a custom block, built from the block class named in the arguments (`id`): insert or edit. */
+    private customBlockAction;
+    private customBlocksPanelHtml;
+    private mergeTagsPanelHtml;
     toHtml(): Promise<string>;
 }
 /** Color picker (hex format). */
 export declare class ColorPicker extends Field {
     static make(name: string): ColorPicker;
-    /** Hex format: the only one supported, kept for API compatibility. */
+    private _format;
+    /** Color format of the state: `#ff0000` (default), `rgb(255, 0, 0)`, `rgba(255, 0, 0, 1)` or `hsl(0, 100%, 50%)`. */
+    format(format: 'hex' | 'rgb' | 'rgba' | 'hsl'): this;
     hex(): this;
-    constructor(name: string);
+    rgb(): this;
+    rgba(): this;
+    hsl(): this;
+    getValidationRules(): Promise<Rule[]>;
     toHtml(): Promise<string>;
 }
 export declare class Checkbox extends Field {
+    private _inline;
     static make(name: string): Checkbox;
     getDefaultState(): unknown;
+    /** `false`: the label goes above the checkbox instead of beside it. */
+    inline(condition?: boolean): this;
     toHtml(): Promise<string>;
 }
 /** Checkboxes for a list of values (no search or "select all" yet). */
@@ -472,6 +1041,23 @@ export declare class CheckboxList extends Field {
     options(options: Options): this;
     /** Number of columns the options are spread over (from `lg`). */
     columns(columns: number | null): this;
+    private _descriptions;
+    private _searchable;
+    private _bulkToggleable;
+    private _disableOptionWhen;
+    /** Helper text per value, under the option label. */
+    descriptions(descriptions: Record<string, string>): this;
+    /** A search field filters the options in the browser. */
+    searchable(condition?: boolean): this;
+    private _searchPrompt;
+    private _noSearchResultsMessage;
+    searchPrompt(prompt: string): this;
+    noSearchResultsMessage(message: string): this;
+    /** "Select all" / "Deselect all" links. */
+    bulkToggleable(condition?: boolean): this;
+    /** Options that cannot be checked; they are refused on the server too. */
+    disableOptionWhen(condition: ((value: string, label: string) => boolean) | null): this;
+    isOptionDisabled(value: string, label: string): boolean;
     getDefaultState(): unknown;
     hydrateState(value: unknown): unknown;
     /** Only offered values are kept, without duplicates, in option order. */
@@ -488,8 +1074,29 @@ export declare class KeyValue extends Field {
     keyLabel(label: string): this;
     valueLabel(label: string): this;
     reorderable(condition?: boolean): this;
+    private _addable;
+    private _deletable;
+    private _editableKeys;
+    private _editableValues;
+    private _keyPlaceholder;
+    private _valuePlaceholder;
+    private _addLabel;
+    private _deleteLabel;
+    /** `false`: no "Add row" button. */
+    addable(condition?: boolean): this;
+    /** `false`: rows cannot be deleted. */
+    deletable(condition?: boolean): this;
+    /** `false`: keys cannot be changed. The server keeps the saved keys. */
+    editableKeys(condition?: boolean): this;
+    /** `false`: values cannot be changed. */
+    editableValues(condition?: boolean): this;
+    keyPlaceholder(text: string | null): this;
+    valuePlaceholder(text: string | null): this;
+    addActionLabel(label: string | null): this;
+    deleteActionLabel(label: string | null): this;
     getDefaultState(): unknown;
     private static toPairs;
+    private _originalValue;
     hydrateState(value: unknown): unknown;
     /** Flat object of strings: empty keys, nested objects and dangerous keys are dropped; 200 pairs at most. */
     dehydrateState(state: unknown): unknown;
@@ -504,7 +1111,7 @@ export declare class RawJs {
 }
 /**
  * Markdown editor (EasyMDE). The state is raw Markdown text, to sanitize before any HTML display.
- * Attachments are not supported (no `attachFiles` button by default); when read-only (`disabled()`),
+ * Files can be attached (images, stored on upload) when a storage is set (`fileAttachmentsStorage()` or `FileUpload.storage`); when read-only (`disabled()`),
  * the text is shown escaped, without Markdown conversion.
  */
 export declare class MarkdownEditor extends Field {
@@ -536,9 +1143,23 @@ export declare class MarkdownEditor extends Field {
     minLength(length: number): this;
     hydrateState(value: unknown): unknown;
     getValidationRules(): Promise<Rule[]>;
+    private _attachmentsStorage;
+    private _attachmentsDirectory;
+    private _attachmentTypes;
+    private _attachmentMaxSize;
+    /** Where attached files are stored (`FileUpload.storage` by default); without storage, the "Attach files" button is hidden. */
+    fileAttachmentsStorage(storage: FileStorage | null): this;
+    fileAttachmentsDirectory(directory: string | null): this;
+    /** Accepted types of attached files (images), checked on the file's content. */
+    fileAttachmentsAcceptedFileTypes(types: string[]): this;
+    /** Maximum size of attached files, in kilobytes. */
+    fileAttachmentsMaxSize(kilobytes: number): this;
+    private canAttachFiles;
+    private visibleToolbar;
     getExposedMethods(): string[];
     getUploadedFileAttachmentTemporaryUrl(): null;
-    saveUploadedFileAttachmentAndGetUrl(): null;
+    /** Stores the file just uploaded to `componentFileAttachments.<state path>` and returns its URL. */
+    saveUploadedFileAttachmentAndGetUrl(): Promise<string | null>;
     toHtml(): Promise<string>;
 }
 /** Code editor (CodeMirror): highlighting from `language()`, line wrapping with `wrap()`. */
@@ -681,6 +1302,10 @@ export declare class Placeholder extends Component {
 export declare function fillSchema(schema: Schema, target: Record<string, unknown>): void;
 /** Fills the form state from a record, field by field. */
 export declare function fillSchemaFromRecord(schema: Schema, target: Record<string, unknown>, record: Record<string, unknown>): void;
+/** Fills the fields that load their state from the record's relationships (`loadStateFromRelationshipsUsing()`, `Select::relationship()`…). */
+export declare function loadSchemaRelationships(schema: Schema, target: Record<string, unknown>, record: unknown): Promise<void>;
+/** Saves the visible fields that write the record's relationships, once the record is created or updated. */
+export declare function saveSchemaRelationships(schema: Schema, record: unknown): Promise<void>;
 /** Validates every visible field of a schema; returns errors by state path. */
 export declare function validateSchema(schema: Schema): Promise<Record<string, string[]>>;
 /** State to save: only declared, visible, dehydrated fields; an empty string becomes `null`. */
@@ -795,17 +1420,39 @@ export type FileUploadEntry = {
 };
 /** Where files go once the form is saved. */
 export interface FileStorage {
-    /** Stores a temporary file and returns its key (relative path). */
-    store(file: TemporaryUpload, directory: string | null): Promise<string>;
+    /** Stores a temporary file and returns its key (relative path); `name` is the file name to use instead of a random one. */
+    store(file: TemporaryUpload, directory: string | null, name?: string | null): Promise<string>;
     info(key: string): Promise<UploadedFileInfo | null>;
 }
 /** Local disk storage, served under a public URL. File names are random; the extension comes from the detected type. */
+/**
+ * A file name chosen by the application or the user, made safe for storage: no directory part, only letters, digits, `_` and
+ * `-`, and always the extension detected from the file's content (an uploaded `shell.php` declared as an image is stored
+ * as `shell.png`).
+ */
+export declare function safeStorageName(name: string, extension: string): string;
+/** Width and height of a PNG, GIF, JPEG or WebP image, read from its header; `null` for other files. */
+export declare function readImageSize(path: string): {
+    width: number;
+    height: number;
+} | null;
+export type ImageDimensions = {
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    width?: number;
+    height?: number;
+    minRatio?: number;
+    maxRatio?: number;
+    ratio?: number;
+};
 export declare class LocalFileStorage implements FileStorage {
     private root;
     private baseUrl;
     constructor(root: string, baseUrl: string);
     private resolve;
-    store(file: TemporaryUpload, directory: string | null): Promise<string>;
+    store(file: TemporaryUpload, directory: string | null, name?: string | null): Promise<string>;
     info(key: string): Promise<UploadedFileInfo | null>;
 }
 /**
@@ -825,7 +1472,98 @@ export declare class FileUpload extends Field {
     private _storeFiles;
     private _storage;
     private _getUploadedFileUsing;
+    private _minSize;
+    private _ui;
+    private _avatar;
+    private _imageEditor;
+    private _circleCropper;
+    private _editorAspectRatios;
+    private _cropAspectRatio;
+    private _imageAspectRatios;
+    private _dimensions;
+    private _deletable;
+    private _preserveFilenames;
+    private _fileNameUsing;
+    private _fileNamesField;
+    private _storedNames;
+    private _alignment;
+    private _placeholder;
     static make(name: string): FileUpload;
+    /** Minimum file size, in kilobytes. */
+    minSize(kilobytes: number | null): this;
+    /** Download button on each saved file. */
+    downloadable(condition?: boolean): this;
+    /** Button opening each saved file in a new tab. */
+    openable(condition?: boolean): this;
+    /** `false`: no preview of images. */
+    previewable(condition?: boolean): this;
+    /** `false`: files cannot be pasted from the clipboard. */
+    pasteable(condition?: boolean): this;
+    /** New files are added after the existing ones (instead of before). */
+    appendFiles(condition?: boolean): this;
+    /** `false`: saved files cannot be removed (the remove button is hidden, and removing is refused on the server). */
+    deletable(condition?: boolean): this;
+    /** `'grid'` (with `multiple()`), `'compact'`, `'integrated'` or `'circle'`. */
+    panelLayout(layout: 'grid' | 'compact' | 'integrated' | 'circle' | string | null): this;
+    panelAspectRatio(ratio: string | null): this;
+    itemPanelAspectRatio(ratio: string | null): this;
+    imagePreviewHeight(height: string | null): this;
+    loadingIndicatorPosition(position: string): this;
+    removeUploadedFileButtonPosition(position: string): this;
+    uploadButtonPosition(position: string): this;
+    uploadProgressIndicatorPosition(position: string): this;
+    /** Message shown while a file uploads. */
+    uploadingMessage(message: string): this;
+    /** Number of files uploaded at the same time. */
+    maxParallelUploads(count: number | null): this;
+    /** Extension → MIME type map for files the browser cannot type (`{ zip: 'application/zip' }`). */
+    mimeTypeMap(map: Record<string, string>): this;
+    /** `false`: images keep their EXIF orientation. */
+    orientImagesFromExif(condition?: boolean): this;
+    alignment(alignment: 'start' | 'center' | 'end' | null): this;
+    /** Text of the drop area. */
+    placeholder(text: string | null): this;
+    /** Round avatar: one image, cropped to a square and shown as a circle. */
+    avatar(): this;
+    /** Image editor (crop, rotate, flip, zoom) opened from each image, powered by Cropper.js in the browser. */
+    imageEditor(condition?: boolean): this;
+    /** Aspect ratios offered by the image editor (`['16:9', '4:3', '1:1']`; `null` for a free crop). */
+    imageEditorAspectRatioOptions(ratios: (string | null)[]): this;
+    imageEditorAspectRatios(ratios: (string | null)[]): this;
+    /** Cropper.js view mode (1, 2 or 3). */
+    imageEditorMode(mode: 1 | 2 | 3): this;
+    imageEditorEmptyFillColor(color: string | null): this;
+    imageEditorViewportWidth(width: string | number | null): this;
+    imageEditorViewportHeight(height: string | number | null): this;
+    private _autoOpenEditor;
+    /** With `imageEditor()` and a single aspect ratio, opens the editor when an uploaded image has another ratio (on by default). */
+    automaticallyOpenImageEditorForAspectRatio(condition?: boolean): this;
+    private autoOpenEditorRatio;
+    /** Circle crop in the image editor (avatars). */
+    circleCropper(condition?: boolean): this;
+    /** Crops images to this ratio in the browser before upload (`'16:9'`), without opening the editor. */
+    automaticallyCropImagesToAspectRatio(ratio: string | null): this;
+    imageCropAspectRatio(ratio: string | null): this;
+    /** Resizes images in the browser before upload (`'cover'`, `'contain'` or `'force'`). */
+    automaticallyResizeImagesMode(mode: 'cover' | 'contain' | 'force' | null): this;
+    automaticallyResizeImagesToWidth(width: string | number | null): this;
+    automaticallyResizeImagesToHeight(height: string | number | null): this;
+    automaticallyUpscaleImagesWhenResizing(condition?: boolean): this;
+    imageResizeMode(mode: 'cover' | 'contain' | 'force' | null): this;
+    imageResizeTargetWidth(width: string | number | null): this;
+    imageResizeTargetHeight(height: string | number | null): this;
+    /** Accepted aspect ratio(s) of uploaded images (`'16:9'` or a list), checked on the server. */
+    imageAspectRatio(ratio: string | string[] | null): this;
+    /** Width, height and ratio bounds of uploaded images (`{ minWidth: 800, maxHeight: 1080 }`), checked on the server. */
+    imageDimensions(dimensions: ImageDimensions | null): this;
+    /** Stores files under their original (sanitized) names. See the security notes in the docs. */
+    preserveFilenames(condition?: boolean): this;
+    /** Name of the stored file, from the temporary file; sanitized, and its extension is the detected one. */
+    getUploadedFileNameForStorageUsing(callback: ((file: TemporaryUpload, ctx: ComponentContext) => string | Promise<string>) | null): this;
+    /** Saves the original file names (keyed by stored file) in another attribute of the record. */
+    storeFileNamesIn(field: string | null): this;
+    /** Extra saved values, next to the field (the original file names of `storeFileNamesIn()`). */
+    getExtraDehydratedState(): Record<string, unknown>;
     multiple(condition?: boolean): this;
     maxFiles(count: number | null): this;
     /** Maximum file size, in kilobytes. */
@@ -849,6 +1587,8 @@ export declare class FileUpload extends Field {
     /** Stored keys the current record already owns: the only ones accepted back from the browser. */
     private originalKeys;
     private isTemporary;
+    /** Original names saved by `storeFileNamesIn()`, by stored key. */
+    private savedFileNames;
     getExposedMethods(): string[];
     getUploadedFiles(): Promise<Record<string, UploadedFileInfo | null>>;
     private writeState;
@@ -861,6 +1601,7 @@ export declare class FileUpload extends Field {
     validate(): Promise<string[]>;
     /** On save: temporary files are stored, unrecognized existing keys are dropped. */
     dehydrateState(): Promise<unknown>;
+    /** Filament's image editor dialog (Cropper.js), rendered once per field. */
+    private imageEditorHtml;
     toHtml(): Promise<string>;
 }
-export {};