@panneau/fields 5.0.0-alpha.2 → 5.0.0-alpha.4

package/README.md

@@ -4,6 +4,7 @@ Controlled field components for the protocol's built-in field types, built on [`
 
 ```bash
 npm install @panneau/fields@^5.0.0-alpha.0 @panneau/ui@^5.0.0-alpha.0 react-aria-components react-intl
+npm install @uppy/core@^6.3.0 @uppy/aws-s3@^6.3.0   # only for @panneau/fields/uppy
 ```
 
 ```tsx
@@ -37,6 +38,8 @@ Every field takes `value`, `onChange`, `onBlur`, `errors`, `disabled`, `readOnly
 | `@panneau/fields/group`     | `GroupField`                                 | an object                                      |
 | `@panneau/fields/repeater`  | `RepeaterField` (items or typed blocks)      | a list of objects; blocks have a `type`        |
 | `@panneau/fields/relation`  | `RelationField`, `createRelationSource()`    | `{ id, label }`, or a list with `multiple`     |
+| `@panneau/fields/file`      | `FileField`                                  | a file, or a list with `multiple` (below)      |
+| `@panneau/fields/uppy`      | `createUppyUploadSource()`                   | the upload source on Uppy 6 (below)            |
 | `@panneau/fields/locales`   | `en`, `fr`                                   | deprecated: use `@panneau/intl`                |
 
 ## From a definition
@@ -65,7 +68,39 @@ import {
 - **Relations** search a `RelationSource`. `createRelationSource()` makes one from any adapter with a `list()` method, such as the `DataAdapter` of `@panneau/data`. Labels come from the resource's `itemTitle`. Without a source, a relation field shows its references, read-only.
     - **Plain ids.** Values can be ids (`"12"`, `["12", "13"]`), as a product's own API gives them. The field shows their labels once the source's optional `resolve(resource, ids)` gives them (`createRelationSource()` implements it with the adapter's `get()`), and their ids until then. Fields that show the same ids share one request. `useRelationReferences()` does the same for other components.
     - **Creating from the picker.** When the source has `create(resource, text)`, the picker offers "Create “…”" for a text that matches no item, and adds the new item. `createRelationSource(adapter, { create: true })` creates it with the adapter's `create()`, with the text as its `itemTitle` (in every locale when it is localized), on the resources that allow `create`; a function gives other values. A field's `onCreate` prop replaces the source's, and can open a dialog with a full form: it resolves with the new reference, or `null`. `onCreate={null}` turns creating off.
-- **Plugin slot:** a type without an entry, such as `richtext` and `media` until Phase 2, renders a placeholder that names it. A plugin that provides the type replaces it.
+- **Files** upload through the `uploadSource` of the provider (below). Without one, the value holds the files themselves.
+- **Plugin slot:** a type without an entry, such as `richtext` and `media` without their plugins (`@panneau/editor`, `@panneau/media`), renders a placeholder that names it. A plugin that provides the type replaces it.
+
+## Files and uploads
+
+`FileField` (the `file` type) holds files that belong to an item, outside the media library: an attachment, a PDF, a CSV ([decision 0025](../../docs/decisions/0025-presigned-uploads.md)). Its value is a file, or a list of them with `multiple`:
+
+- a **stored file**, `{ name, url, mime, size }`, as items give it: the field shows it with a link;
+- an **uploaded file**, `{ upload, name, mime, size }`, once the browser sent the file to storage: requests send its `upload`;
+- the **`File` itself**, without an upload source: the adapter sends it in `multipart/form-data`.
+
+A new file replaces the file of a single value, and is added to a multiple one. `accept` and `maxSize` (from the field's `accept`, its `accept` rule and its `maxSize` rule) refuse files before they are sent. A read-only field only shows its files.
+
+**Upload sources.** An `UploadSource` makes an uploader for each field, which reports each file's progress and gives its upload once it is done. `createUppyUploadSource()` of `@panneau/fields/uppy` makes one on Uppy 6: files go to S3-compatible storage with URLs that the backend signs, in parts when they are large (they can pause and resume), and each upload is completed with the backend. `@uppy/core` and `@uppy/aws-s3` 6 are optional peer dependencies, only for that entry point: nothing else in the package imports Uppy. Make the source once, and pass it as `uploadSource` to `FieldsProvider`, or to `FormView` of `@panneau/forms`, when the definition announces direct uploads:
+
+```tsx
+import { createUppyUploadSource } from '@panneau/fields/uppy';
+
+const uploadSource =
+    definition.uploads?.mode === 'presigned' && adapter.presignedUploads !== undefined
+        ? createUppyUploadSource(
+              adapter.presignedUploads({ endpoint: definition.uploads.endpoint }),
+          )
+        : null;
+
+<FieldsProvider components={builtInFields} uploadSource={uploadSource}>
+    …
+</FieldsProvider>;
+```
+
+`adapter.presignedUploads()` comes from `@panneau/data`; `createUppyUploadSource()` only needs an object with its `signRequest()` and `complete()` (`PresignedUploadsLike`), so fields don't depend on `@panneau/data`. A field's `uploadSource` prop overrides the provider's, and `null` turns uploads off.
+
+**Building blocks.** `@panneau/fields` also exports what the file field is made of, for other fields that take files (the media field of `@panneau/media`): `useUploads()` (checks files, uploads them through a source, and gives their state), `UploadList` (a progress bar per file, with pause, resume, cancel and retry), `FilePicker` (a button and a drop zone), and `formatSize()`, `matchesMime()`, `getAccept()`, `getMaxSize()`.
 
 ## Messages
 

package/dist/file/FileField.css

@@ -0,0 +1,54 @@
+.panneau-file-field-field {
+    display: grid;
+    gap: var(--panneau-space-2);
+}
+
+.panneau-file-field-files {
+    display: grid;
+    gap: var(--panneau-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.panneau-file-field-file {
+    display: flex;
+    align-items: center;
+    gap: var(--panneau-space-2);
+    min-height: var(--panneau-control-height-sm);
+    padding-inline: var(--panneau-space-2) var(--panneau-space-1);
+    background-color: var(--panneau-color-surface-sunken);
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: var(--panneau-radius-md);
+}
+
+.panneau-file-field-icon {
+    flex: none;
+    width: 1rem;
+    height: 1rem;
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-file-field-name {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    font-size: var(--panneau-font-size-sm);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+a.panneau-file-field-name {
+    color: var(--panneau-color-link);
+}
+
+.panneau-file-field-size {
+    flex: none;
+    font-size: var(--panneau-font-size-sm);
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-file-field-none {
+    font-size: var(--panneau-font-size-md);
+    color: var(--panneau-color-text-muted);
+}

package/dist/file/FileField.d.ts

@@ -0,0 +1,50 @@
+import type { StoredFile } from '@panneau/protocol';
+import type { FieldEntryProps, FieldProps } from '../shared/types';
+import type { UploadSource, UploadedFile } from '../upload/types';
+/**
+ * A file of a `file` value: a stored file, as items give it; an upload, once the browser sent the
+ * file to storage; or the file itself, sent in a multipart request without direct uploads.
+ */
+export type FileValue = StoredFile | UploadedFile | File;
+export interface FileFieldBaseProps extends Omit<FieldProps<never>, 'value' | 'onChange'> {
+    /** Accepted MIME types (`application/pdf`, `image/*`). Others are refused before they are sent. */
+    accept?: readonly string[] | null;
+    /** Largest file, in bytes. Larger ones are refused before they are sent. */
+    maxSize?: number | null;
+    /**
+     * Where files are uploaded directly to storage. Defaults to the one of the fields context.
+     * Without one, the value holds the files themselves, which the adapter sends in
+     * `multipart/form-data`.
+     */
+    uploadSource?: UploadSource | null;
+}
+export interface SingleFileFieldProps extends FileFieldBaseProps {
+    multiple?: false;
+    value?: FileValue | null;
+    onChange?: (value: FileValue | null) => void;
+}
+export interface MultipleFileFieldProps extends FileFieldBaseProps {
+    multiple: true;
+    value?: readonly FileValue[] | null;
+    /** Called with the files. An empty list is `null`. */
+    onChange?: (value: FileValue[] | null) => void;
+}
+export type FileFieldProps = SingleFileFieldProps | MultipleFileFieldProps;
+/** Whether a value is a file of a `file` value. */
+export declare function isFileValue(value: unknown): value is FileValue;
+/** The files of a value, single or multiple. */
+export declare function toFiles(value: unknown): FileValue[];
+/**
+ * Files that belong to an item, outside the media library: an attachment, a PDF, a CSV (the
+ * `file` type). With an upload source, files go directly to storage, and the value references
+ * each upload (`{ upload, name, mime, size }`). Without one, the value is the file itself. Items
+ * give stored files, which the field shows with a link. A new file replaces the file of a single
+ * value, and is added to a multiple one.
+ */
+export declare function FileField(props: FileFieldProps): import("react").JSX.Element;
+/**
+ * The registry entry of the `file` type: the field's `multiple`, `accept` (or its `accept` rule)
+ * and `maxSize` rule, with the upload source of the fields context.
+ */
+export declare function FileFieldEntry(props: FieldEntryProps): import("react").JSX.Element;
+//# sourceMappingURL=FileField.d.ts.map

package/dist/file/FileField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileField.d.ts","sourceRoot":"","sources":["../../src/file/FileField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAMpD,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAInE,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAKlE;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,IAAI,CAAC;AAEzD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACrF,mGAAmG;IACnG,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;IAClC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,WAAW,sBAAuB,SAAQ,kBAAkB;IAC9D,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,SAAS,EAAE,GAAG,IAAI,CAAC;IACpC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,MAAM,cAAc,GAAG,oBAAoB,GAAG,sBAAsB,CAAC;AAY3E,mDAAmD;AACnD,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,SAAS,CAS9D;AAED,gDAAgD;AAChD,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,EAAE,CAKnD;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BAgI9C;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,+BAYpD"}

package/dist/file/FileField.js

@@ -0,0 +1,198 @@
+import { useFieldsContext } from "../shared/context.js";
+import { getAccept, getFieldProps, getMaxSize } from "../shared/entry.js";
+import { messages } from "../shared/messages.js";
+import { FilePicker } from "../upload/FilePicker.js";
+import { formatSize } from "../upload/files.js";
+import { UploadList } from "../upload/UploadList.js";
+import { useRejectionMessage } from "../upload/useRejectionMessage.js";
+import { useUploads } from "../upload/useUploads.js";
+import FileField_module_default from "./FileField.module.js";
+import { c } from "react/compiler-runtime";
+import { Fieldset, IconButton, usePanneauIntl } from "@panneau/ui";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FileText, X } from "lucide-react";
+//#region src/file/FileField.tsx
+function fileSize(file) {
+	return typeof file.size === "number" ? file.size : null;
+}
+function fileUrl(file) {
+	return !(file instanceof Blob) && "url" in file && typeof file.url === "string" ? file.url : null;
+}
+/** Whether a value is a file of a `file` value. */
+function isFileValue(value) {
+	if (typeof File !== "undefined" && value instanceof File) return true;
+	return typeof value === "object" && value !== null && typeof value.name === "string";
+}
+/** The files of a value, single or multiple. */
+function toFiles(value) {
+	if (Array.isArray(value)) return value.filter(isFileValue);
+	return isFileValue(value) ? [value] : [];
+}
+/**
+* Files that belong to an item, outside the media library: an attachment, a PDF, a CSV (the
+* `file` type). With an upload source, files go directly to storage, and the value references
+* each upload (`{ upload, name, mime, size }`). Without one, the value is the file itself. Items
+* give stored files, which the field shows with a link. A new file replaces the file of a single
+* value, and is added to a multiple one.
+*/
+function FileField(props) {
+	const intl = usePanneauIntl();
+	const context = useFieldsContext();
+	const { accept = null, maxSize = null, uploadSource = context.uploadSource, label, description, errors = [], disabled, readOnly, required, className, labelClassName, descriptionClassName, errorsClassName } = props;
+	const multiple = props.multiple === true;
+	const files = toFiles(props.value);
+	const editable = disabled !== true && readOnly !== true;
+	const [rejections, setRejections] = useState([]);
+	const rejectionMessage = useRejectionMessage(maxSize);
+	const latest = useRef(files);
+	useEffect(() => {
+		latest.current = files;
+	});
+	const set = (next) => {
+		latest.current = next;
+		if (props.multiple === true) props.onChange?.(next.length > 0 ? next : null);
+		else props.onChange?.(next[0] ?? null);
+	};
+	const upload = useUploads({
+		source: uploadSource,
+		accept,
+		maxSize,
+		onUploaded: (file) => set(multiple ? [...latest.current, file] : [file]),
+		onRejected: (file_0, reason) => setRejections((current) => [...current, rejectionMessage(file_0, reason)])
+	});
+	return /* @__PURE__ */ jsx(Fieldset, {
+		legend: label,
+		description,
+		errors: [...errors, ...rejections],
+		isRequired: required,
+		isDisabled: disabled,
+		className,
+		legendClassName: labelClassName,
+		descriptionClassName,
+		errorsClassName,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: FileField_module_default.field,
+			children: [
+				files.length > 0 ? /* @__PURE__ */ jsx("ul", {
+					className: FileField_module_default.files,
+					children: files.map((file_1, index) => {
+						const { name } = file_1;
+						const url = fileUrl(file_1);
+						const size = fileSize(file_1);
+						return /* @__PURE__ */ jsxs("li", {
+							className: FileField_module_default.file,
+							children: [
+								/* @__PURE__ */ jsx(FileText, {
+									"aria-hidden": true,
+									className: FileField_module_default.icon
+								}),
+								url !== null ? /* @__PURE__ */ jsx("a", {
+									href: url,
+									className: FileField_module_default.name,
+									target: "_blank",
+									rel: "noreferrer",
+									children: name
+								}) : /* @__PURE__ */ jsx("span", {
+									className: FileField_module_default.name,
+									children: name
+								}),
+								size !== null ? /* @__PURE__ */ jsx("span", {
+									className: FileField_module_default.size,
+									children: formatSize(size, intl.locale)
+								}) : null,
+								editable ? /* @__PURE__ */ jsx(IconButton, {
+									icon: X,
+									size: "sm",
+									label: intl.formatMessage(messages.removeFile, { name }),
+									onPress: () => set(latest.current.filter((_, at) => at !== index))
+								}) : null
+							]
+						}, `${String(index)}-${name}`);
+					})
+				}) : upload.items.length === 0 ? /* @__PURE__ */ jsx("span", {
+					className: FileField_module_default.none,
+					children: intl.formatMessage(messages.noFile)
+				}) : null,
+				/* @__PURE__ */ jsx(UploadList, {
+					items: upload.items,
+					onPause: upload.pause,
+					onResume: upload.resume,
+					onCancel: upload.cancel,
+					onRetry: upload.retry
+				}),
+				editable ? /* @__PURE__ */ jsx(FilePicker, {
+					accept,
+					multiple,
+					...!multiple && files.length > 0 ? { label: intl.formatMessage(messages.replaceFile) } : {},
+					onSelect: (selected) => {
+						setRejections([]);
+						upload.add(selected);
+					}
+				}) : null
+			]
+		})
+	});
+}
+/**
+* The registry entry of the `file` type: the field's `multiple`, `accept` (or its `accept` rule)
+* and `maxSize` rule, with the upload source of the fields context.
+*/
+function FileFieldEntry(props) {
+	const $ = c(15);
+	const { field, value, onChange } = props;
+	let t0;
+	if ($[0] !== props) {
+		t0 = getFieldProps(props);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== field) {
+		t1 = getAccept(field);
+		$[2] = field;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== field) {
+		t2 = getMaxSize(field);
+		$[4] = field;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t0 || $[7] !== t1 || $[8] !== t2) {
+		t3 = {
+			...t0,
+			accept: t1,
+			maxSize: t2
+		};
+		$[6] = t0;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	const common = t3;
+	let t4;
+	if ($[10] !== common || $[11] !== field.multiple || $[12] !== onChange || $[13] !== value) {
+		t4 = field.multiple === true ? /* @__PURE__ */ jsx(FileField, {
+			...common,
+			multiple: true,
+			value: toFiles(value),
+			onChange
+		}) : /* @__PURE__ */ jsx(FileField, {
+			...common,
+			value: toFiles(value)[0] ?? null,
+			onChange
+		});
+		$[10] = common;
+		$[11] = field.multiple;
+		$[12] = onChange;
+		$[13] = value;
+		$[14] = t4;
+	} else t4 = $[14];
+	return t4;
+}
+//#endregion
+export { FileField, FileFieldEntry, isFileValue, toFiles };
+
+//# sourceMappingURL=FileField.js.map

package/dist/file/FileField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileField.js","names":["file","onChange","styles","_c"],"sources":["../../src/file/FileField.tsx"],"sourcesContent":["import { FileText, X } from 'lucide-react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { StoredFile } from '@panneau/protocol';\nimport { Fieldset, IconButton, usePanneauIntl } from '@panneau/ui';\n\nimport { useFieldsContext } from '../shared/context';\nimport { getAccept, getFieldProps, getMaxSize } from '../shared/entry';\nimport { messages } from '../shared/messages';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\nimport { FilePicker } from '../upload/FilePicker';\nimport { UploadList } from '../upload/UploadList';\nimport { formatSize } from '../upload/files';\nimport type { UploadSource, UploadedFile } from '../upload/types';\nimport { useRejectionMessage } from '../upload/useRejectionMessage';\nimport { useUploads } from '../upload/useUploads';\nimport styles from './FileField.module.css';\n\n/**\n * A file of a `file` value: a stored file, as items give it; an upload, once the browser sent the\n * file to storage; or the file itself, sent in a multipart request without direct uploads.\n */\nexport type FileValue = StoredFile | UploadedFile | File;\n\nexport interface FileFieldBaseProps extends Omit<FieldProps<never>, 'value' | 'onChange'> {\n    /** Accepted MIME types (`application/pdf`, `image/*`). Others are refused before they are sent. */\n    accept?: readonly string[] | null;\n    /** Largest file, in bytes. Larger ones are refused before they are sent. */\n    maxSize?: number | null;\n    /**\n     * Where files are uploaded directly to storage. Defaults to the one of the fields context.\n     * Without one, the value holds the files themselves, which the adapter sends in\n     * `multipart/form-data`.\n     */\n    uploadSource?: UploadSource | null;\n}\n\nexport interface SingleFileFieldProps extends FileFieldBaseProps {\n    multiple?: false;\n    value?: FileValue | null;\n    onChange?: (value: FileValue | null) => void;\n}\n\nexport interface MultipleFileFieldProps extends FileFieldBaseProps {\n    multiple: true;\n    value?: readonly FileValue[] | null;\n    /** Called with the files. An empty list is `null`. */\n    onChange?: (value: FileValue[] | null) => void;\n}\n\nexport type FileFieldProps = SingleFileFieldProps | MultipleFileFieldProps;\n\nfunction fileSize(file: FileValue): number | null {\n    return typeof file.size === 'number' ? file.size : null;\n}\n\nfunction fileUrl(file: FileValue): string | null {\n    return !(file instanceof Blob) && 'url' in file && typeof file.url === 'string'\n        ? file.url\n        : null;\n}\n\n/** Whether a value is a file of a `file` value. */\nexport function isFileValue(value: unknown): value is FileValue {\n    if (typeof File !== 'undefined' && value instanceof File) {\n        return true;\n    }\n    return (\n        typeof value === 'object' &&\n        value !== null &&\n        typeof (value as { name?: unknown }).name === 'string'\n    );\n}\n\n/** The files of a value, single or multiple. */\nexport function toFiles(value: unknown): FileValue[] {\n    if (Array.isArray(value)) {\n        return value.filter(isFileValue);\n    }\n    return isFileValue(value) ? [value] : [];\n}\n\n/**\n * Files that belong to an item, outside the media library: an attachment, a PDF, a CSV (the\n * `file` type). With an upload source, files go directly to storage, and the value references\n * each upload (`{ upload, name, mime, size }`). Without one, the value is the file itself. Items\n * give stored files, which the field shows with a link. A new file replaces the file of a single\n * value, and is added to a multiple one.\n */\nexport function FileField(props: FileFieldProps) {\n    const intl = usePanneauIntl();\n    const context = useFieldsContext();\n    const {\n        accept = null,\n        maxSize = null,\n        uploadSource = context.uploadSource,\n        label,\n        description,\n        errors = [],\n        disabled,\n        readOnly,\n        required,\n        className,\n        labelClassName,\n        descriptionClassName,\n        errorsClassName,\n    } = props;\n    const multiple = props.multiple === true;\n    const files = toFiles(props.value);\n    const editable = disabled !== true && readOnly !== true;\n    const [rejections, setRejections] = useState<string[]>([]);\n    const rejectionMessage = useRejectionMessage(maxSize);\n\n    // The files as last set, so that uploads that end together all add theirs.\n    const latest = useRef(files);\n    useEffect(() => {\n        latest.current = files;\n    });\n    const set = (next: FileValue[]) => {\n        latest.current = next;\n        if (props.multiple === true) {\n            props.onChange?.(next.length > 0 ? next : null);\n        } else {\n            props.onChange?.(next[0] ?? null);\n        }\n    };\n\n    const upload = useUploads({\n        source: uploadSource,\n        accept,\n        maxSize,\n        onUploaded: (file) => set(multiple ? [...latest.current, file] : [file]),\n        onRejected: (file, reason) =>\n            setRejections((current) => [...current, rejectionMessage(file, reason)]),\n    });\n\n    return (\n        <Fieldset\n            legend={label}\n            description={description}\n            errors={[...errors, ...rejections]}\n            isRequired={required}\n            isDisabled={disabled}\n            className={className}\n            legendClassName={labelClassName}\n            descriptionClassName={descriptionClassName}\n            errorsClassName={errorsClassName}\n        >\n            <div className={styles.field}>\n                {files.length > 0 ? (\n                    <ul className={styles.files}>\n                        {files.map((file, index) => {\n                            const { name } = file;\n                            const url = fileUrl(file);\n                            const size = fileSize(file);\n                            return (\n                                <li key={`${String(index)}-${name}`} className={styles.file}>\n                                    <FileText aria-hidden className={styles.icon} />\n                                    {url !== null ? (\n                                        <a\n                                            href={url}\n                                            className={styles.name}\n                                            target=\"_blank\"\n                                            rel=\"noreferrer\"\n                                        >\n                                            {name}\n                                        </a>\n                                    ) : (\n                                        <span className={styles.name}>{name}</span>\n                                    )}\n                                    {size !== null ? (\n                                        <span className={styles.size}>\n                                            {formatSize(size, intl.locale)}\n                                        </span>\n                                    ) : null}\n                                    {editable ? (\n                                        <IconButton\n                                            icon={X}\n                                            size=\"sm\"\n                                            label={intl.formatMessage(messages.removeFile, {\n                                                name,\n                                            })}\n                                            onPress={() =>\n                                                set(latest.current.filter((_, at) => at !== index))\n                                            }\n                                        />\n                                    ) : null}\n                                </li>\n                            );\n                        })}\n                    </ul>\n                ) : upload.items.length === 0 ? (\n                    <span className={styles.none}>{intl.formatMessage(messages.noFile)}</span>\n                ) : null}\n                <UploadList\n                    items={upload.items}\n                    onPause={upload.pause}\n                    onResume={upload.resume}\n                    onCancel={upload.cancel}\n                    onRetry={upload.retry}\n                />\n                {editable ? (\n                    <FilePicker\n                        accept={accept}\n                        multiple={multiple}\n                        {...(!multiple && files.length > 0\n                            ? { label: intl.formatMessage(messages.replaceFile) }\n                            : {})}\n                        onSelect={(selected) => {\n                            setRejections([]);\n                            upload.add(selected);\n                        }}\n                    />\n                ) : null}\n            </div>\n        </Fieldset>\n    );\n}\n\n/**\n * The registry entry of the `file` type: the field's `multiple`, `accept` (or its `accept` rule)\n * and `maxSize` rule, with the upload source of the fields context.\n */\nexport function FileFieldEntry(props: FieldEntryProps) {\n    const { field, value, onChange } = props;\n    const common = {\n        ...getFieldProps(props),\n        accept: getAccept(field),\n        maxSize: getMaxSize(field),\n    };\n    return field.multiple === true ? (\n        <FileField {...common} multiple value={toFiles(value)} onChange={onChange} />\n    ) : (\n        <FileField {...common} value={toFiles(value)[0] ?? null} onChange={onChange} />\n    );\n}\n"],"mappings":"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"}

package/dist/file/FileField.module.js

@@ -0,0 +1,22 @@
+import "./FileField.css";
+//#region src/file/FileField.module.css
+var field = "panneau-file-field-field";
+var files = "panneau-file-field-files";
+var file = "panneau-file-field-file";
+var icon = "panneau-file-field-icon";
+var name = "panneau-file-field-name";
+var size = "panneau-file-field-size";
+var none = "panneau-file-field-none";
+var FileField_module_default = {
+	field,
+	files,
+	file,
+	icon,
+	name,
+	size,
+	none
+};
+//#endregion
+export { FileField_module_default as default, field, file, files, icon, name, none, size };
+
+//# sourceMappingURL=FileField.module.js.map

package/dist/file/FileField.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileField.module.js","names":[],"sources":["../../src/file/FileField.module.css"],"sourcesContent":[".field {\n    display: grid;\n    gap: var(--panneau-space-2);\n}\n\n.files {\n    display: grid;\n    gap: var(--panneau-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.file {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height-sm);\n    padding-inline: var(--panneau-space-2) var(--panneau-space-1);\n    background-color: var(--panneau-color-surface-sunken);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-md);\n}\n\n.icon {\n    flex: none;\n    width: 1rem;\n    height: 1rem;\n    color: var(--panneau-color-text-muted);\n}\n\n.name {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    font-size: var(--panneau-font-size-sm);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\na.name {\n    color: var(--panneau-color-link);\n}\n\n.size {\n    flex: none;\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.none {\n    font-size: var(--panneau-font-size-md);\n    color: var(--panneau-color-text-muted);\n}\n"],"mappings":""}

package/dist/file/index.d.ts

@@ -0,0 +1,3 @@
+export { type FileFieldBaseProps, FileField, FileFieldEntry, type FileFieldProps, type FileValue, type MultipleFileFieldProps, type SingleFileFieldProps, isFileValue, toFiles, } from './FileField';
+export type { UploadItem, UploadItemStatus, UploadSource, UploadedFile, Uploader, } from '../upload/types';
+//# sourceMappingURL=index.d.ts.map

package/dist/file/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/file/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,kBAAkB,EACvB,SAAS,EACT,cAAc,EACd,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,sBAAsB,EAC3B,KAAK,oBAAoB,EACzB,WAAW,EACX,OAAO,GACV,MAAM,aAAa,CAAC;AACrB,YAAY,EACR,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,QAAQ,GACX,MAAM,iBAAiB,CAAC"}

package/dist/file/index.js

@@ -0,0 +1 @@
+export { FileField, FileFieldEntry, isFileValue, toFiles } from "./FileField.js";

package/dist/index.d.ts

@@ -1,8 +1,15 @@
 export { DefinitionField, NestedField, type NestedFieldProps } from './shared/DefinitionField';
 export { builtInFields, fieldsPlugin } from './shared/builtIn';
 export { type BoundFieldProps, type FieldBinding, type FieldBindingProps, FieldsProvider, type FieldsContextValue, type FieldsProviderProps, getParentPath, useFieldsContext, } from './shared/context';
-export { findRule, getFieldProps, getRuleNumber, isRequired } from './shared/entry';
+export { findRule, getAccept, getFieldProps, getMaxSize, getRuleNumber, isRequired, } from './shared/entry';
 export { type RelationListAdapter, type RelationReference, type RelationSource, type RelationSourceOptions, createRelationSource, toReferences, useRelationReferences, } from './shared/relation';
 export type { FieldEntry, FieldEntryProps, FieldProps } from './shared/types';
 export { MissingFieldEntry } from './missing/MissingField';
+export { type FileFieldBaseProps, FileField, FileFieldEntry, type FileFieldProps, type FileValue, type MultipleFileFieldProps, type SingleFileFieldProps, isFileValue, toFiles, } from './file/FileField';
+export { FilePicker, type FilePickerProps } from './upload/FilePicker';
+export { UploadList, type UploadListProps } from './upload/UploadList';
+export { formatSize, matchesMime } from './upload/files';
+export { type UploadItem, type UploadItemStatus, type UploadRejection, type UploadSource, type UploadedFile, type Uploader, } from './upload/types';
+export { useRejectionMessage } from './upload/useRejectionMessage';
+export { type UseUploadsOptions, type UseUploadsResult, useUploads } from './upload/useUploads';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC/F,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EACH,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACtB,cAAc,EACd,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,aAAa,EACb,gBAAgB,GACnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACpF,OAAO,EACH,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC1B,oBAAoB,EACpB,YAAY,EACZ,qBAAqB,GACxB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC/F,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EACH,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACtB,cAAc,EACd,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,aAAa,EACb,gBAAgB,GACnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACH,QAAQ,EACR,SAAS,EACT,aAAa,EACb,UAAU,EACV,aAAa,EACb,UAAU,GACb,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACH,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC1B,oBAAoB,EACpB,YAAY,EACZ,qBAAqB,GACxB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EACH,KAAK,kBAAkB,EACvB,SAAS,EACT,cAAc,EACd,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,sBAAsB,EAC3B,KAAK,oBAAoB,EACzB,WAAW,EACX,OAAO,GACV,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EACH,KAAK,UAAU,EACf,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,QAAQ,GAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.js

@@ -1,7 +1,13 @@
 import { FieldsProvider, getParentPath, useFieldsContext } from "./shared/context.js";
-import { findRule, getFieldProps, getRuleNumber, isRequired } from "./shared/entry.js";
+import { findRule, getAccept, getFieldProps, getMaxSize, getRuleNumber, isRequired } from "./shared/entry.js";
 import { MissingFieldEntry } from "./missing/MissingField.js";
+import { FilePicker } from "./upload/FilePicker.js";
+import { formatSize, matchesMime } from "./upload/files.js";
+import { UploadList } from "./upload/UploadList.js";
+import { useRejectionMessage } from "./upload/useRejectionMessage.js";
+import { useUploads } from "./upload/useUploads.js";
+import { FileField, FileFieldEntry, isFileValue, toFiles } from "./file/FileField.js";
 import { createRelationSource, toReferences, useRelationReferences } from "./shared/relation.js";
 import { builtInFields, fieldsPlugin } from "./shared/builtIn.js";
 import { DefinitionField, NestedField } from "./shared/DefinitionField.js";
-export { DefinitionField, FieldsProvider, MissingFieldEntry, NestedField, builtInFields, createRelationSource, fieldsPlugin, findRule, getFieldProps, getParentPath, getRuleNumber, isRequired, toReferences, useFieldsContext, useRelationReferences };
+export { DefinitionField, FieldsProvider, FileField, FileFieldEntry, FilePicker, MissingFieldEntry, NestedField, UploadList, builtInFields, createRelationSource, fieldsPlugin, findRule, formatSize, getAccept, getFieldProps, getMaxSize, getParentPath, getRuleNumber, isFileValue, isRequired, matchesMime, toFiles, toReferences, useFieldsContext, useRejectionMessage, useRelationReferences, useUploads };

package/dist/shared/builtIn.d.ts

@@ -1,7 +1,8 @@
 import type { FieldEntry } from './types';
 /**
- * The entries of the built-in field types. `richtext` and `media` come with their plugins (Phase
- * 2): until then, `DefinitionField` renders a placeholder for them.
+ * The entries of the built-in field types. `richtext` and `media` come with their plugins
+ * (`@panneau/editor` and `@panneau/media`): without them, `DefinitionField` renders a placeholder.
+ * `file` uploads through the upload source of the fields context, or gives the files themselves.
  */
 export declare const builtInFields: Readonly<Record<string, FieldEntry>>;
 /**

package/dist/shared/builtIn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"builtIn.d.ts","sourceRoot":"","sources":["../../src/shared/builtIn.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAgB9D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAC7C,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;CAK7D,CAAC"}
+{"version":3,"file":"builtIn.d.ts","sourceRoot":"","sources":["../../src/shared/builtIn.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAiB9D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAC7C,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;CAK7D,CAAC"}

package/dist/shared/builtIn.js

@@ -4,6 +4,7 @@ import { ColorFieldEntry } from "../color/ColorField.js";
 import { DateFieldEntry } from "../date/DateField.js";
 import { DateTimeFieldEntry } from "../datetime/DateTimeField.js";
 import { EmailFieldEntry } from "../email/EmailField.js";
+import { FileFieldEntry } from "../file/FileField.js";
 import { GroupFieldEntry } from "../group/GroupField.js";
 import { NumberFieldEntry } from "../number/NumberField.js";
 import { RelationFieldEntry } from "../relation/RelationField.js";
@@ -16,8 +17,9 @@ import { UrlFieldEntry } from "../url/UrlField.js";
 import { fr } from "@panneau/intl";
 //#region src/shared/builtIn.ts
 /**
-* The entries of the built-in field types. `richtext` and `media` come with their plugins (Phase
-* 2): until then, `DefinitionField` renders a placeholder for them.
+* The entries of the built-in field types. `richtext` and `media` come with their plugins
+* (`@panneau/editor` and `@panneau/media`): without them, `DefinitionField` renders a placeholder.
+* `file` uploads through the upload source of the fields context, or gives the files themselves.
 */
 var builtInFields = {
 	text: TextFieldEntry,
@@ -32,6 +34,7 @@ var builtInFields = {
 	url: UrlFieldEntry,
 	color: ColorFieldEntry,
 	slug: SlugFieldEntry,
+	file: FileFieldEntry,
 	relation: RelationFieldEntry,
 	group: GroupFieldEntry,
 	repeater: RepeaterFieldEntry

package/dist/shared/builtIn.js.map

@@ -1 +1 @@
-{"version":3,"file":"builtIn.js","names":[],"sources":["../../src/shared/builtIn.ts"],"sourcesContent":["import { fr } from '@panneau/intl';\n\nimport { BooleanFieldEntry } from '../boolean/BooleanField';\nimport { ColorFieldEntry } from '../color/ColorField';\nimport { DateFieldEntry } from '../date/DateField';\nimport { DateTimeFieldEntry } from '../datetime/DateTimeField';\nimport { EmailFieldEntry } from '../email/EmailField';\nimport { GroupFieldEntry } from '../group/GroupField';\nimport { NumberFieldEntry } from '../number/NumberField';\nimport { RelationFieldEntry } from '../relation/RelationField';\nimport { RepeaterFieldEntry } from '../repeater/RepeaterField';\nimport { SelectFieldEntry } from '../select/SelectField';\nimport { SlugFieldEntry } from '../slug/SlugField';\nimport { TextFieldEntry } from '../text/TextField';\nimport { TextAreaFieldEntry } from '../textarea/TextAreaField';\nimport { TimeFieldEntry } from '../time/TimeField';\nimport { UrlFieldEntry } from '../url/UrlField';\nimport type { FieldEntry } from './types';\n\n/**\n * The entries of the built-in field types. `richtext` and `media` come with their plugins (Phase\n * 2): until then, `DefinitionField` renders a placeholder for them.\n */\nexport const builtInFields: Readonly<Record<string, FieldEntry>> = {\n    text: TextFieldEntry,\n    textarea: TextAreaFieldEntry,\n    number: NumberFieldEntry,\n    boolean: BooleanFieldEntry,\n    date: DateFieldEntry,\n    datetime: DateTimeFieldEntry,\n    time: TimeFieldEntry,\n    select: SelectFieldEntry,\n    email: EmailFieldEntry,\n    url: UrlFieldEntry,\n    color: ColorFieldEntry,\n    slug: SlugFieldEntry,\n    relation: RelationFieldEntry,\n    group: GroupFieldEntry,\n    repeater: RepeaterFieldEntry,\n};\n\n/**\n * The built-in fields as a `@panneau/core` plugin: their entries, and the French messages of\n * every Panneau package (`@panneau/ui`, `@panneau/fields`, `@panneau/forms`…, from\n * `@panneau/intl`). Pass it before the plugins that override a type.\n */\nexport const fieldsPlugin: {\n    id: string;\n    fields: Readonly<Record<string, FieldEntry>>;\n    locales: Readonly<Record<string, Record<string, string>>>;\n} = {\n    id: 'panneau-fields',\n    fields: builtInFields,\n    locales: { fr },\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBA,IAAa,gBAAsD;CAC/D,MAAM;CACN,UAAU;CACV,QAAQ;CACR,SAAS;CACT,MAAM;CACN,UAAU;CACV,MAAM;CACN,QAAQ;CACR,OAAO;CACP,KAAK;CACL,OAAO;CACP,MAAM;CACN,UAAU;CACV,OAAO;CACP,UAAU;AACd;;;;;;AAOA,IAAa,eAIT;CACA,IAAI;CACJ,QAAQ;CACR,SAAS,EAAE,GAAG;AAClB"}
+{"version":3,"file":"builtIn.js","names":[],"sources":["../../src/shared/builtIn.ts"],"sourcesContent":["import { fr } from '@panneau/intl';\n\nimport { BooleanFieldEntry } from '../boolean/BooleanField';\nimport { ColorFieldEntry } from '../color/ColorField';\nimport { DateFieldEntry } from '../date/DateField';\nimport { DateTimeFieldEntry } from '../datetime/DateTimeField';\nimport { EmailFieldEntry } from '../email/EmailField';\nimport { FileFieldEntry } from '../file/FileField';\nimport { GroupFieldEntry } from '../group/GroupField';\nimport { NumberFieldEntry } from '../number/NumberField';\nimport { RelationFieldEntry } from '../relation/RelationField';\nimport { RepeaterFieldEntry } from '../repeater/RepeaterField';\nimport { SelectFieldEntry } from '../select/SelectField';\nimport { SlugFieldEntry } from '../slug/SlugField';\nimport { TextFieldEntry } from '../text/TextField';\nimport { TextAreaFieldEntry } from '../textarea/TextAreaField';\nimport { TimeFieldEntry } from '../time/TimeField';\nimport { UrlFieldEntry } from '../url/UrlField';\nimport type { FieldEntry } from './types';\n\n/**\n * The entries of the built-in field types. `richtext` and `media` come with their plugins\n * (`@panneau/editor` and `@panneau/media`): without them, `DefinitionField` renders a placeholder.\n * `file` uploads through the upload source of the fields context, or gives the files themselves.\n */\nexport const builtInFields: Readonly<Record<string, FieldEntry>> = {\n    text: TextFieldEntry,\n    textarea: TextAreaFieldEntry,\n    number: NumberFieldEntry,\n    boolean: BooleanFieldEntry,\n    date: DateFieldEntry,\n    datetime: DateTimeFieldEntry,\n    time: TimeFieldEntry,\n    select: SelectFieldEntry,\n    email: EmailFieldEntry,\n    url: UrlFieldEntry,\n    color: ColorFieldEntry,\n    slug: SlugFieldEntry,\n    file: FileFieldEntry,\n    relation: RelationFieldEntry,\n    group: GroupFieldEntry,\n    repeater: RepeaterFieldEntry,\n};\n\n/**\n * The built-in fields as a `@panneau/core` plugin: their entries, and the French messages of\n * every Panneau package (`@panneau/ui`, `@panneau/fields`, `@panneau/forms`…, from\n * `@panneau/intl`). Pass it before the plugins that override a type.\n */\nexport const fieldsPlugin: {\n    id: string;\n    fields: Readonly<Record<string, FieldEntry>>;\n    locales: Readonly<Record<string, Record<string, string>>>;\n} = {\n    id: 'panneau-fields',\n    fields: builtInFields,\n    locales: { fr },\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAyBA,IAAa,gBAAsD;CAC/D,MAAM;CACN,UAAU;CACV,QAAQ;CACR,SAAS;CACT,MAAM;CACN,UAAU;CACV,MAAM;CACN,QAAQ;CACR,OAAO;CACP,KAAK;CACL,OAAO;CACP,MAAM;CACN,MAAM;CACN,UAAU;CACV,OAAO;CACP,UAAU;AACd;;;;;;AAOA,IAAa,eAIT;CACA,IAAI;CACJ,QAAQ;CACR,SAAS,EAAE,GAAG;AAClB"}

package/dist/shared/context.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentType, type ReactNode } from 'react';
 import type { Field } from '@panneau/protocol';
+import type { UploadSource } from '../upload/types';
 import type { RelationSource } from './relation';
 import type { FieldEntry } from './types';
 /** What a binding gives a field: its value, handlers and errors at a path. */
@@ -32,6 +33,11 @@ export interface FieldsContextValue {
     locales: readonly string[];
     /** Where relation fields search for items. */
     relationSource: RelationSource | null;
+    /**
+     * Where fields that take files upload them directly to storage. Without one, they give the
+     * files themselves.
+     */
+    uploadSource: UploadSource | null;
     binding: FieldBinding | null;
 }
 /** The fields context of the closest `FieldsProvider`. */
@@ -41,15 +47,17 @@ export interface FieldsProviderProps {
     components?: Readonly<Record<string, FieldEntry>>;
     locales?: readonly string[];
     relationSource?: RelationSource | null;
+    /** Make it once, outside of render: fields make an uploader for each source they get. */
+    uploadSource?: UploadSource | null;
     binding?: FieldBinding | null;
     children?: ReactNode;
 }
 /**
  * Provides what fields rendered from a definition need: the components of each type, the locales
- * of localized values, a relation source and a binding. Values not given come from the parent
+ * of localized values, a relation source, an upload source and a binding. Values not given come from the parent
  * provider.
  */
-export declare function FieldsProvider({ components, locales, relationSource, binding, children, }: FieldsProviderProps): import("react").JSX.Element;
+export declare function FieldsProvider({ components, locales, relationSource, uploadSource, binding, children, }: FieldsProviderProps): import("react").JSX.Element;
 /** The parent path of a path: `blocks.2` for `blocks.2.title`, `''` for `title`. */
 export declare function getParentPath(path: string): string;
 //# sourceMappingURL=context.d.ts.map

package/dist/shared/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/shared/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAC;AAE/E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,8EAA8E;AAC9E,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC9B;AAED,4FAA4F;AAC5F,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,KAAK,CAAC;IACb,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,2FAA2F;IAC3F,UAAU,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,MAAM,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;CACjD;AAED;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC;AAE5D,MAAM,WAAW,kBAAkB;IAC/B,+DAA+D;IAC/D,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IACjD,6CAA6C;IAC7C,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,8CAA8C;IAC9C,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,OAAO,EAAE,YAAY,GAAG,IAAI,CAAC;CAChC;AASD,0DAA0D;AAC1D,wBAAgB,gBAAgB,IAAI,kBAAkB,CAErD;AAED,MAAM,WAAW,mBAAmB;IAChC,uEAAuE;IACvE,UAAU,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAClD,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5B,cAAc,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC3B,UAAU,EACV,OAAO,EACP,cAAc,EACd,OAAO,EACP,QAAQ,GACX,EAAE,mBAAmB,+BAUrB;AAED,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAGlD"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/shared/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAC;AAE/E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,8EAA8E;AAC9E,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC9B;AAED,4FAA4F;AAC5F,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,KAAK,CAAC;IACb,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,2FAA2F;IAC3F,UAAU,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,MAAM,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;CACjD;AAED;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC;AAE5D,MAAM,WAAW,kBAAkB;IAC/B,+DAA+D;IAC/D,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IACjD,6CAA6C;IAC7C,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,8CAA8C;IAC9C,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC;;;OAGG;IACH,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,OAAO,EAAE,YAAY,GAAG,IAAI,CAAC;CAChC;AAUD,0DAA0D;AAC1D,wBAAgB,gBAAgB,IAAI,kBAAkB,CAErD;AAED,MAAM,WAAW,mBAAmB;IAChC,uEAAuE;IACvE,UAAU,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAClD,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5B,cAAc,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACvC,yFAAyF;IACzF,YAAY,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC3B,UAAU,EACV,OAAO,EACP,cAAc,EACd,YAAY,EACZ,OAAO,EACP,QAAQ,GACX,EAAE,mBAAmB,+BAWrB;AAED,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAGlD"}