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

package/README.md

@@ -63,6 +63,8 @@ import {
 - **Localized fields** (`localized: true`) render the field of their type for each locale of the provider, at `title.fr`, `title.en`.
 - **Groups and repeaters** render their nested fields with `NestedField`, at paths like `blocks.2.body`. A `binding` in `FieldsProvider` can bind every nested field to a store by path: `@panneau/forms` binds them to its form state. Without one, the group or repeater sets its whole value.
 - **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.
 
 ## Messages

package/dist/color/ColorField.css

@@ -1,4 +1,4 @@
-.panneau-swatch-J24Ak3 {
+.panneau-color-field-swatch {
     position: relative;
     display: inline-flex;
     width: 1.5rem;
@@ -8,12 +8,12 @@
     border-radius: var(--panneau-radius-sm);
 }
 
-.panneau-swatch-J24Ak3:focus-within {
+.panneau-color-field-swatch:focus-within {
     outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
     outline-offset: 2px;
 }
 
-.panneau-picker-b7gdnM {
+.panneau-color-field-picker {
     position: absolute;
     inset: -0.5rem;
     width: calc(100% + 1rem);
@@ -24,10 +24,10 @@
     border: 0;
 }
 
-.panneau-picker-b7gdnM:disabled {
+.panneau-color-field-picker:disabled {
     cursor: not-allowed;
 }
 
-.panneau-input-1t8LLx {
+.panneau-color-field-input {
     font-family: var(--panneau-font-family-mono);
 }

package/dist/color/ColorField.module.js

@@ -1,8 +1,8 @@
 import "./ColorField.css";
 //#region src/color/ColorField.module.css
-var swatch = "panneau-swatch-J24Ak3";
-var picker = "panneau-picker-b7gdnM";
-var input = "panneau-input-1t8LLx";
+var swatch = "panneau-color-field-swatch";
+var picker = "panneau-color-field-picker";
+var input = "panneau-color-field-input";
 var ColorField_module_default = {
 	swatch,
 	picker,

package/dist/group/GroupField.css

@@ -1,4 +1,4 @@
-.panneau-fields-YVfYCM {
+.panneau-group-field-fields {
     display: flex;
     flex-direction: column;
     gap: var(--panneau-space-4);
@@ -8,7 +8,7 @@
 }
 
 @media (max-width: 30rem) {
-    .panneau-fields-YVfYCM {
+    .panneau-group-field-fields {
         padding: var(--panneau-space-3);
     }
 }

package/dist/group/GroupField.module.js

@@ -1,6 +1,6 @@
 import "./GroupField.css";
 //#region src/group/GroupField.module.css
-var fields = "panneau-fields-YVfYCM";
+var fields = "panneau-group-field-fields";
 var GroupField_module_default = { fields };
 //#endregion
 export { GroupField_module_default as default, fields };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { DefinitionField, NestedField, type NestedFieldProps } from './shared/De
 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 { type RelationListAdapter, type RelationReference, type RelationSource, type RelationSourceOptions, createRelationSource, toReferences, } from './shared/relation';
+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';
 //# 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,GACf,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,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"}

package/dist/index.js

@@ -1,7 +1,7 @@
 import { FieldsProvider, getParentPath, useFieldsContext } from "./shared/context.js";
 import { findRule, getFieldProps, getRuleNumber, isRequired } from "./shared/entry.js";
 import { MissingFieldEntry } from "./missing/MissingField.js";
-import { createRelationSource, toReferences } from "./shared/relation.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 };
+export { DefinitionField, FieldsProvider, MissingFieldEntry, NestedField, builtInFields, createRelationSource, fieldsPlugin, findRule, getFieldProps, getParentPath, getRuleNumber, isRequired, toReferences, useFieldsContext, useRelationReferences };

package/dist/localized/LocalizedField.css

@@ -1,9 +1,9 @@
-.panneau-locales-TQodj- {
+.panneau-localized-field-locales {
     display: flex;
     flex-direction: column;
     gap: var(--panneau-space-3);
 }
 
-.panneau-locale-NSOW2A {
+.panneau-localized-field-locale {
     min-width: 0;
 }

package/dist/localized/LocalizedField.module.js

@@ -1,7 +1,7 @@
 import "./LocalizedField.css";
 //#region src/localized/LocalizedField.module.css
-var locales = "panneau-locales-TQodj-";
-var locale = "panneau-locale-NSOW2A";
+var locales = "panneau-localized-field-locales";
+var locale = "panneau-localized-field-locale";
 var LocalizedField_module_default = {
 	locales,
 	locale

package/dist/missing/MissingField.css

@@ -1,18 +1,19 @@
-.panneau-missing-w-xDO3 {
+.panneau-missing-field-missing {
     display: flex;
     flex-direction: column;
     gap: var(--panneau-space-1);
 }
 
-.panneau-notice-uaGWZE {
+.panneau-missing-field-notice {
     padding: var(--panneau-space-2) var(--panneau-space-3);
     font-size: var(--panneau-font-size-sm);
     color: var(--panneau-color-text-muted);
     background-color: var(--panneau-color-surface-sunken);
     border: var(--panneau-border-width) dashed var(--panneau-color-border-control);
     border-radius: var(--panneau-radius-md);
+    margin: 0;
 }
 
-.panneau-label-5coKrn {
+.panneau-missing-field-label {
     font-weight: var(--panneau-font-weight-medium);
 }

package/dist/missing/MissingField.module.js

@@ -1,8 +1,8 @@
 import "./MissingField.css";
 //#region src/missing/MissingField.module.css
-var missing = "panneau-missing-w-xDO3";
-var notice = "panneau-notice-uaGWZE";
-var label = "panneau-label-5coKrn";
+var missing = "panneau-missing-field-missing";
+var notice = "panneau-missing-field-notice";
+var label = "panneau-missing-field-label";
 var MissingField_module_default = {
 	missing,
 	notice,

package/dist/missing/MissingField.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"MissingField.module.js","names":[],"sources":["../../src/missing/MissingField.module.css"],"sourcesContent":[".missing {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n}\n\n.notice {\n    padding: var(--panneau-space-2) var(--panneau-space-3);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n    background-color: var(--panneau-color-surface-sunken);\n    border: var(--panneau-border-width) dashed var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-md);\n}\n\n.label {\n    font-weight: var(--panneau-font-weight-medium);\n}\n"],"mappings":""}
+{"version":3,"file":"MissingField.module.js","names":[],"sources":["../../src/missing/MissingField.module.css"],"sourcesContent":[".missing {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n}\n\n.notice {\n    padding: var(--panneau-space-2) var(--panneau-space-3);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n    background-color: var(--panneau-color-surface-sunken);\n    border: var(--panneau-border-width) dashed var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-md);\n    margin: 0;\n}\n\n.label {\n    font-weight: var(--panneau-font-weight-medium);\n}\n"],"mappings":""}

package/dist/relation/RelationField.css

@@ -1,10 +1,10 @@
-.panneau-multiple-u9IXr- {
+.panneau-relation-field-multiple {
     display: flex;
     flex-direction: column;
     gap: var(--panneau-space-2);
 }
 
-.panneau-selected-PL7VcQ {
+.panneau-relation-field-selected {
     display: flex;
     flex-wrap: wrap;
     gap: var(--panneau-space-1) var(--panneau-space-2);
@@ -13,7 +13,7 @@
     list-style: none;
 }
 
-.panneau-reference-J8YpaW {
+.panneau-relation-field-reference {
     display: inline-flex;
     align-items: center;
     gap: var(--panneau-space-1);
@@ -26,18 +26,18 @@
     border-radius: var(--panneau-radius-full);
 }
 
-.panneau-reference-J8YpaW:only-child,
-.panneau-readOnly-UunIK0 .panneau-reference-J8YpaW {
+.panneau-relation-field-reference:only-child,
+.panneau-relation-field-read-only .panneau-relation-field-reference {
     padding-inline-end: var(--panneau-space-3);
 }
 
-.panneau-referenceLabel-ydQ0bU {
+.panneau-relation-field-reference-label {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
-.panneau-none-niMk7v {
+.panneau-relation-field-none {
     font-size: var(--panneau-font-size-md);
     color: var(--panneau-color-text-muted);
 }

package/dist/relation/RelationField.d.ts

@@ -14,6 +14,12 @@ export interface RelationFieldBaseProps extends Omit<FieldProps<never>, 'value'
     resource: string;
     /** Where to search. Defaults to the fields context's. Without one, the field is read-only. */
     source?: RelationSource | null;
+    /**
+     * Creates an item from the typed text, offered as "Create “…”" in the picker: it can open a
+     * dialog, and resolves with the new reference, or `null` when nothing was created. Defaults to
+     * the source's `create()`. `null` turns creating off.
+     */
+    onCreate?: ((text: string) => Promise<RelationReference | null>) | null;
     placeholder?: string;
     controlClassName?: string;
 }
@@ -31,8 +37,10 @@ export interface MultipleRelationFieldProps extends RelationFieldBaseProps {
 export type RelationFieldProps = SingleRelationFieldProps | MultipleRelationFieldProps;
 /**
  * A reference to an item of another resource, or several with `multiple`, picked by searching a
- * `RelationSource`. Values are references (`{ id, label }`), as items carry them. Without a
- * source, the field shows its references and can't change them.
+ * `RelationSource`. Values are references (`{ id, label }`), as items carry them; plain ids get
+ * their labels from the source's `resolve()`. When the source can `create()` (or with `onCreate`),
+ * the picker offers to create an item from the typed text. Without a source, the field shows its
+ * references and can't change them.
  */
 export declare function RelationField(props: RelationFieldProps): import("react").JSX.Element;
 /** The `relation` type: `resource` and `multiple`. Items search the fields context's source. */

package/dist/relation/RelationField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RelationField.d.ts","sourceRoot":"","sources":["../../src/relation/RelationField.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAgB,MAAM,oBAAoB,CAAC;AAC/F,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGnE,6DAA6D;AAC7D,wBAAgB,iBAAiB,CAC7B,MAAM,EAAE,cAAc,GAAG,IAAI,EAC7B,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,EAAE,OAAc,EAAE,KAAW,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAO,GAC5E;IAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAmCpD;AAED,yDAAyD;AACzD,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACzF,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;IACjB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,wBAAyB,SAAQ,sBAAsB;IACpE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;CACxD;AAED,MAAM,WAAW,0BAA2B,SAAQ,sBAAsB;IACtE,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,iBAAiB,EAAE,GAAG,IAAI,CAAC;IAC5C,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1D;AAED,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GAAG,0BAA0B,CAAC;AA+BvF;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAiKtD;AAED,gGAAgG;AAChG,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,+BAQxD"}
+{"version":3,"file":"RelationField.d.ts","sourceRoot":"","sources":["../../src/relation/RelationField.tsx"],"names":[],"mappings":"AASA,OAAO,EACH,KAAK,iBAAiB,EACtB,KAAK,cAAc,EAGtB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAMnE,6DAA6D;AAC7D,wBAAgB,iBAAiB,CAC7B,MAAM,EAAE,cAAc,GAAG,IAAI,EAC7B,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,EAAE,OAAc,EAAE,KAAW,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAO,GAC5E;IAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAmCpD;AAED,yDAAyD;AACzD,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACzF,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;IACjB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,wBAAyB,SAAQ,sBAAsB;IACpE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;CACxD;AAED,MAAM,WAAW,0BAA2B,SAAQ,sBAAsB;IACtE,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,iBAAiB,EAAE,GAAG,IAAI,CAAC;IAC5C,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1D;AAED,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GAAG,0BAA0B,CAAC;AA+BvF;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAyNtD;AAED,gGAAgG;AAChG,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,+BAQxD"}

package/dist/relation/RelationField.js

@@ -2,7 +2,7 @@ import { useFieldsContext } from "../shared/context.js";
 import { cx } from "../shared/cx.js";
 import { getFieldProps } from "../shared/entry.js";
 import { messages } from "../shared/messages.js";
-import { toReferences } from "../shared/relation.js";
+import { toReferences, useRelationReferences } from "../shared/relation.js";
 import RelationField_module_default from "./RelationField.module.js";
 import { c } from "react/compiler-runtime";
 import { ComboBox, Fieldset, IconButton, usePanneauIntl } from "@panneau/ui";
@@ -10,6 +10,8 @@ import { useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
 //#region src/relation/RelationField.tsx
+/** The id of the "Create “…”" option of the picker. */
+var CREATE_ID = "\0create";
 /** Results of a search in a relation source, as it types. */
 function useRelationSearch(source, resource, query, { enabled = true, delay = 250 } = {}) {
 	const [state, setState] = useState({
@@ -109,22 +111,47 @@ function References(t0) {
 }
 /**
 * A reference to an item of another resource, or several with `multiple`, picked by searching a
-* `RelationSource`. Values are references (`{ id, label }`), as items carry them. Without a
-* source, the field shows its references and can't change them.
+* `RelationSource`. Values are references (`{ id, label }`), as items carry them; plain ids get
+* their labels from the source's `resolve()`. When the source can `create()` (or with `onCreate`),
+* the picker offers to create an item from the typed text. Without a source, the field shows its
+* references and can't change them.
 */
 function RelationField(props) {
 	const intl = usePanneauIntl();
 	const context = useFieldsContext();
 	const source = props.source === void 0 ? context.relationSource : props.source;
 	const { resource, label, description, errors, disabled, readOnly, required, placeholder = intl.formatMessage(messages.search), onBlur, name, id, className, labelClassName, descriptionClassName, errorsClassName, controlClassName } = props;
-	const selected = toReferences(props.value);
+	const selected = useRelationReferences(source, resource, toReferences(props.value));
 	const [query, setQuery] = useState(null);
+	const [creating, setCreating] = useState(false);
+	const [createError, setCreateError] = useState(null);
 	const editable = source !== null && disabled !== true && readOnly !== true;
-	const { items, isLoading } = useRelationSearch(source, resource, query ?? "", { enabled: editable });
-	const removeLabel = (reference) => `${intl.formatMessage(messages.remove)} ${reference.label}`;
+	const { items: found, isLoading: searching } = useRelationSearch(source, resource, query ?? "", { enabled: editable });
+	const sourceCreate = source?.create;
+	const create = props.onCreate !== void 0 ? props.onCreate : sourceCreate !== void 0 && source?.canCreate?.(resource) !== false ? (text) => sourceCreate.call(source, resource, text) : null;
+	const text_0 = (query ?? "").trim();
+	const items = create !== null && text_0 !== "" && !searching && ![...found, ...selected].some((item) => item.label.toLocaleLowerCase(intl.locale) === text_0.toLocaleLowerCase(intl.locale)) ? [...found, {
+		id: CREATE_ID,
+		label: intl.formatMessage(messages.createRelation, { text: text_0 })
+	}] : found;
+	const isLoading = searching || creating;
+	const allErrors = createError !== null ? [...errors ?? [], createError] : errors;
+	/** Creates an item from the text, then adds its reference with `add`. */
+	const createFrom = (add) => {
+		if (create === null) return;
+		setCreating(true);
+		setCreateError(null);
+		create(text_0).then((reference) => {
+			if (reference !== null) {
+				add(reference);
+				setQuery(null);
+			}
+		}).catch(() => setCreateError(intl.formatMessage(messages.createRelationFailed, { text: text_0 }))).finally(() => setCreating(false));
+	};
+	const removeLabel = (reference_0) => `${intl.formatMessage(messages.remove)} ${reference_0.label}`;
 	const chrome = {
 		legend: label,
-		errors,
+		errors: allErrors,
 		isRequired: required,
 		className,
 		legendClassName: labelClassName,
@@ -158,20 +185,24 @@ function RelationField(props) {
 				children: [selected.length > 0 ? /* @__PURE__ */ jsx(References, {
 					references: selected,
 					removeLabel,
-					onRemove: (reference_0) => set(selected.filter((entry) => entry.id !== reference_0.id))
+					onRemove: (reference_1) => set(selected.filter((entry) => entry.id !== reference_1.id))
 				}) : null, /* @__PURE__ */ jsx(ComboBox, {
 					"aria-label": comboLabel,
-					items: items.filter((item) => !selected.some((entry_0) => entry_0.id === item.id)).map((item_0) => ({
-						id: item_0.id,
-						label: item_0.label
+					items: items.filter((item_0) => !selected.some((entry_0) => entry_0.id === item_0.id)).map((item_1) => ({
+						id: item_1.id,
+						label: item_1.label
 					})),
 					value: null,
 					inputValue: query ?? "",
 					onInputChange: setQuery,
 					onChange: (itemId) => {
-						const reference_1 = items.find((item_1) => item_1.id === itemId);
-						if (reference_1 !== void 0) {
-							set([...selected, reference_1]);
+						if (itemId === CREATE_ID) {
+							createFrom((reference_2) => set([...selected, reference_2]));
+							return;
+						}
+						const reference_3 = found.find((item_2) => item_2.id === itemId);
+						if (reference_3 !== void 0) {
+							set([...selected, reference_3]);
 							setQuery(null);
 						}
 					},
@@ -188,11 +219,11 @@ function RelationField(props) {
 	}
 	const { onChange: onChange_0 } = props;
 	const current = selected[0] ?? null;
-	const shown = current !== null && !items.some((item_2) => item_2.id === current.id) ? [current, ...items] : items;
+	const shown = current !== null && !items.some((item_3) => item_3.id === current.id) ? [current, ...items] : items;
 	return /* @__PURE__ */ jsx(ComboBox, {
 		label,
 		description,
-		errors,
+		errors: allErrors,
 		isRequired: required,
 		className,
 		labelClassName,
@@ -200,21 +231,25 @@ function RelationField(props) {
 		errorsClassName,
 		...controlClassName !== void 0 ? { controlClassName } : {},
 		...props["aria-label"] !== void 0 ? { "aria-label": props["aria-label"] } : {},
-		items: shown.map((item_3) => ({
-			id: item_3.id,
-			label: item_3.label
+		items: shown.map((item_4) => ({
+			id: item_4.id,
+			label: item_4.label
 		})),
 		value: current?.id ?? null,
 		inputValue: query ?? current?.label ?? "",
-		onInputChange: (text) => {
-			setQuery(text);
-			if (text === "" && current !== null) onChange_0?.(null);
+		onInputChange: (text_1) => {
+			setQuery(text_1);
+			if (text_1 === "" && current !== null) onChange_0?.(null);
 		},
 		onChange: (itemId_0) => {
+			if (itemId_0 === CREATE_ID) {
+				createFrom((reference_4) => onChange_0?.(reference_4));
+				return;
+			}
 			setQuery(null);
 			if (itemId_0 === null) return;
-			const reference_2 = shown.find((item_4) => item_4.id === itemId_0) ?? null;
-			if (reference_2?.id !== current?.id) onChange_0?.(reference_2);
+			const reference_5 = shown.find((item_5) => item_5.id === itemId_0) ?? null;
+			if (reference_5?.id !== current?.id) onChange_0?.(reference_5);
 		},
 		isLoading,
 		placeholder,

package/dist/relation/RelationField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RelationField.js","names":["X","reference","entry","item","onChange","itemId","references","_c","styles","_Fragment"],"sources":["../../src/relation/RelationField.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport { useEffect, useState } from 'react';\n\nimport { ComboBox, Fieldset, IconButton, usePanneauIntl } from '@panneau/ui';\n\nimport { useFieldsContext } from '../shared/context';\nimport { cx } from '../shared/cx';\nimport { getFieldProps } from '../shared/entry';\nimport { messages } from '../shared/messages';\nimport { type RelationReference, type RelationSource, toReferences } from '../shared/relation';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\nimport styles from './RelationField.module.css';\n\n/** Results of a search in a relation source, as it types. */\nexport function useRelationSearch(\n    source: RelationSource | null,\n    resource: string,\n    query: string,\n    { enabled = true, delay = 250 }: { enabled?: boolean; delay?: number } = {},\n): { items: RelationReference[]; isLoading: boolean } {\n    const [state, setState] = useState<{\n        key: string;\n        items: RelationReference[];\n        isLoading: boolean;\n    }>({ key: '', items: [], isLoading: false });\n    const key = `${resource}\\u0000${query}`;\n\n    useEffect(() => {\n        if (source === null || !enabled) {\n            return undefined;\n        }\n        const controller = new AbortController();\n        const timer = setTimeout(() => {\n            setState((current) => ({ ...current, key, isLoading: true }));\n            source\n                .search(resource, query, { signal: controller.signal })\n                .then((items) => {\n                    if (!controller.signal.aborted) {\n                        setState({ key, items, isLoading: false });\n                    }\n                })\n                .catch(() => {\n                    if (!controller.signal.aborted) {\n                        setState({ key, items: [], isLoading: false });\n                    }\n                });\n        }, delay);\n        return () => {\n            clearTimeout(timer);\n            controller.abort();\n        };\n    }, [source, resource, query, key, enabled, delay]);\n\n    return { items: state.items, isLoading: state.isLoading || state.key !== key };\n}\n\n/** Props of both single and multiple relation fields. */\nexport interface RelationFieldBaseProps extends Omit<FieldProps<never>, 'value' | 'onChange'> {\n    /** Id of the related resource, passed to the source. */\n    resource: string;\n    /** Where to search. Defaults to the fields context's. Without one, the field is read-only. */\n    source?: RelationSource | null;\n    placeholder?: string;\n    controlClassName?: string;\n}\n\nexport interface SingleRelationFieldProps extends RelationFieldBaseProps {\n    multiple?: false;\n    value?: RelationReference | null;\n    onChange?: (value: RelationReference | null) => void;\n}\n\nexport interface MultipleRelationFieldProps extends RelationFieldBaseProps {\n    multiple: true;\n    value?: readonly RelationReference[] | null;\n    /** Called with the references. An empty list is `null`. */\n    onChange?: (value: RelationReference[] | null) => void;\n}\n\nexport type RelationFieldProps = SingleRelationFieldProps | MultipleRelationFieldProps;\n\nfunction References({\n    references,\n    onRemove,\n    removeLabel,\n}: {\n    references: readonly RelationReference[];\n    onRemove?: (reference: RelationReference) => void;\n    removeLabel: (reference: RelationReference) => string;\n}) {\n    return (\n        <ul className={cx(styles.selected, onRemove === undefined && styles.readOnly)}>\n            {references.map((reference) => (\n                <li key={reference.id} className={styles.reference}>\n                    <span className={styles.referenceLabel}>{reference.label}</span>\n                    {onRemove !== undefined ? (\n                        <IconButton\n                            icon={X}\n                            size=\"sm\"\n                            label={removeLabel(reference)}\n                            showTooltip={false}\n                            onPress={() => onRemove(reference)}\n                        />\n                    ) : null}\n                </li>\n            ))}\n        </ul>\n    );\n}\n\n/**\n * A reference to an item of another resource, or several with `multiple`, picked by searching a\n * `RelationSource`. Values are references (`{ id, label }`), as items carry them. Without a\n * source, the field shows its references and can't change them.\n */\nexport function RelationField(props: RelationFieldProps) {\n    const intl = usePanneauIntl();\n    const context = useFieldsContext();\n    const source = props.source === undefined ? context.relationSource : props.source;\n    const {\n        resource,\n        label,\n        description,\n        errors,\n        disabled,\n        readOnly,\n        required,\n        placeholder = intl.formatMessage(messages.search),\n        onBlur,\n        name,\n        id,\n        className,\n        labelClassName,\n        descriptionClassName,\n        errorsClassName,\n        controlClassName,\n    } = props;\n    const selected = toReferences(props.value);\n    const [query, setQuery] = useState<string | null>(null);\n    const editable = source !== null && disabled !== true && readOnly !== true;\n    const { items, isLoading } = useRelationSearch(source, resource, query ?? '', {\n        enabled: editable,\n    });\n    const removeLabel = (reference: RelationReference) =>\n        `${intl.formatMessage(messages.remove)} ${reference.label}`;\n    const chrome = {\n        legend: label,\n        errors,\n        isRequired: required,\n        className,\n        legendClassName: labelClassName,\n        descriptionClassName,\n        errorsClassName,\n    };\n\n    if (!editable) {\n        return (\n            <Fieldset\n                {...chrome}\n                description={\n                    source === null && disabled !== true && readOnly !== true ? (\n                        <>\n                            {description} {intl.formatMessage(messages.relationUnavailable)}\n                        </>\n                    ) : (\n                        description\n                    )\n                }\n            >\n                {selected.length > 0 ? (\n                    <References references={selected} removeLabel={removeLabel} />\n                ) : (\n                    <span className={styles.none}>{intl.formatMessage(messages.noRelation)}</span>\n                )}\n            </Fieldset>\n        );\n    }\n\n    const comboLabel = typeof label === 'string' ? label : props['aria-label'];\n\n    if (props.multiple === true) {\n        const { onChange } = props;\n        const set = (next: RelationReference[]) => onChange?.(next.length > 0 ? next : null);\n        return (\n            <Fieldset {...chrome} description={description}>\n                <div className={styles.multiple}>\n                    {selected.length > 0 ? (\n                        <References\n                            references={selected}\n                            removeLabel={removeLabel}\n                            onRemove={(reference) =>\n                                set(selected.filter((entry) => entry.id !== reference.id))\n                            }\n                        />\n                    ) : null}\n                    <ComboBox\n                        aria-label={comboLabel}\n                        items={items\n                            .filter((item) => !selected.some((entry) => entry.id === item.id))\n                            .map((item) => ({ id: item.id, label: item.label }))}\n                        value={null}\n                        inputValue={query ?? ''}\n                        onInputChange={setQuery}\n                        onChange={(itemId) => {\n                            const reference = items.find((item) => item.id === itemId);\n                            if (reference !== undefined) {\n                                set([...selected, reference]);\n                                setQuery(null);\n                            }\n                        }}\n                        isLoading={isLoading}\n                        placeholder={placeholder}\n                        emptyMessage={intl.formatMessage(messages.noResults)}\n                        {...(onBlur !== undefined ? { onBlur: () => onBlur() } : {})}\n                        {...(name !== undefined ? { name } : {})}\n                        {...(id !== undefined ? { id } : {})}\n                        {...(controlClassName !== undefined ? { controlClassName } : {})}\n                    />\n                </div>\n            </Fieldset>\n        );\n    }\n\n    const { onChange } = props;\n    const current = selected[0] ?? null;\n    // The selected reference is among the items, so that the combo box knows its label.\n    const shown =\n        current !== null && !items.some((item) => item.id === current.id)\n            ? [current, ...items]\n            : items;\n    return (\n        <ComboBox\n            label={label}\n            description={description}\n            errors={errors}\n            isRequired={required}\n            className={className}\n            labelClassName={labelClassName}\n            descriptionClassName={descriptionClassName}\n            errorsClassName={errorsClassName}\n            {...(controlClassName !== undefined ? { controlClassName } : {})}\n            {...(props['aria-label'] !== undefined ? { 'aria-label': props['aria-label'] } : {})}\n            items={shown.map((item) => ({ id: item.id, label: item.label }))}\n            value={current?.id ?? null}\n            inputValue={query ?? current?.label ?? ''}\n            onInputChange={(text) => {\n                setQuery(text);\n                if (text === '' && current !== null) {\n                    onChange?.(null);\n                }\n            }}\n            onChange={(itemId) => {\n                setQuery(null);\n                if (itemId === null) {\n                    return;\n                }\n                const reference = shown.find((item) => item.id === itemId) ?? null;\n                if (reference?.id !== current?.id) {\n                    onChange?.(reference);\n                }\n            }}\n            isLoading={isLoading}\n            placeholder={placeholder}\n            emptyMessage={intl.formatMessage(messages.noResults)}\n            {...(onBlur !== undefined\n                ? {\n                      onBlur: () => {\n                          setQuery(null);\n                          onBlur();\n                      },\n                  }\n                : { onBlur: () => setQuery(null) })}\n            {...(name !== undefined ? { name } : {})}\n            {...(id !== undefined ? { id } : {})}\n        />\n    );\n}\n\n/** The `relation` type: `resource` and `multiple`. Items search the fields context's source. */\nexport function RelationFieldEntry(props: FieldEntryProps) {\n    const { field } = props;\n    const references = toReferences(props.value);\n    const shared = { ...getFieldProps(props), resource: field.resource ?? '' };\n    if (field.multiple === true) {\n        return <RelationField {...shared} multiple value={references} onChange={props.onChange} />;\n    }\n    return <RelationField {...shared} value={references[0] ?? null} onChange={props.onChange} />;\n}\n"],"mappings":"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"}
+{"version":3,"file":"RelationField.js","names":["X","text","reference","item","entry","onChange","itemId","references","_c","styles","_Fragment"],"sources":["../../src/relation/RelationField.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport { useEffect, useState } from 'react';\n\nimport { ComboBox, Fieldset, IconButton, usePanneauIntl } from '@panneau/ui';\n\nimport { useFieldsContext } from '../shared/context';\nimport { cx } from '../shared/cx';\nimport { getFieldProps } from '../shared/entry';\nimport { messages } from '../shared/messages';\nimport {\n    type RelationReference,\n    type RelationSource,\n    toReferences,\n    useRelationReferences,\n} from '../shared/relation';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\nimport styles from './RelationField.module.css';\n\n/** The id of the \"Create “…”\" option of the picker. */\nconst CREATE_ID = '\\u0000create';\n\n/** Results of a search in a relation source, as it types. */\nexport function useRelationSearch(\n    source: RelationSource | null,\n    resource: string,\n    query: string,\n    { enabled = true, delay = 250 }: { enabled?: boolean; delay?: number } = {},\n): { items: RelationReference[]; isLoading: boolean } {\n    const [state, setState] = useState<{\n        key: string;\n        items: RelationReference[];\n        isLoading: boolean;\n    }>({ key: '', items: [], isLoading: false });\n    const key = `${resource}\\u0000${query}`;\n\n    useEffect(() => {\n        if (source === null || !enabled) {\n            return undefined;\n        }\n        const controller = new AbortController();\n        const timer = setTimeout(() => {\n            setState((current) => ({ ...current, key, isLoading: true }));\n            source\n                .search(resource, query, { signal: controller.signal })\n                .then((items) => {\n                    if (!controller.signal.aborted) {\n                        setState({ key, items, isLoading: false });\n                    }\n                })\n                .catch(() => {\n                    if (!controller.signal.aborted) {\n                        setState({ key, items: [], isLoading: false });\n                    }\n                });\n        }, delay);\n        return () => {\n            clearTimeout(timer);\n            controller.abort();\n        };\n    }, [source, resource, query, key, enabled, delay]);\n\n    return { items: state.items, isLoading: state.isLoading || state.key !== key };\n}\n\n/** Props of both single and multiple relation fields. */\nexport interface RelationFieldBaseProps extends Omit<FieldProps<never>, 'value' | 'onChange'> {\n    /** Id of the related resource, passed to the source. */\n    resource: string;\n    /** Where to search. Defaults to the fields context's. Without one, the field is read-only. */\n    source?: RelationSource | null;\n    /**\n     * Creates an item from the typed text, offered as \"Create “…”\" in the picker: it can open a\n     * dialog, and resolves with the new reference, or `null` when nothing was created. Defaults to\n     * the source's `create()`. `null` turns creating off.\n     */\n    onCreate?: ((text: string) => Promise<RelationReference | null>) | null;\n    placeholder?: string;\n    controlClassName?: string;\n}\n\nexport interface SingleRelationFieldProps extends RelationFieldBaseProps {\n    multiple?: false;\n    value?: RelationReference | null;\n    onChange?: (value: RelationReference | null) => void;\n}\n\nexport interface MultipleRelationFieldProps extends RelationFieldBaseProps {\n    multiple: true;\n    value?: readonly RelationReference[] | null;\n    /** Called with the references. An empty list is `null`. */\n    onChange?: (value: RelationReference[] | null) => void;\n}\n\nexport type RelationFieldProps = SingleRelationFieldProps | MultipleRelationFieldProps;\n\nfunction References({\n    references,\n    onRemove,\n    removeLabel,\n}: {\n    references: readonly RelationReference[];\n    onRemove?: (reference: RelationReference) => void;\n    removeLabel: (reference: RelationReference) => string;\n}) {\n    return (\n        <ul className={cx(styles.selected, onRemove === undefined && styles.readOnly)}>\n            {references.map((reference) => (\n                <li key={reference.id} className={styles.reference}>\n                    <span className={styles.referenceLabel}>{reference.label}</span>\n                    {onRemove !== undefined ? (\n                        <IconButton\n                            icon={X}\n                            size=\"sm\"\n                            label={removeLabel(reference)}\n                            showTooltip={false}\n                            onPress={() => onRemove(reference)}\n                        />\n                    ) : null}\n                </li>\n            ))}\n        </ul>\n    );\n}\n\n/**\n * A reference to an item of another resource, or several with `multiple`, picked by searching a\n * `RelationSource`. Values are references (`{ id, label }`), as items carry them; plain ids get\n * their labels from the source's `resolve()`. When the source can `create()` (or with `onCreate`),\n * the picker offers to create an item from the typed text. Without a source, the field shows its\n * references and can't change them.\n */\nexport function RelationField(props: RelationFieldProps) {\n    const intl = usePanneauIntl();\n    const context = useFieldsContext();\n    const source = props.source === undefined ? context.relationSource : props.source;\n    const {\n        resource,\n        label,\n        description,\n        errors,\n        disabled,\n        readOnly,\n        required,\n        placeholder = intl.formatMessage(messages.search),\n        onBlur,\n        name,\n        id,\n        className,\n        labelClassName,\n        descriptionClassName,\n        errorsClassName,\n        controlClassName,\n    } = props;\n    const selected = useRelationReferences(source, resource, toReferences(props.value));\n    const [query, setQuery] = useState<string | null>(null);\n    const [creating, setCreating] = useState(false);\n    const [createError, setCreateError] = useState<string | null>(null);\n    const editable = source !== null && disabled !== true && readOnly !== true;\n    const { items: found, isLoading: searching } = useRelationSearch(\n        source,\n        resource,\n        query ?? '',\n        { enabled: editable },\n    );\n    const sourceCreate = source?.create;\n    const create =\n        props.onCreate !== undefined\n            ? props.onCreate\n            : sourceCreate !== undefined && source?.canCreate?.(resource) !== false\n              ? (text: string) => sourceCreate.call(source, resource, text)\n              : null;\n    const text = (query ?? '').trim();\n    const offersCreate =\n        create !== null &&\n        text !== '' &&\n        !searching &&\n        ![...found, ...selected].some(\n            (item) =>\n                item.label.toLocaleLowerCase(intl.locale) === text.toLocaleLowerCase(intl.locale),\n        );\n    const items = offersCreate\n        ? [\n              ...found,\n              { id: CREATE_ID, label: intl.formatMessage(messages.createRelation, { text }) },\n          ]\n        : found;\n    const isLoading = searching || creating;\n    const allErrors = createError !== null ? [...(errors ?? []), createError] : errors;\n    /** Creates an item from the text, then adds its reference with `add`. */\n    const createFrom = (add: (reference: RelationReference) => void) => {\n        if (create === null) {\n            return;\n        }\n        setCreating(true);\n        setCreateError(null);\n        create(text)\n            .then((reference) => {\n                if (reference !== null) {\n                    add(reference);\n                    setQuery(null);\n                }\n            })\n            .catch(() =>\n                setCreateError(intl.formatMessage(messages.createRelationFailed, { text })),\n            )\n            .finally(() => setCreating(false));\n    };\n    const removeLabel = (reference: RelationReference) =>\n        `${intl.formatMessage(messages.remove)} ${reference.label}`;\n    const chrome = {\n        legend: label,\n        errors: allErrors,\n        isRequired: required,\n        className,\n        legendClassName: labelClassName,\n        descriptionClassName,\n        errorsClassName,\n    };\n\n    if (!editable) {\n        return (\n            <Fieldset\n                {...chrome}\n                description={\n                    source === null && disabled !== true && readOnly !== true ? (\n                        <>\n                            {description} {intl.formatMessage(messages.relationUnavailable)}\n                        </>\n                    ) : (\n                        description\n                    )\n                }\n            >\n                {selected.length > 0 ? (\n                    <References references={selected} removeLabel={removeLabel} />\n                ) : (\n                    <span className={styles.none}>{intl.formatMessage(messages.noRelation)}</span>\n                )}\n            </Fieldset>\n        );\n    }\n\n    const comboLabel = typeof label === 'string' ? label : props['aria-label'];\n\n    if (props.multiple === true) {\n        const { onChange } = props;\n        const set = (next: RelationReference[]) => onChange?.(next.length > 0 ? next : null);\n        return (\n            <Fieldset {...chrome} description={description}>\n                <div className={styles.multiple}>\n                    {selected.length > 0 ? (\n                        <References\n                            references={selected}\n                            removeLabel={removeLabel}\n                            onRemove={(reference) =>\n                                set(selected.filter((entry) => entry.id !== reference.id))\n                            }\n                        />\n                    ) : null}\n                    <ComboBox\n                        aria-label={comboLabel}\n                        items={items\n                            .filter((item) => !selected.some((entry) => entry.id === item.id))\n                            .map((item) => ({ id: item.id, label: item.label }))}\n                        value={null}\n                        inputValue={query ?? ''}\n                        onInputChange={setQuery}\n                        onChange={(itemId) => {\n                            if (itemId === CREATE_ID) {\n                                createFrom((reference) => set([...selected, reference]));\n                                return;\n                            }\n                            const reference = found.find((item) => item.id === itemId);\n                            if (reference !== undefined) {\n                                set([...selected, reference]);\n                                setQuery(null);\n                            }\n                        }}\n                        isLoading={isLoading}\n                        placeholder={placeholder}\n                        emptyMessage={intl.formatMessage(messages.noResults)}\n                        {...(onBlur !== undefined ? { onBlur: () => onBlur() } : {})}\n                        {...(name !== undefined ? { name } : {})}\n                        {...(id !== undefined ? { id } : {})}\n                        {...(controlClassName !== undefined ? { controlClassName } : {})}\n                    />\n                </div>\n            </Fieldset>\n        );\n    }\n\n    const { onChange } = props;\n    const current = selected[0] ?? null;\n    // The selected reference is among the items, so that the combo box knows its label.\n    const shown =\n        current !== null && !items.some((item) => item.id === current.id)\n            ? [current, ...items]\n            : items;\n    return (\n        <ComboBox\n            label={label}\n            description={description}\n            errors={allErrors}\n            isRequired={required}\n            className={className}\n            labelClassName={labelClassName}\n            descriptionClassName={descriptionClassName}\n            errorsClassName={errorsClassName}\n            {...(controlClassName !== undefined ? { controlClassName } : {})}\n            {...(props['aria-label'] !== undefined ? { 'aria-label': props['aria-label'] } : {})}\n            items={shown.map((item) => ({ id: item.id, label: item.label }))}\n            value={current?.id ?? null}\n            inputValue={query ?? current?.label ?? ''}\n            onInputChange={(text) => {\n                setQuery(text);\n                if (text === '' && current !== null) {\n                    onChange?.(null);\n                }\n            }}\n            onChange={(itemId) => {\n                if (itemId === CREATE_ID) {\n                    createFrom((reference) => onChange?.(reference));\n                    return;\n                }\n                setQuery(null);\n                if (itemId === null) {\n                    return;\n                }\n                const reference = shown.find((item) => item.id === itemId) ?? null;\n                if (reference?.id !== current?.id) {\n                    onChange?.(reference);\n                }\n            }}\n            isLoading={isLoading}\n            placeholder={placeholder}\n            emptyMessage={intl.formatMessage(messages.noResults)}\n            {...(onBlur !== undefined\n                ? {\n                      onBlur: () => {\n                          setQuery(null);\n                          onBlur();\n                      },\n                  }\n                : { onBlur: () => setQuery(null) })}\n            {...(name !== undefined ? { name } : {})}\n            {...(id !== undefined ? { id } : {})}\n        />\n    );\n}\n\n/** The `relation` type: `resource` and `multiple`. Items search the fields context's source. */\nexport function RelationFieldEntry(props: FieldEntryProps) {\n    const { field } = props;\n    const references = toReferences(props.value);\n    const shared = { ...getFieldProps(props), resource: field.resource ?? '' };\n    if (field.multiple === true) {\n        return <RelationField {...shared} multiple value={references} onChange={props.onChange} />;\n    }\n    return <RelationField {...shared} value={references[0] ?? null} onChange={props.onChange} />;\n}\n"],"mappings":"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"}

package/dist/relation/RelationField.module.js

@@ -1,11 +1,11 @@
 import "./RelationField.css";
 //#region src/relation/RelationField.module.css
-var multiple = "panneau-multiple-u9IXr-";
-var selected = "panneau-selected-PL7VcQ";
-var reference = "panneau-reference-J8YpaW";
-var readOnly = "panneau-readOnly-UunIK0";
-var referenceLabel = "panneau-referenceLabel-ydQ0bU";
-var none = "panneau-none-niMk7v";
+var multiple = "panneau-relation-field-multiple";
+var selected = "panneau-relation-field-selected";
+var reference = "panneau-relation-field-reference";
+var readOnly = "panneau-relation-field-read-only";
+var referenceLabel = "panneau-relation-field-reference-label";
+var none = "panneau-relation-field-none";
 var RelationField_module_default = {
 	multiple,
 	selected,

package/dist/relation/index.d.ts

@@ -1,3 +1,3 @@
 export { type MultipleRelationFieldProps, type RelationFieldBaseProps, RelationField, RelationFieldEntry, type RelationFieldProps, type SingleRelationFieldProps, useRelationSearch, } from './RelationField';
-export { type RelationListAdapter, type RelationReference, type RelationSource, type RelationSourceOptions, createRelationSource, } from '../shared/relation';
+export { type RelationListAdapter, type RelationReference, type RelationSource, type RelationSourceOptions, createRelationSource, useRelationReferences, } from '../shared/relation';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/relation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,0BAA0B,EAC/B,KAAK,sBAAsB,EAC3B,aAAa,EACb,kBAAkB,EAClB,KAAK,kBAAkB,EACvB,KAAK,wBAAwB,EAC7B,iBAAiB,GACpB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACH,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC1B,oBAAoB,GACvB,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/relation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,0BAA0B,EAC/B,KAAK,sBAAsB,EAC3B,aAAa,EACb,kBAAkB,EAClB,KAAK,kBAAkB,EACvB,KAAK,wBAAwB,EAC7B,iBAAiB,GACpB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACH,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC1B,oBAAoB,EACpB,qBAAqB,GACxB,MAAM,oBAAoB,CAAC"}

package/dist/relation/index.js

@@ -1,3 +1,3 @@
-import { createRelationSource } from "../shared/relation.js";
+import { createRelationSource, useRelationReferences } from "../shared/relation.js";
 import { RelationField, RelationFieldEntry, useRelationSearch } from "./RelationField.js";
-export { RelationField, RelationFieldEntry, createRelationSource, useRelationSearch };
+export { RelationField, RelationFieldEntry, createRelationSource, useRelationReferences, useRelationSearch };

package/dist/repeater/RepeaterField.css

@@ -1,4 +1,4 @@
-.panneau-items-B5uTq4 {
+.panneau-repeater-field-items {
     display: flex;
     flex-direction: column;
     gap: var(--panneau-space-3);
@@ -7,7 +7,7 @@
     list-style: none;
 }
 
-.panneau-item-cNAgol {
+.panneau-repeater-field-item {
     display: flex;
     flex-direction: column;
     min-width: 0;
@@ -16,7 +16,7 @@
     border-radius: var(--panneau-radius-md);
 }
 
-.panneau-header-QLqgvh {
+.panneau-repeater-field-header {
     display: flex;
     align-items: center;
     gap: var(--panneau-space-2);
@@ -29,7 +29,7 @@
     border-start-end-radius: inherit;
 }
 
-.panneau-title-0eDHTu {
+.panneau-repeater-field-title {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
@@ -39,42 +39,43 @@
     white-space: nowrap;
 }
 
-.panneau-index-IrOBUU {
+.panneau-repeater-field-index {
     margin-inline-end: var(--panneau-space-2);
-    font-variant-numeric: tabular-nums;
+    font-variant-numeric: var(--panneau-font-numeric);
     color: var(--panneau-color-text-muted);
 }
 
-.panneau-tools-zbGiq2 {
+.panneau-repeater-field-tools {
     display: flex;
     flex: 0 0 auto;
     gap: var(--panneau-space-1);
 }
 
-.panneau-body-iQtLK9 {
+.panneau-repeater-field-body {
     display: flex;
     flex-direction: column;
     gap: var(--panneau-space-4);
     padding: var(--panneau-space-4);
 }
 
-.panneau-empty-MST5Cj {
+.panneau-repeater-field-empty {
     padding: var(--panneau-space-3);
     font-size: var(--panneau-font-size-sm);
     color: var(--panneau-color-text-muted);
     text-align: center;
     border: var(--panneau-border-width) dashed var(--panneau-color-border-control);
     border-radius: var(--panneau-radius-md);
+    margin: 0;
 }
 
-.panneau-footer-5jeHXH {
+.panneau-repeater-field-footer {
     display: flex;
     flex-wrap: wrap;
     gap: var(--panneau-space-2);
 }
 
 @media (max-width: 30rem) {
-    .panneau-body-iQtLK9 {
+    .panneau-repeater-field-body {
         padding: var(--panneau-space-3);
     }
 }

package/dist/repeater/RepeaterField.module.js

@@ -1,14 +1,14 @@
 import "./RepeaterField.css";
 //#region src/repeater/RepeaterField.module.css
-var items = "panneau-items-B5uTq4";
-var item = "panneau-item-cNAgol";
-var header = "panneau-header-QLqgvh";
-var title = "panneau-title-0eDHTu";
-var index = "panneau-index-IrOBUU";
-var tools = "panneau-tools-zbGiq2";
-var body = "panneau-body-iQtLK9";
-var empty = "panneau-empty-MST5Cj";
-var footer = "panneau-footer-5jeHXH";
+var items = "panneau-repeater-field-items";
+var item = "panneau-repeater-field-item";
+var header = "panneau-repeater-field-header";
+var title = "panneau-repeater-field-title";
+var index = "panneau-repeater-field-index";
+var tools = "panneau-repeater-field-tools";
+var body = "panneau-repeater-field-body";
+var empty = "panneau-repeater-field-empty";
+var footer = "panneau-repeater-field-footer";
 var RepeaterField_module_default = {
 	items,
 	item,

package/dist/repeater/RepeaterField.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"RepeaterField.module.js","names":[],"sources":["../../src/repeater/RepeaterField.module.css"],"sourcesContent":[".items {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-3);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.item {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    background-color: var(--panneau-color-surface);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-md);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height);\n    padding: var(--panneau-space-1) var(--panneau-space-1) var(--panneau-space-1)\n        var(--panneau-space-3);\n    background-color: var(--panneau-color-surface-sunken);\n    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-start-start-radius: inherit;\n    border-start-end-radius: inherit;\n}\n\n.title {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    font-size: var(--panneau-font-size-sm);\n    font-weight: var(--panneau-font-weight-medium);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.index {\n    margin-inline-end: var(--panneau-space-2);\n    font-variant-numeric: tabular-nums;\n    color: var(--panneau-color-text-muted);\n}\n\n.tools {\n    display: flex;\n    flex: 0 0 auto;\n    gap: var(--panneau-space-1);\n}\n\n.body {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-4);\n    padding: var(--panneau-space-4);\n}\n\n.empty {\n    padding: var(--panneau-space-3);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n    text-align: center;\n    border: var(--panneau-border-width) dashed var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-md);\n}\n\n.footer {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-2);\n}\n\n@media (max-width: 30rem) {\n    .body {\n        padding: var(--panneau-space-3);\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"RepeaterField.module.js","names":[],"sources":["../../src/repeater/RepeaterField.module.css"],"sourcesContent":[".items {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-3);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.item {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    background-color: var(--panneau-color-surface);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-md);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height);\n    padding: var(--panneau-space-1) var(--panneau-space-1) var(--panneau-space-1)\n        var(--panneau-space-3);\n    background-color: var(--panneau-color-surface-sunken);\n    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-start-start-radius: inherit;\n    border-start-end-radius: inherit;\n}\n\n.title {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    font-size: var(--panneau-font-size-sm);\n    font-weight: var(--panneau-font-weight-medium);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.index {\n    margin-inline-end: var(--panneau-space-2);\n    font-variant-numeric: var(--panneau-font-numeric);\n    color: var(--panneau-color-text-muted);\n}\n\n.tools {\n    display: flex;\n    flex: 0 0 auto;\n    gap: var(--panneau-space-1);\n}\n\n.body {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-4);\n    padding: var(--panneau-space-4);\n}\n\n.empty {\n    padding: var(--panneau-space-3);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n    text-align: center;\n    border: var(--panneau-border-width) dashed var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-md);\n    margin: 0;\n}\n\n.footer {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-2);\n}\n\n@media (max-width: 30rem) {\n    .body {\n        padding: var(--panneau-space-3);\n    }\n}\n"],"mappings":""}

package/dist/select/SelectField.css

@@ -1,4 +1,4 @@
-.panneau-checkboxes-To0J7N {
+.panneau-select-field-checkboxes {
     display: flex;
     flex-direction: column;
     gap: var(--panneau-space-1);

package/dist/select/SelectField.module.js

@@ -1,6 +1,6 @@
 import "./SelectField.css";
 //#region src/select/SelectField.module.css
-var checkboxes = "panneau-checkboxes-To0J7N";
+var checkboxes = "panneau-select-field-checkboxes";
 var SelectField_module_default = { checkboxes };
 //#endregion
 export { checkboxes, SelectField_module_default as default };

package/dist/shared/DefinitionField.d.ts

@@ -1,4 +1,4 @@
-import { type Field } from '@panneau/protocol';
+import type { Field } from '@panneau/protocol';
 import type { FieldEntryProps } from './types';
 export interface NestedFieldProps {
     field: Field;

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

@@ -1 +1 @@
-{"version":3,"file":"DefinitionField.d.ts","sourceRoot":"","sources":["../../src/shared/DefinitionField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAqB,MAAM,mBAAmB,CAAC;AASlE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,4EAA4E;IAC5E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAM,EACN,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,GACZ,EAAE,gBAAgB,sCAgClB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,+BAQrD"}
+{"version":3,"file":"DefinitionField.d.ts","sourceRoot":"","sources":["../../src/shared/DefinitionField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAU/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,4EAA4E;IAC5E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAM,EACN,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,GACZ,EAAE,gBAAgB,sCAgClB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,+BAQrD"}

package/dist/shared/DefinitionField.js

@@ -3,7 +3,7 @@ import { LocalizedFieldEntry } from "../localized/LocalizedField.js";
 import { MissingFieldEntry } from "../missing/MissingField.js";
 import { builtInFields } from "./builtIn.js";
 import { c } from "react/compiler-runtime";
-import { evaluateCondition } from "@panneau/protocol";
+import { evaluateCondition } from "@panneau/protocol/runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/shared/DefinitionField.tsx
 /**

package/dist/shared/DefinitionField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefinitionField.js","names":["field","path","value","_c"],"sources":["../../src/shared/DefinitionField.tsx"],"sourcesContent":["import { type Field, evaluateCondition } from '@panneau/protocol';\n\n// Groups, repeaters and localized values render nested fields, which render through\n// `DefinitionField`: the modules import each other, which is fine since they only use each other\n// while rendering.\nimport { LocalizedFieldEntry } from '../localized/LocalizedField';\nimport { MissingFieldEntry } from '../missing/MissingField';\nimport { builtInFields } from './builtIn';\nimport { getParentPath, useFieldsContext } from './context';\nimport type { FieldEntryProps } from './types';\n\nexport interface NestedFieldProps {\n    field: Field;\n    /** Dot path of the field's value. */\n    path: string;\n    /** The value, without a binding. */\n    value?: unknown;\n    /** Sets the value, without a binding. */\n    onChange?: (value: unknown) => void;\n    onBlur?: () => void;\n    errors?: readonly string[];\n    /** The object the field belongs to, for conditions and generated values. */\n    parentValue?: unknown;\n    disabled?: boolean;\n    readOnly?: boolean;\n    className?: string;\n}\n\n/**\n * A field inside another one (a group, a block, a localized value), or at the top of a form.\n * With a binding in context, the binding gives its value and decides whether it shows. Without\n * one, it uses `value` and `onChange`, and hides itself when its `visibleWhen` condition on the\n * parent value is false.\n */\nexport function NestedField({\n    field,\n    path,\n    value,\n    onChange,\n    onBlur,\n    errors,\n    parentValue,\n    disabled,\n    readOnly,\n    className,\n}: NestedFieldProps) {\n    const { binding: Binding } = useFieldsContext();\n    const shared = {\n        field,\n        path,\n        parentValue,\n        ...(disabled !== undefined ? { disabled } : {}),\n        ...(readOnly !== undefined ? { readOnly } : {}),\n        ...(className !== undefined ? { className } : {}),\n    };\n    if (Binding !== null) {\n        return (\n            <Binding\n                field={field}\n                path={path}\n                parentPath={getParentPath(path)}\n                render={(bound) => <DefinitionField {...shared} {...bound} />}\n            />\n        );\n    }\n    if (field.visibleWhen !== undefined && !evaluateCondition(field.visibleWhen, parentValue)) {\n        return null;\n    }\n    return (\n        <DefinitionField\n            {...shared}\n            value={value}\n            onChange={onChange ?? (() => undefined)}\n            {...(onBlur !== undefined ? { onBlur } : {})}\n            {...(errors !== undefined ? { errors } : {})}\n        />\n    );\n}\n\n/**\n * Renders a field of the definition with the entry of its type: from the fields context, or a\n * built-in one. A localized field renders an input per locale. A type without an entry renders a\n * placeholder that names the missing plugin.\n */\nexport function DefinitionField(props: FieldEntryProps) {\n    const { components } = useFieldsContext();\n    const { field } = props;\n    if (field.localized === true) {\n        return <LocalizedFieldEntry {...props} />;\n    }\n    const Entry = components[field.type] ?? builtInFields[field.type] ?? MissingFieldEntry;\n    return <Entry {...props} />;\n}\n"],"mappings":"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"}
+{"version":3,"file":"DefinitionField.js","names":["field","path","value","_c"],"sources":["../../src/shared/DefinitionField.tsx"],"sourcesContent":["import type { Field } from '@panneau/protocol';\nimport { evaluateCondition } from '@panneau/protocol/runtime';\n\n// Groups, repeaters and localized values render nested fields, which render through\n// `DefinitionField`: the modules import each other, which is fine since they only use each other\n// while rendering.\nimport { LocalizedFieldEntry } from '../localized/LocalizedField';\nimport { MissingFieldEntry } from '../missing/MissingField';\nimport { builtInFields } from './builtIn';\nimport { getParentPath, useFieldsContext } from './context';\nimport type { FieldEntryProps } from './types';\n\nexport interface NestedFieldProps {\n    field: Field;\n    /** Dot path of the field's value. */\n    path: string;\n    /** The value, without a binding. */\n    value?: unknown;\n    /** Sets the value, without a binding. */\n    onChange?: (value: unknown) => void;\n    onBlur?: () => void;\n    errors?: readonly string[];\n    /** The object the field belongs to, for conditions and generated values. */\n    parentValue?: unknown;\n    disabled?: boolean;\n    readOnly?: boolean;\n    className?: string;\n}\n\n/**\n * A field inside another one (a group, a block, a localized value), or at the top of a form.\n * With a binding in context, the binding gives its value and decides whether it shows. Without\n * one, it uses `value` and `onChange`, and hides itself when its `visibleWhen` condition on the\n * parent value is false.\n */\nexport function NestedField({\n    field,\n    path,\n    value,\n    onChange,\n    onBlur,\n    errors,\n    parentValue,\n    disabled,\n    readOnly,\n    className,\n}: NestedFieldProps) {\n    const { binding: Binding } = useFieldsContext();\n    const shared = {\n        field,\n        path,\n        parentValue,\n        ...(disabled !== undefined ? { disabled } : {}),\n        ...(readOnly !== undefined ? { readOnly } : {}),\n        ...(className !== undefined ? { className } : {}),\n    };\n    if (Binding !== null) {\n        return (\n            <Binding\n                field={field}\n                path={path}\n                parentPath={getParentPath(path)}\n                render={(bound) => <DefinitionField {...shared} {...bound} />}\n            />\n        );\n    }\n    if (field.visibleWhen !== undefined && !evaluateCondition(field.visibleWhen, parentValue)) {\n        return null;\n    }\n    return (\n        <DefinitionField\n            {...shared}\n            value={value}\n            onChange={onChange ?? (() => undefined)}\n            {...(onBlur !== undefined ? { onBlur } : {})}\n            {...(errors !== undefined ? { errors } : {})}\n        />\n    );\n}\n\n/**\n * Renders a field of the definition with the entry of its type: from the fields context, or a\n * built-in one. A localized field renders an input per locale. A type without an entry renders a\n * placeholder that names the missing plugin.\n */\nexport function DefinitionField(props: FieldEntryProps) {\n    const { components } = useFieldsContext();\n    const { field } = props;\n    if (field.localized === true) {\n        return <LocalizedFieldEntry {...props} />;\n    }\n    const Entry = components[field.type] ?? builtInFields[field.type] ?? MissingFieldEntry;\n    return <Entry {...props} />;\n}\n"],"mappings":"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"}

package/dist/shared/relation.d.ts

@@ -10,28 +10,64 @@ export interface RelationSource {
     search(resource: string, query: string, options: {
         signal: AbortSignal;
     }): Promise<RelationReference[]>;
+    /**
+     * The references of items by id, for values that are only ids (`"12"`, `["12", "13"]`), as a
+     * product's own API gives them. In any order; ids it doesn't find are left out, and keep their
+     * id as label. Without it, fields show the ids.
+     */
+    resolve?(resource: string, ids: readonly string[], options: {
+        signal: AbortSignal;
+    }): Promise<RelationReference[]>;
+    /**
+     * Creates an item from the text typed in the picker, which offers "Create “…”" when this
+     * method exists. It can open a dialog, and resolves with the reference of the new item, or with
+     * `null` when nothing was created.
+     */
+    create?(resource: string, text: string): Promise<RelationReference | null>;
+    /** Whether `create()` can create items of a resource. Defaults to true. */
+    canCreate?(resource: string): boolean;
 }
-/** What `createRelationSource()` needs from an adapter: the `list()` of `@panneau/data`. */
+/** What `createRelationSource()` needs from an adapter: the `list()`, `get()` and `create()` of `@panneau/data`. */
 export interface RelationListAdapter {
     list(resource: string, query?: ListQuery, options?: {
         signal?: AbortSignal;
     }): Promise<{
         data: Item[];
     }>;
+    /** One item, for `resolve()`. Without it, the source doesn't resolve ids. */
+    get?(resource: string, id: string, options?: {
+        signal?: AbortSignal;
+    }): Promise<Item>;
+    /** Creates an item, for `create()`. */
+    create?(resource: string, values: Record<string, unknown>): Promise<Item>;
 }
 export interface RelationSourceOptions {
     /** The definition, for the field that titles the items of each resource (`itemTitle`). */
-    definition?: Pick<Definition, 'resources'> | null;
+    definition?: (Pick<Definition, 'resources'> & Partial<Pick<Definition, 'locales'>>) | null;
     /** Items per search. Defaults to 20. */
     perPage?: number;
     /** The label of an item, when `itemTitle` isn't enough. */
     getLabel?: (item: Item, resource: string) => string;
+    /**
+     * Lets the picker create items, with the adapter's `create()`. `true` sets the typed text as the
+     * value of the resource's `itemTitle` field (in every locale of the definition when it is
+     * localized), on the resources that allow `create`. A function gives the values of the new item
+     * instead, or `null` for a resource where items can't be created.
+     */
+    create?: boolean | ((text: string, resource: string) => Record<string, unknown> | null);
 }
 /**
- * A relation source over an adapter's `list()`, such as the `DataAdapter` of `@panneau/data`: a
- * search is a list query with `q`. Labels come from the resource's `itemTitle`.
+ * A relation source over an adapter, such as the `DataAdapter` of `@panneau/data`: a search is a
+ * list query with `q`, ids are resolved with `get()`, and, with the `create` option, items are
+ * created with `create()`. Labels come from the resource's `itemTitle`.
  */
-export declare function createRelationSource(adapter: RelationListAdapter, { definition, perPage, getLabel }?: RelationSourceOptions): RelationSource;
+export declare function createRelationSource(adapter: RelationListAdapter, { definition, perPage, getLabel, create }?: RelationSourceOptions): RelationSource;
 /** Reads relation values: references, ids, or lists of them. */
 export declare function toReferences(value: unknown): RelationReference[];
+/**
+ * Relation references with the labels of plain ids: references whose label is their id (from
+ * `"12"`) are resolved with the source's `resolve()`, once per source, resource and id. They keep
+ * their id as label until then, or when the source doesn't find them.
+ */
+export declare function useRelationReferences(source: RelationSource | null, resource: string, references: readonly RelationReference[]): RelationReference[];
 //# sourceMappingURL=relation.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"relation.d.ts","sourceRoot":"","sources":["../../src/shared/relation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAErE,qFAAqF;AACrF,MAAM,WAAW,iBAAiB;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,8CAA8C;AAC9C,MAAM,WAAW,cAAc;IAC3B,6DAA6D;IAC7D,MAAM,CACF,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE;QAAE,MAAM,EAAE,WAAW,CAAA;KAAE,GACjC,OAAO,CAAC,iBAAiB,EAAE,CAAC,CAAC;CACnC;AAED,4FAA4F;AAC5F,MAAM,WAAW,mBAAmB;IAChC,IAAI,CACA,QAAQ,EAAE,MAAM,EAChB,KAAK,CAAC,EAAE,SAAS,EACjB,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,WAAW,CAAA;KAAE,GACnC,OAAO,CAAC;QAAE,IAAI,EAAE,IAAI,EAAE,CAAA;KAAE,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,qBAAqB;IAClC,0FAA0F;IAC1F,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,IAAI,CAAC;IAClD,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;CACvD;AAeD;;;GAGG;AACH,wBAAgB,oBAAoB,CAChC,OAAO,EAAE,mBAAmB,EAC5B,EAAE,UAAiB,EAAE,OAAY,EAAE,QAAQ,EAAE,GAAE,qBAA0B,GAC1E,cAAc,CAkBhB;AAED,gEAAgE;AAChE,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,iBAAiB,EAAE,CAkBhE"}
+{"version":3,"file":"relation.d.ts","sourceRoot":"","sources":["../../src/shared/relation.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAErE,qFAAqF;AACrF,MAAM,WAAW,iBAAiB;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,8CAA8C;AAC9C,MAAM,WAAW,cAAc;IAC3B,6DAA6D;IAC7D,MAAM,CACF,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE;QAAE,MAAM,EAAE,WAAW,CAAA;KAAE,GACjC,OAAO,CAAC,iBAAiB,EAAE,CAAC,CAAC;IAChC;;;;OAIG;IACH,OAAO,CAAC,CACJ,QAAQ,EAAE,MAAM,EAChB,GAAG,EAAE,SAAS,MAAM,EAAE,EACtB,OAAO,EAAE;QAAE,MAAM,EAAE,WAAW,CAAA;KAAE,GACjC,OAAO,CAAC,iBAAiB,EAAE,CAAC,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC3E,2EAA2E;IAC3E,SAAS,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;CACzC;AAED,oHAAoH;AACpH,MAAM,WAAW,mBAAmB;IAChC,IAAI,CACA,QAAQ,EAAE,MAAM,EAChB,KAAK,CAAC,EAAE,SAAS,EACjB,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,WAAW,CAAA;KAAE,GACnC,OAAO,CAAC;QAAE,IAAI,EAAE,IAAI,EAAE,CAAA;KAAE,CAAC,CAAC;IAC7B,6EAA6E;IAC7E,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,WAAW,CAAA;KAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtF,uCAAuC;IACvC,MAAM,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7E;AAED,MAAM,WAAW,qBAAqB;IAClC,0FAA0F;IAC1F,UAAU,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC3F,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IACpD;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC;CAC3F;AAeD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAChC,OAAO,EAAE,mBAAmB,EAC5B,EAAE,UAAiB,EAAE,OAAY,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAE,qBAA0B,GAClF,cAAc,CAgEhB;AAED,gEAAgE;AAChE,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,iBAAiB,EAAE,CAkBhE;AAiDD;;;;GAIG;AACH,wBAAgB,qBAAqB,CACjC,MAAM,EAAE,cAAc,GAAG,IAAI,EAC7B,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,SAAS,iBAAiB,EAAE,GACzC,iBAAiB,EAAE,CA2CrB"}

package/dist/shared/relation.js

@@ -1,3 +1,5 @@
+import { c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
 //#region src/shared/relation.ts
 function labelOf(value, locale) {
 	if (typeof value === "string" || typeof value === "number") return String(value);
@@ -9,22 +11,48 @@ function labelOf(value, locale) {
 	return null;
 }
 /**
-* A relation source over an adapter's `list()`, such as the `DataAdapter` of `@panneau/data`: a
-* search is a list query with `q`. Labels come from the resource's `itemTitle`.
+* A relation source over an adapter, such as the `DataAdapter` of `@panneau/data`: a search is a
+* list query with `q`, ids are resolved with `get()`, and, with the `create` option, items are
+* created with `create()`. Labels come from the resource's `itemTitle`.
 */
-function createRelationSource(adapter, { definition = null, perPage = 20, getLabel } = {}) {
-	return { async search(resource, query, { signal }) {
-		const response = await adapter.list(resource, {
+function createRelationSource(adapter, { definition = null, perPage = 20, getLabel, create } = {}) {
+	const resourceOf = (resource) => definition?.resources.find((candidate) => candidate.id === resource);
+	const toReference = (item, resource) => {
+		const titleField = resourceOf(resource)?.itemTitle;
+		return {
+			id: item.id,
+			label: getLabel?.(item, resource) ?? (titleField !== void 0 ? labelOf(item[titleField]) : null) ?? item.id
+		};
+	};
+	const valuesOf = (text, resource) => {
+		if (typeof create === "function") return create(text, resource);
+		const definitionResource = resourceOf(resource);
+		const titleField = definitionResource?.itemTitle;
+		if (definitionResource === void 0 || titleField === void 0) return null;
+		const field = definitionResource.fields.find((candidate) => candidate.name === titleField);
+		const locales = definition?.locales ?? [];
+		return { [titleField]: field?.localized === true && locales.length > 0 ? Object.fromEntries(locales.map((locale) => [locale, text])) : text };
+	};
+	const source = { async search(resource, query, { signal }) {
+		return (await adapter.list(resource, {
 			page: 1,
 			perPage,
 			...query !== "" ? { q: query } : {}
-		}, { signal });
-		const titleField = definition?.resources.find((r) => r.id === resource)?.itemTitle;
-		return response.data.map((item) => ({
-			id: item.id,
-			label: getLabel?.(item, resource) ?? (titleField !== void 0 ? labelOf(item[titleField]) : null) ?? item.id
-		}));
+		}, { signal })).data.map((item) => toReference(item, resource));
 	} };
+	const { get, create: createItem } = adapter;
+	if (get !== void 0) source.resolve = async (resource, ids, { signal }) => {
+		return (await Promise.allSettled(ids.map((id) => get.call(adapter, resource, id, { signal })))).flatMap((result) => result.status === "fulfilled" ? [toReference(result.value, resource)] : []);
+	};
+	if (create !== void 0 && create !== false && createItem !== void 0) {
+		source.canCreate = (resource) => resourceOf(resource)?.abilities?.create !== false && valuesOf("", resource) !== null;
+		source.create = async (resource, text) => {
+			const values = valuesOf(text, resource);
+			if (values === null) return null;
+			return toReference(await createItem.call(adapter, resource, values), resource);
+		};
+	}
+	return source;
 }
 /** Reads relation values: references, ids, or lists of them. */
 function toReferences(value) {
@@ -43,7 +71,86 @@ function toReferences(value) {
 		return [];
 	});
 }
+var resolved = /* @__PURE__ */ new WeakMap();
+function resolvedOf(source) {
+	let entry = resolved.get(source);
+	if (entry === void 0) {
+		entry = {
+			labels: /* @__PURE__ */ new Map(),
+			pending: /* @__PURE__ */ new Map()
+		};
+		resolved.set(source, entry);
+	}
+	return entry;
+}
+var keyOf = (resource, id) => `${resource}\u0000${id}`;
+/** Resolves the ids that no request has resolved or is resolving yet, and waits for all of them. */
+function resolveIds(source, resource, ids) {
+	const { labels, pending } = resolvedOf(source);
+	const fresh = ids.filter((id) => !pending.has(keyOf(resource, id)));
+	if (fresh.length > 0 && source.resolve !== void 0) {
+		const request = source.resolve(resource, fresh, { signal: new AbortController().signal }).then((found) => {
+			fresh.forEach((id) => labels.set(keyOf(resource, id), found.find((candidate) => candidate.id === id)?.label ?? null));
+		}, () => {
+			fresh.forEach((id) => pending.delete(keyOf(resource, id)));
+		});
+		fresh.forEach((id) => pending.set(keyOf(resource, id), request));
+	}
+	return Promise.all(ids.map((id) => pending.get(keyOf(resource, id))));
+}
+/**
+* Relation references with the labels of plain ids: references whose label is their id (from
+* `"12"`) are resolved with the source's `resolve()`, once per source, resource and id. They keep
+* their id as label until then, or when the source doesn't find them.
+*/
+function useRelationReferences(source, resource, references) {
+	const $ = c(1);
+	const cache = source !== null ? resolvedOf(source).labels : null;
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {};
+		$[0] = t0;
+	} else t0 = $[0];
+	const [labels, setLabels] = useState(t0);
+	const label = (id) => labels[keyOf(resource, id)] ?? cache?.get(keyOf(resource, id)) ?? void 0;
+	const missingKey = (source?.resolve !== void 0 && cache !== null ? references.filter(_temp).map(_temp2).filter((id_0) => !cache.has(keyOf(resource, id_0))) : []).join("\0");
+	useEffect(() => {
+		const ids = missingKey === "" ? [] : missingKey.split("\0");
+		if (source === null || cache === null || ids.length === 0) return;
+		let active = true;
+		resolveIds(source, resource, ids).then(() => {
+			if (!active) return;
+			const next = {};
+			ids.forEach((id_1) => {
+				const found = cache.get(keyOf(resource, id_1));
+				if (typeof found === "string") next[keyOf(resource, id_1)] = found;
+			});
+			setLabels((current) => ({
+				...current,
+				...next
+			}));
+		});
+		return () => {
+			active = false;
+		};
+	}, [
+		source,
+		cache,
+		resource,
+		missingKey
+	]);
+	return references.map((reference_1) => reference_1.label === reference_1.id ? {
+		id: reference_1.id,
+		label: label(reference_1.id) ?? reference_1.id
+	} : reference_1);
+}
+function _temp2(reference_0) {
+	return reference_0.id;
+}
+function _temp(reference) {
+	return reference.label === reference.id;
+}
 //#endregion
-export { createRelationSource, toReferences };
+export { createRelationSource, toReferences, useRelationReferences };
 
 //# sourceMappingURL=relation.js.map

package/dist/shared/relation.js.map

@@ -1 +1 @@
-{"version":3,"file":"relation.js","names":[],"sources":["../../src/shared/relation.ts"],"sourcesContent":["import type { Definition, Item, ListQuery } from '@panneau/protocol';\n\n/** A related item: its id, and a label to show it. The value of a relation field. */\nexport interface RelationReference {\n    id: string;\n    label: string;\n}\n\n/** Where relation fields search for items. */\nexport interface RelationSource {\n    /** Items of a resource that match a text, for the picker. */\n    search(\n        resource: string,\n        query: string,\n        options: { signal: AbortSignal },\n    ): Promise<RelationReference[]>;\n}\n\n/** What `createRelationSource()` needs from an adapter: the `list()` of `@panneau/data`. */\nexport interface RelationListAdapter {\n    list(\n        resource: string,\n        query?: ListQuery,\n        options?: { signal?: AbortSignal },\n    ): Promise<{ data: Item[] }>;\n}\n\nexport interface RelationSourceOptions {\n    /** The definition, for the field that titles the items of each resource (`itemTitle`). */\n    definition?: Pick<Definition, 'resources'> | null;\n    /** Items per search. Defaults to 20. */\n    perPage?: number;\n    /** The label of an item, when `itemTitle` isn't enough. */\n    getLabel?: (item: Item, resource: string) => string;\n}\n\nfunction labelOf(value: unknown, locale?: string): string | null {\n    if (typeof value === 'string' || typeof value === 'number') {\n        return String(value);\n    }\n    if (value !== null && typeof value === 'object') {\n        const localized = value as Record<string, unknown>;\n        const first =\n            (locale !== undefined ? localized[locale] : undefined) ?? Object.values(localized)[0];\n        return typeof first === 'string' ? first : null;\n    }\n    return null;\n}\n\n/**\n * A relation source over an adapter's `list()`, such as the `DataAdapter` of `@panneau/data`: a\n * search is a list query with `q`. Labels come from the resource's `itemTitle`.\n */\nexport function createRelationSource(\n    adapter: RelationListAdapter,\n    { definition = null, perPage = 20, getLabel }: RelationSourceOptions = {},\n): RelationSource {\n    return {\n        async search(resource, query, { signal }) {\n            const response = await adapter.list(\n                resource,\n                { page: 1, perPage, ...(query !== '' ? { q: query } : {}) },\n                { signal },\n            );\n            const titleField = definition?.resources.find((r) => r.id === resource)?.itemTitle;\n            return response.data.map((item) => ({\n                id: item.id,\n                label:\n                    getLabel?.(item, resource) ??\n                    (titleField !== undefined ? labelOf(item[titleField]) : null) ??\n                    item.id,\n            }));\n        },\n    };\n}\n\n/** Reads relation values: references, ids, or lists of them. */\nexport function toReferences(value: unknown): RelationReference[] {\n    const list = Array.isArray(value)\n        ? value\n        : value === null || value === undefined\n          ? []\n          : [value];\n    return list.flatMap((entry: unknown) => {\n        if (typeof entry === 'string' || typeof entry === 'number') {\n            return [{ id: String(entry), label: String(entry) }];\n        }\n        if (entry !== null && typeof entry === 'object' && 'id' in entry) {\n            const { id, label } = entry as { id: unknown; label?: unknown };\n            if (typeof id === 'string' || typeof id === 'number') {\n                return [{ id: String(id), label: typeof label === 'string' ? label : String(id) }];\n            }\n        }\n        return [];\n    });\n}\n"],"mappings":";AAoCA,SAAS,QAAQ,OAAgB,QAAgC;CAC7D,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAC9C,OAAO,OAAO,KAAK;CAEvB,IAAI,UAAU,QAAQ,OAAO,UAAU,UAAU;EAC7C,MAAM,YAAY;EAClB,MAAM,SACD,WAAW,KAAA,IAAY,UAAU,UAAU,KAAA,MAAc,OAAO,OAAO,SAAS,CAAC,CAAC;EACvF,OAAO,OAAO,UAAU,WAAW,QAAQ;CAC/C;CACA,OAAO;AACX;;;;;AAMA,SAAgB,qBACZ,SACA,EAAE,aAAa,MAAM,UAAU,IAAI,aAAoC,CAAC,GAC1D;CACd,OAAO,EACH,MAAM,OAAO,UAAU,OAAO,EAAE,UAAU;EACtC,MAAM,WAAW,MAAM,QAAQ,KAC3B,UACA;GAAE,MAAM;GAAG;GAAS,GAAI,UAAU,KAAK,EAAE,GAAG,MAAM,IAAI,CAAC;EAAG,GAC1D,EAAE,OAAO,CACb;EACA,MAAM,aAAa,YAAY,UAAU,MAAM,MAAM,EAAE,OAAO,QAAQ,CAAC,EAAE;EACzE,OAAO,SAAS,KAAK,KAAK,UAAU;GAChC,IAAI,KAAK;GACT,OACI,WAAW,MAAM,QAAQ,MACxB,eAAe,KAAA,IAAY,QAAQ,KAAK,WAAW,IAAI,SACxD,KAAK;EACb,EAAE;CACN,EACJ;AACJ;;AAGA,SAAgB,aAAa,OAAqC;CAM9D,QALa,MAAM,QAAQ,KAAK,IAC1B,QACA,UAAU,QAAQ,UAAU,KAAA,IAC1B,CAAA,IACA,CAAC,KAAK,EAAA,CACF,SAAS,UAAmB;EACpC,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAC9C,OAAO,CAAC;GAAE,IAAI,OAAO,KAAK;GAAG,OAAO,OAAO,KAAK;EAAE,CAAC;EAEvD,IAAI,UAAU,QAAQ,OAAO,UAAU,YAAY,QAAQ,OAAO;GAC9D,MAAM,EAAE,IAAI,UAAU;GACtB,IAAI,OAAO,OAAO,YAAY,OAAO,OAAO,UACxC,OAAO,CAAC;IAAE,IAAI,OAAO,EAAE;IAAG,OAAO,OAAO,UAAU,WAAW,QAAQ,OAAO,EAAE;GAAE,CAAC;EAEzF;EACA,OAAO,CAAA;CACX,CAAC;AACL"}
+{"version":3,"file":"relation.js","names":["id","active","reference","_c"],"sources":["../../src/shared/relation.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { Definition, Item, ListQuery } from '@panneau/protocol';\n\n/** A related item: its id, and a label to show it. The value of a relation field. */\nexport interface RelationReference {\n    id: string;\n    label: string;\n}\n\n/** Where relation fields search for items. */\nexport interface RelationSource {\n    /** Items of a resource that match a text, for the picker. */\n    search(\n        resource: string,\n        query: string,\n        options: { signal: AbortSignal },\n    ): Promise<RelationReference[]>;\n    /**\n     * The references of items by id, for values that are only ids (`\"12\"`, `[\"12\", \"13\"]`), as a\n     * product's own API gives them. In any order; ids it doesn't find are left out, and keep their\n     * id as label. Without it, fields show the ids.\n     */\n    resolve?(\n        resource: string,\n        ids: readonly string[],\n        options: { signal: AbortSignal },\n    ): Promise<RelationReference[]>;\n    /**\n     * Creates an item from the text typed in the picker, which offers \"Create “…”\" when this\n     * method exists. It can open a dialog, and resolves with the reference of the new item, or with\n     * `null` when nothing was created.\n     */\n    create?(resource: string, text: string): Promise<RelationReference | null>;\n    /** Whether `create()` can create items of a resource. Defaults to true. */\n    canCreate?(resource: string): boolean;\n}\n\n/** What `createRelationSource()` needs from an adapter: the `list()`, `get()` and `create()` of `@panneau/data`. */\nexport interface RelationListAdapter {\n    list(\n        resource: string,\n        query?: ListQuery,\n        options?: { signal?: AbortSignal },\n    ): Promise<{ data: Item[] }>;\n    /** One item, for `resolve()`. Without it, the source doesn't resolve ids. */\n    get?(resource: string, id: string, options?: { signal?: AbortSignal }): Promise<Item>;\n    /** Creates an item, for `create()`. */\n    create?(resource: string, values: Record<string, unknown>): Promise<Item>;\n}\n\nexport interface RelationSourceOptions {\n    /** The definition, for the field that titles the items of each resource (`itemTitle`). */\n    definition?: (Pick<Definition, 'resources'> & Partial<Pick<Definition, 'locales'>>) | null;\n    /** Items per search. Defaults to 20. */\n    perPage?: number;\n    /** The label of an item, when `itemTitle` isn't enough. */\n    getLabel?: (item: Item, resource: string) => string;\n    /**\n     * Lets the picker create items, with the adapter's `create()`. `true` sets the typed text as the\n     * value of the resource's `itemTitle` field (in every locale of the definition when it is\n     * localized), on the resources that allow `create`. A function gives the values of the new item\n     * instead, or `null` for a resource where items can't be created.\n     */\n    create?: boolean | ((text: string, resource: string) => Record<string, unknown> | null);\n}\n\nfunction labelOf(value: unknown, locale?: string): string | null {\n    if (typeof value === 'string' || typeof value === 'number') {\n        return String(value);\n    }\n    if (value !== null && typeof value === 'object') {\n        const localized = value as Record<string, unknown>;\n        const first =\n            (locale !== undefined ? localized[locale] : undefined) ?? Object.values(localized)[0];\n        return typeof first === 'string' ? first : null;\n    }\n    return null;\n}\n\n/**\n * A relation source over an adapter, such as the `DataAdapter` of `@panneau/data`: a search is a\n * list query with `q`, ids are resolved with `get()`, and, with the `create` option, items are\n * created with `create()`. Labels come from the resource's `itemTitle`.\n */\nexport function createRelationSource(\n    adapter: RelationListAdapter,\n    { definition = null, perPage = 20, getLabel, create }: RelationSourceOptions = {},\n): RelationSource {\n    const resourceOf = (resource: string) =>\n        definition?.resources.find((candidate) => candidate.id === resource);\n    const toReference = (item: Item, resource: string): RelationReference => {\n        const titleField = resourceOf(resource)?.itemTitle;\n        return {\n            id: item.id,\n            label:\n                getLabel?.(item, resource) ??\n                (titleField !== undefined ? labelOf(item[titleField]) : null) ??\n                item.id,\n        };\n    };\n    const valuesOf = (text: string, resource: string): Record<string, unknown> | null => {\n        if (typeof create === 'function') {\n            return create(text, resource);\n        }\n        const definitionResource = resourceOf(resource);\n        const titleField = definitionResource?.itemTitle;\n        if (definitionResource === undefined || titleField === undefined) {\n            return null;\n        }\n        const field = definitionResource.fields.find((candidate) => candidate.name === titleField);\n        const locales = definition?.locales ?? [];\n        return {\n            [titleField]:\n                field?.localized === true && locales.length > 0\n                    ? Object.fromEntries(locales.map((locale) => [locale, text]))\n                    : text,\n        };\n    };\n    const source: RelationSource = {\n        async search(resource, query, { signal }) {\n            const response = await adapter.list(\n                resource,\n                { page: 1, perPage, ...(query !== '' ? { q: query } : {}) },\n                { signal },\n            );\n            return response.data.map((item) => toReference(item, resource));\n        },\n    };\n    const { get, create: createItem } = adapter;\n    if (get !== undefined) {\n        source.resolve = async (resource, ids, { signal }) => {\n            const results = await Promise.allSettled(\n                ids.map((id) => get.call(adapter, resource, id, { signal })),\n            );\n            return results.flatMap((result) =>\n                result.status === 'fulfilled' ? [toReference(result.value, resource)] : [],\n            );\n        };\n    }\n    if (create !== undefined && create !== false && createItem !== undefined) {\n        source.canCreate = (resource) =>\n            resourceOf(resource)?.abilities?.create !== false && valuesOf('', resource) !== null;\n        source.create = async (resource, text) => {\n            const values = valuesOf(text, resource);\n            if (values === null) {\n                return null;\n            }\n            return toReference(await createItem.call(adapter, resource, values), resource);\n        };\n    }\n    return source;\n}\n\n/** Reads relation values: references, ids, or lists of them. */\nexport function toReferences(value: unknown): RelationReference[] {\n    const list = Array.isArray(value)\n        ? value\n        : value === null || value === undefined\n          ? []\n          : [value];\n    return list.flatMap((entry: unknown) => {\n        if (typeof entry === 'string' || typeof entry === 'number') {\n            return [{ id: String(entry), label: String(entry) }];\n        }\n        if (entry !== null && typeof entry === 'object' && 'id' in entry) {\n            const { id, label } = entry as { id: unknown; label?: unknown };\n            if (typeof id === 'string' || typeof id === 'number') {\n                return [{ id: String(id), label: typeof label === 'string' ? label : String(id) }];\n            }\n        }\n        return [];\n    });\n}\n\ninterface ResolvedLabels {\n    /** Labels by resource and id: `null` for ids that the source didn't find. */\n    labels: Map<string, string | null>;\n    /** Requests in flight, so that fields with the same ids share one. */\n    pending: Map<string, Promise<void>>;\n}\n\nconst resolved = new WeakMap<RelationSource, ResolvedLabels>();\n\nfunction resolvedOf(source: RelationSource): ResolvedLabels {\n    let entry = resolved.get(source);\n    if (entry === undefined) {\n        entry = { labels: new Map(), pending: new Map() };\n        resolved.set(source, entry);\n    }\n    return entry;\n}\n\nconst keyOf = (resource: string, id: string) => `${resource}\\u0000${id}`;\n\n/** Resolves the ids that no request has resolved or is resolving yet, and waits for all of them. */\nfunction resolveIds(source: RelationSource, resource: string, ids: readonly string[]) {\n    const { labels, pending } = resolvedOf(source);\n    const fresh = ids.filter((id) => !pending.has(keyOf(resource, id)));\n    if (fresh.length > 0 && source.resolve !== undefined) {\n        // Shared by every field that asks for these ids: it isn't aborted when one unmounts.\n        const request = source\n            .resolve(resource, fresh, { signal: new AbortController().signal })\n            .then(\n                (found) => {\n                    fresh.forEach((id) =>\n                        labels.set(\n                            keyOf(resource, id),\n                            found.find((candidate) => candidate.id === id)?.label ?? null,\n                        ),\n                    );\n                },\n                () => {\n                    // Tried again the next time a field shows these ids.\n                    fresh.forEach((id) => pending.delete(keyOf(resource, id)));\n                },\n            );\n        fresh.forEach((id) => pending.set(keyOf(resource, id), request));\n    }\n    return Promise.all(ids.map((id) => pending.get(keyOf(resource, id))));\n}\n\n/**\n * Relation references with the labels of plain ids: references whose label is their id (from\n * `\"12\"`) are resolved with the source's `resolve()`, once per source, resource and id. They keep\n * their id as label until then, or when the source doesn't find them.\n */\nexport function useRelationReferences(\n    source: RelationSource | null,\n    resource: string,\n    references: readonly RelationReference[],\n): RelationReference[] {\n    const cache = source !== null ? resolvedOf(source).labels : null;\n    const [labels, setLabels] = useState<Readonly<Record<string, string>>>({});\n    const label = (id: string): string | undefined =>\n        labels[keyOf(resource, id)] ?? cache?.get(keyOf(resource, id)) ?? undefined;\n    const missing =\n        source?.resolve !== undefined && cache !== null\n            ? references\n                  .filter((reference) => reference.label === reference.id)\n                  .map((reference) => reference.id)\n                  .filter((id) => !cache.has(keyOf(resource, id)))\n            : [];\n    const missingKey = missing.join('\\u0000');\n\n    useEffect(() => {\n        const ids = missingKey === '' ? [] : missingKey.split('\\u0000');\n        if (source === null || cache === null || ids.length === 0) {\n            return undefined;\n        }\n        let active = true;\n        void resolveIds(source, resource, ids).then(() => {\n            if (!active) {\n                return;\n            }\n            const next: Record<string, string> = {};\n            ids.forEach((id) => {\n                const found = cache.get(keyOf(resource, id));\n                if (typeof found === 'string') {\n                    next[keyOf(resource, id)] = found;\n                }\n            });\n            setLabels((current) => ({ ...current, ...next }));\n        });\n        return () => {\n            active = false;\n        };\n    }, [source, cache, resource, missingKey]);\n\n    return references.map((reference) =>\n        reference.label === reference.id\n            ? { id: reference.id, label: label(reference.id) ?? reference.id }\n            : reference,\n    );\n}\n"],"mappings":"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"}

package/dist/url/UrlField.css

@@ -1,4 +1,4 @@
-.panneau-open-bOtJNo {
+.panneau-url-field-open {
     display: inline-flex;
     align-items: center;
     padding: var(--panneau-space-1);
@@ -6,6 +6,6 @@
     border-radius: var(--panneau-radius-sm);
 }
 
-.panneau-open-bOtJNo:hover {
+.panneau-url-field-open:hover {
     color: var(--panneau-color-text);
 }

package/dist/url/UrlField.module.js

@@ -1,6 +1,6 @@
 import "./UrlField.css";
 //#region src/url/UrlField.module.css
-var open = "panneau-open-bOtJNo";
+var open = "panneau-url-field-open";
 var UrlField_module_default = { open };
 //#endregion
 export { UrlField_module_default as default, open };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/fields",
-    "version": "5.0.0-alpha.0",
+    "version": "5.0.0-alpha.2",
     "description": "Controlled field components of Panneau for the protocol's built-in field types, one subpath per field.",
     "type": "module",
     "license": "MIT",
@@ -122,9 +122,9 @@
     },
     "dependencies": {
         "@internationalized/date": "^3.12.4",
-        "@panneau/intl": "5.0.0-alpha.0",
-        "@panneau/protocol": "5.0.0-alpha.0",
-        "@panneau/ui": "5.0.0-alpha.0",
+        "@panneau/intl": "5.0.0-alpha.2",
+        "@panneau/protocol": "5.0.0-alpha.2",
+        "@panneau/ui": "5.0.0-alpha.2",
         "lucide-react": "^1.57.0"
     }
 }