@sincpro/web-framework 0.1.0 → 0.2.0

package/dist/web/list/EntitySearchBar.js

@@ -1,16 +1,40 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { matching } from "@sincpro/criteria";
 import { frameworkCopy } from "../../core/copy.js";
+import { groupableOf } from "./groups.js";
 import { facetsOf, modelOf } from "./search.js";
-import { CriteriaBuilder, describeFilter, Dialog, filterCriteria, hasNamed, SearchBar, toggleNamed, whereOf, } from "@sincpro/web-ui";
-import { useMemo, useState } from "react";
-export function EntitySearchBar({ listing, filters = [], }) {
+import { CriteriaBuilder, describeFilter, Dialog, fillCopy, filterCriteria, GroupingLevels, hasNamed, SearchBar, toggleNamed, useGroupingControl, useUiCopy, whereOf, } from "@sincpro/web-ui";
+import { useEffect, useMemo, useRef, useState } from "react";
+/** No grouping: one constant, so the control is not handed a new array on every render. */
+const NO_LEVELS = [];
+export function EntitySearchBar({ listing, filters = [], groups, seed, }) {
     const copy = frameworkCopy().list;
     const { meta, locale } = listing;
     const [put, setPut] = useState([]);
     const [building, setBuilding] = useState(false);
     const model = useMemo(() => (meta ? modelOf(meta, locale) : undefined), [meta, locale]);
     const facets = useMemo(() => (meta ? facetsOf(meta, locale) : []), [meta, locale]);
+    const groupable = useMemo(() => groupableOf(meta, locale), [meta, locale]);
+    const ui = useUiCopy();
+    const seeded = useRef(false);
+    useEffect(() => {
+        if (seeded.current || seed === undefined || seed === "" || meta?.search == null)
+            return;
+        seeded.current = true;
+        const where = matching(meta, seed).where;
+        if (where === undefined)
+            return;
+        const chip = filterCriteria(where, fillCopy(ui.search.literalChip, { text: seed }));
+        setPut([chip]);
+        listing.filter(whereOf([chip]));
+        // Once the definition is known; what the person changes afterwards is theirs.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [meta, seed]);
+    const control = useGroupingControl({
+        levels: groups?.levels ?? NO_LEVELS,
+        onLevelsChange: (next) => groups?.group(next),
+    });
     if (model === undefined)
         return null;
     const place = (next) => {
@@ -34,7 +58,13 @@ export function EntitySearchBar({ listing, filters = [], }) {
                             if (named !== undefined)
                                 place(toggleNamed(put, { ...named, where: named.where }));
                         },
-                    }), onOpenBuilder: () => setBuilding(true) }), building ? (_jsx(Dialog, { open: true, width: "lg", title: copy.builder, onClose: () => setBuilding(false), children: _jsx(CriteriaBuilder, { model: model, ...(whereOf(put) === undefined ? {} : { initial: { where: whereOf(put) } }), onApply: (built) => {
+                    }), ...(groups === undefined || groupable.length === 0
+                    ? {}
+                    : { grouping: _jsx(GroupingLevels, { fields: groupable, control: control }) }), onOpenBuilder: () => setBuilding(true), ...(meta?.search == null
+                    ? {}
+                    : {
+                        literal: (text) => matching(meta, text).where ?? null,
+                    }) }), building ? (_jsx(Dialog, { open: true, width: "lg", title: copy.builder, onClose: () => setBuilding(false), children: _jsx(CriteriaBuilder, { model: model, ...(whereOf(put) === undefined ? {} : { initial: { where: whereOf(put) } }), onApply: (built) => {
                         place(built?.where === undefined
                             ? []
                             : [filterCriteria(built.where, describeFilter(built.where, model))]);

package/dist/web/list/groups.d.ts

@@ -0,0 +1,15 @@
+import { type AnyRecord, type Bucket, type Meta } from "@sincpro/criteria";
+import type { GroupLevel } from "../../react/useGroups.js";
+import { type GroupableField, type Pile } from "@sincpro/web-ui";
+/** The fields the model says may split a set (`groupable`), in its words. The identity splits
+ *  into groups of one, and the version means nothing to a person: neither is offered. */
+export declare function groupableOf(meta: Meta | null, locale?: string): GroupableField[];
+/**
+ * The server's groups as piles, with the words a person reads, and each pile's group so that
+ * opening one reads its rows. Rows sit only on the deepest level, once read.
+ */
+export declare function pilesOf<T extends AnyRecord>(buckets: readonly Bucket<T>[], levels: readonly GroupLevel[], meta: Meta | null, locale: string | undefined, rowsOf: (bucket: Bucket<T>) => readonly T[] | undefined): {
+    piles: Pile<T>[];
+    bucketAt: ReadonlyMap<string, Bucket<T>>;
+    deepest: number;
+};

package/dist/web/list/groups.js

@@ -0,0 +1,73 @@
+import { labelOf } from "@sincpro/criteria";
+import { frameworkCopy } from "../../core/copy.js";
+import { detailOf } from "../../core/measure.js";
+import { textOf } from "../../core/present.js";
+import { dateLabel, pathKey, } from "@sincpro/web-ui";
+/**
+ * Grouping, as web-ui draws it: which fields may split a set, and the server's groups as the
+ * piles a `List` shows.
+ *
+ * Context: web-ui keeps «what was asked» (`GroupLevel`) apart from «what is drawn» (`Pile`)
+ * precisely so that piles can come counted from whoever keeps the data. These are the two
+ * translations from the model and from criteria's `Bucket`.
+ */
+/** The cuts a date offers, coarse to fine — web-ui orders the levels by them. */
+const DATE_GRAINS = ["year", "quarter", "month", "week", "day"];
+/** The fields the model says may split a set (`groupable`), in its words. The identity splits
+ *  into groups of one, and the version means nothing to a person: neither is offered. */
+export function groupableOf(meta, locale) {
+    if (meta === null)
+        return [];
+    return Object.entries(meta.fields)
+        .filter(([name, field]) => field.groupable === true &&
+        field.kind === "scalar" &&
+        name !== meta.identity &&
+        name !== "version")
+        .map(([name, field]) => ({
+        field: name,
+        label: labelOf(meta, name, locale),
+        ...(field.type === "date" || field.type === "datetime" ? { grains: DATE_GRAINS } : {}),
+    }));
+}
+/**
+ * The server's groups as piles, with the words a person reads, and each pile's group so that
+ * opening one reads its rows. Rows sit only on the deepest level, once read.
+ */
+export function pilesOf(buckets, levels, meta, locale, rowsOf) {
+    const bucketAt = new Map();
+    const none = frameworkCopy().list.noValue;
+    const labelFor = (bucket, depth, key) => {
+        const level = levels[depth];
+        if (bucket.value === null || bucket.value === undefined || bucket.value === "")
+            return none;
+        if (level?.grain) {
+            const within = levels
+                .slice(0, depth)
+                .flatMap((one) => (one.field === level.field && one.grain ? [one.grain] : []));
+            return dateLabel(key, level.grain, within);
+        }
+        return textOf(meta, bucket.field, bucket.value, locale) || key;
+    };
+    const detailed = (bucket) => {
+        const detail = detailOf(meta, bucket.measures, locale);
+        return detail === undefined ? {} : { detail };
+    };
+    const walk = (level, above, depth) => level.map((bucket) => {
+        const key = bucket.value === null || bucket.value === undefined ? "" : String(bucket.value);
+        const path = [...above, key];
+        bucketAt.set(pathKey(path), bucket);
+        const below = bucket.groups ?? [];
+        return {
+            path,
+            depth,
+            field: bucket.field,
+            key,
+            label: labelFor(bucket, depth, key),
+            count: bucket.count,
+            ...detailed(bucket),
+            items: below.length === 0 ? [...(rowsOf(bucket) ?? [])] : [],
+            piles: walk(below, path, depth + 1),
+        };
+    });
+    return { piles: walk(buckets, [], 0), bucketAt, deepest: levels.length - 1 };
+}

package/dist/web/list/rowCommands.d.ts

@@ -0,0 +1,41 @@
+import { type AnyRecord, type Expression } from "@sincpro/criteria";
+import type { Listing } from "../../react/useListing.js";
+import type { RowAction } from "@sincpro/web-ui";
+import type { LucideIcon } from "lucide-react";
+/**
+ * An entity's Commands as the actions of a row: «Confirmar» on each invoice, without opening it.
+ *
+ * Context: web-ui draws a row's actions (`rowActions`) and knows nothing of what they do; the
+ * entity knows its Commands and their routes. This joins them, with the rules a Command keeps
+ * everywhere: sent once per gesture with its `Idempotency-Key` (a retry is the same Command),
+ * the row's action disabled while it runs, and the list read again when it is done — the server
+ * says what the row became. `when` is a condition over the row, evaluated the way the server's
+ * hints are (`matches`): «Confirmar» only on drafts.
+ *
+ * Only Commands that can be undone belong on a row. One that destroys is confirmed by its dry
+ * run, and that is the record's `CommandButton`, where the consequence has room to be read.
+ *
+ *     const commands = useRowCommands(listing, [
+ *       { command: "confirmar", label: "Confirmar", icon: Check,
+ *         when: { field: "state", operator: "=", value: "draft" } },
+ *     ]);
+ *     <EntityList listing={listing} rowActions={commands.rowActions} />
+ */
+export type RowCommand<T> = {
+    /** A Command the entity declares (`entity({ commands })`). */
+    command: string;
+    label: string;
+    icon: LucideIcon;
+    tone?: RowAction["tone"];
+    /** Offered only on rows that hold it — a hint, not protection: the server decides. */
+    when?: Expression<T>;
+    /** What the Command is sent with. Without it, an empty body: the route names the row. */
+    body?: (row: T) => AnyRecord;
+};
+export type RowCommands<T> = {
+    rowActions: (row: T) => readonly RowAction[];
+    /** The last refusal, until `dismiss`. */
+    error: unknown;
+    dismiss: () => void;
+};
+export declare function useRowCommands<T extends AnyRecord>(listing: Listing<T>, commands: readonly RowCommand<T>[]): RowCommands<T>;

package/dist/web/list/rowCommands.js

@@ -0,0 +1,56 @@
+"use client";
+import { matches } from "@sincpro/criteria";
+import { pathFor } from "../../core/entity.js";
+import { retryKeys } from "../../core/retry.js";
+import { useFramework } from "../../react/context.js";
+import { useCallback, useState } from "react";
+export function useRowCommands(listing, commands) {
+    const { transport } = useFramework();
+    const [running, setRunning] = useState(new Set());
+    const [error, setError] = useState(null);
+    // One key per row and Command, kept while it goes unanswered: retrying is the same gesture.
+    const [keys] = useState(() => new Map());
+    const { entity, meta } = listing;
+    const key = meta?.get_id || meta?.identity || "id";
+    const run = useCallback(async (one, row) => {
+        const route = entity.commands[one.command];
+        if (route === undefined)
+            throw new Error(`${entity.key} declares no command "${one.command}"`);
+        const id = String(row[key]);
+        const gesture = `${one.command}\u0000${id}`;
+        const retry = keys.get(gesture) ?? retryKeys();
+        keys.set(gesture, retry);
+        const body = one.body?.(row) ?? {};
+        setRunning((now) => new Set(now).add(gesture));
+        setError(null);
+        try {
+            await transport.send(route.method, pathFor(route, id), body, undefined, {
+                idempotencyKey: retry.keyFor(body),
+            });
+            retry.settle(null);
+            listing.reload();
+        }
+        catch (failure) {
+            retry.settle(failure);
+            setError(failure);
+        }
+        finally {
+            setRunning((now) => {
+                const next = new Set(now);
+                next.delete(gesture);
+                return next;
+            });
+        }
+    }, [transport, entity, key, keys, listing]);
+    const rowActions = (row) => commands
+        .filter((one) => meta === null || one.when === undefined || matches(row, one.when, meta))
+        .map((one) => ({
+        id: one.command,
+        label: one.label,
+        icon: one.icon,
+        ...(one.tone === undefined ? {} : { tone: one.tone }),
+        disabled: running.has(`${one.command}\u0000${String(row[key])}`),
+        onSelect: () => void run(one, row),
+    }));
+    return { rowActions, error, dismiss: () => setError(null) };
+}

package/dist/web/record/EntityPicker.d.ts

@@ -1,26 +1,55 @@
-import type { AnyRecord } from "@sincpro/criteria";
+import type { AnyRecord, Criteria } from "@sincpro/criteria";
 import type { Entity } from "../../core/entity.js";
+import { type ListDefinition } from "../../core/list.js";
+import { type OpenTarget } from "@sincpro/web-ui";
 /**
  * A many2one: pick ONE record of an entity — web-ui's `Picker` fed by `useLookup`, with a way
  * into the whole set however big it is.
  *
- * Context: two ways to choose, for two sizes. The picker holds the first page of choices and
- * narrows it as you type — instant for a set of tens. For a set of millions, «browse
- * everything» opens a chooser: the entity's full list, searched, ordered and paged by the
- * SERVER, where clicking a row answers the field. web-ui's `Picker` keeps what is typed to
- * itself and cannot ask the server by text; the chooser is how this scales without it.
+ * Context: two ways to choose, for two sizes. The picker opens on the first ten in the entity's
+ * order, and what is typed is the entity's literal search, asked of the SERVER (`Picker
+ * onSearch`): the record 123 455 of 200 000 is found by its name. The chosen one keeps its name
+ * when it is not among the ten (`valueLabel`). For a question the ten cannot answer — two of the
+ * same name, a column to compare — «Buscar más…» opens a chooser: the entity's full list,
+ * searched, ordered and paged by the server, where clicking a row answers the field. An entity
+ * without a search template is filtered where it is.
  *
  * Inside a workspace, «open» and the chooser can be the composer's instead (`api.open`,
- * `api.pick`): pass `onOpen` / `onBrowseAll` and they replace the defaults.
+ * `api.pick`): pass `onOpen` / `onBrowseAll` and they replace the defaults — `chooserIn(api,
+ * entity, onChange)` is that `onBrowseAll`.
+ *
+ * `criteria` narrows what may be chosen — the contacts of the chosen customer — in the picker
+ * and in its chooser alike; the server applies it, and a new one starts the choices over. A
+ * named list (`defineList`) does the same declared once: «active customers» brings its cut, its
+ * columns and its title to the chooser.
+ *
+ * The chooser is ALWAYS one click away (`browse`, on by default): web-ui's `Picker` offers
+ * «see all…» only while it holds rows it does not draw, so with a short first page there was no
+ * way to the server's literal search. The chooser is a table — the columns the list declares,
+ * or `columns` — searched by the entity's literal search on the server.
+ *
+ *     <EntityPicker entity={customers} value={id} onChange={set} />
+ *     <EntityPicker entity={activeCustomers} columns={["name", "tax_id", "city"]} … />
  */
-export declare function EntityPicker<T extends AnyRecord>({ entity, value, onChange, onOpen, onBrowseAll, placeholder, disabled, "aria-label": ariaLabel, }: {
-    entity: Entity<T>;
+export declare function EntityPicker<T extends AnyRecord>({ entity, value, onChange, onOpen, openTargets, onBrowseAll, criteria, columns, browse, placeholder, disabled, "aria-label": ariaLabel, }: {
+    /** What is chosen from: an entity, or a named list of it (its cut, columns and title). */
+    entity: Entity<T> | ListDefinition<T>;
+    /** The chooser's columns. Without it, the named list's, or every scalar field. */
+    columns?: readonly string[];
+    /** A button beside the field that opens the chooser: the server's literal search, as a table. */
+    browse?: boolean;
+    /** Which records may be chosen at all: applied by the server under what is typed. */
+    criteria?: Criteria<T>;
     value?: string;
     onChange: (id: string) => void;
-    /** Open the chosen record — in composer, `(id) => api.open(entity.ref(id), { to: "window" })`. */
-    onOpen?: (id: string) => void;
-    /** Replace the built-in chooser — in composer, `api.pick(entity.ref(), …)`. */
-    onBrowseAll?: () => void;
+    /** Open the chosen record where the person asked — in composer,
+     *  `(id, to) => openIn(api, entity.ref(id), to)`. */
+    onOpen?: (id: string, to: OpenTarget) => void;
+    /** Where it may open, the default first (a modal; from inside a modal, beside). */
+    openTargets?: readonly OpenTarget[];
+    /** Replace the built-in chooser — in composer, `api.pick(entity.chooserRef(), …)`. It gets
+     *  what was typed, so the list opens on the same search. */
+    onBrowseAll?: (query: string) => void;
     placeholder?: string;
     disabled?: boolean;
     "aria-label"?: string;

package/dist/web/record/EntityPicker.js

@@ -1,39 +1,73 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { nameOf } from "@sincpro/criteria";
+import { frameworkCopy } from "../../core/copy.js";
+import { isList } from "../../core/list.js";
 import { useListing } from "../../react/useListing.js";
 import { useLookup } from "../../react/useLookup.js";
 import { EntityList } from "../list/EntityList.js";
-import { Dialog, Picker } from "@sincpro/web-ui";
+import { Dialog, IconButton, Picker } from "@sincpro/web-ui";
+import { TextSearch } from "lucide-react";
 import { useState } from "react";
 /**
  * A many2one: pick ONE record of an entity — web-ui's `Picker` fed by `useLookup`, with a way
  * into the whole set however big it is.
  *
- * Context: two ways to choose, for two sizes. The picker holds the first page of choices and
- * narrows it as you type — instant for a set of tens. For a set of millions, «browse
- * everything» opens a chooser: the entity's full list, searched, ordered and paged by the
- * SERVER, where clicking a row answers the field. web-ui's `Picker` keeps what is typed to
- * itself and cannot ask the server by text; the chooser is how this scales without it.
+ * Context: two ways to choose, for two sizes. The picker opens on the first ten in the entity's
+ * order, and what is typed is the entity's literal search, asked of the SERVER (`Picker
+ * onSearch`): the record 123 455 of 200 000 is found by its name. The chosen one keeps its name
+ * when it is not among the ten (`valueLabel`). For a question the ten cannot answer — two of the
+ * same name, a column to compare — «Buscar más…» opens a chooser: the entity's full list,
+ * searched, ordered and paged by the server, where clicking a row answers the field. An entity
+ * without a search template is filtered where it is.
  *
  * Inside a workspace, «open» and the chooser can be the composer's instead (`api.open`,
- * `api.pick`): pass `onOpen` / `onBrowseAll` and they replace the defaults.
+ * `api.pick`): pass `onOpen` / `onBrowseAll` and they replace the defaults — `chooserIn(api,
+ * entity, onChange)` is that `onBrowseAll`.
+ *
+ * `criteria` narrows what may be chosen — the contacts of the chosen customer — in the picker
+ * and in its chooser alike; the server applies it, and a new one starts the choices over. A
+ * named list (`defineList`) does the same declared once: «active customers» brings its cut, its
+ * columns and its title to the chooser.
+ *
+ * The chooser is ALWAYS one click away (`browse`, on by default): web-ui's `Picker` offers
+ * «see all…» only while it holds rows it does not draw, so with a short first page there was no
+ * way to the server's literal search. The chooser is a table — the columns the list declares,
+ * or `columns` — searched by the entity's literal search on the server.
+ *
+ *     <EntityPicker entity={customers} value={id} onChange={set} />
+ *     <EntityPicker entity={activeCustomers} columns={["name", "tax_id", "city"]} … />
  */
-export function EntityPicker({ entity, value, onChange, onOpen, onBrowseAll, placeholder, disabled, "aria-label": ariaLabel, }) {
-    const lookup = useLookup(entity);
+export function EntityPicker({ entity, value, onChange, onOpen, openTargets, onBrowseAll, criteria, columns, browse = true, placeholder, disabled, "aria-label": ariaLabel, }) {
+    const lookup = useLookup(entity, {
+        ...(criteria === undefined ? {} : { criteria }),
+        ...(value === undefined ? {} : { value }),
+    });
+    const person = (isList(entity) ? entity.entity : entity).summary.person === true;
     const [choosing, setChoosing] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Picker, { items: lookup.options.map((one) => ({
-                    id: one.id,
-                    name: one.label,
-                    ...(one.detail === undefined ? {} : { meta: one.detail, haystack: one.detail }),
-                })), ...(value === undefined ? {} : { value }), onChange: onChange, loading: lookup.loading, ...(onOpen === undefined ? {} : { onOpen }), onBrowseAll: onBrowseAll ?? (() => setChoosing(true)), ...(placeholder === undefined ? {} : { placeholder }), ...(disabled === undefined ? {} : { disabled }), ...(ariaLabel === undefined ? {} : { "aria-label": ariaLabel }) }), choosing ? (_jsx(Chooser, { entity: entity, onChoose: (id) => {
+    const browseAll = onBrowseAll ?? (() => setChoosing(true));
+    const picker = (_jsx(Picker, { items: lookup.options.map((one) => ({
+            id: one.id,
+            name: one.label,
+            ...(one.detail === undefined ? {} : { meta: one.detail, haystack: one.detail }),
+            // A person or a company is chosen by their face: the photo, or their initials.
+            ...(person ? { avatar: one.image ?? true } : {}),
+        })), ...(value === undefined ? {} : { value }), ...(lookup.chosen === undefined ? {} : { valueLabel: lookup.chosen.label }), onChange: onChange, ...(lookup.searchable ? { onSearch: lookup.search } : {}), 
+        // «Loading» only before there is anything: refining keeps the ten on screen.
+        loading: lookup.loading && lookup.options.length === 0, ...(onOpen === undefined ? {} : { onOpen }), ...(openTargets === undefined ? {} : { openTargets }), onBrowseAll: browseAll, ...(placeholder === undefined ? {} : { placeholder }), ...(disabled === undefined ? {} : { disabled }), ...(ariaLabel === undefined ? {} : { "aria-label": ariaLabel }) }));
+    return (_jsxs(_Fragment, { children: [browse ? (_jsxs("span", { className: "flex min-w-0 items-start gap-1", children: [_jsx("span", { className: "min-w-0 flex-1", children: picker }), _jsx(IconButton, { icon: TextSearch, label: frameworkCopy().picker.browse, onClick: () => browseAll(lookup.text), ...(disabled === undefined ? {} : { disabled }) })] })) : (picker), choosing ? (_jsx(Chooser, { entity: entity, ...(columns === undefined ? {} : { columns }), ...(criteria === undefined ? {} : { criteria }), onChoose: (id) => {
                     onChange(id);
                     setChoosing(false);
                 }, onClose: () => setChoosing(false) })) : null] }));
 }
-/** The whole set in a window: search and pages on the server, a row answers the field. */
-function Chooser({ entity, onChoose, onClose, }) {
-    const listing = useListing(entity, { pageSize: 20 });
+/** The whole set in a window, as a table: literal search and pages on the server, a row
+ *  answers the field. */
+function Chooser({ entity, columns, criteria, onChoose, onClose, }) {
+    const listing = useListing(entity, {
+        pageSize: 20,
+        ...(criteria === undefined ? {} : { criteria }),
+    });
     const key = listing.meta?.get_id || listing.meta?.identity || "id";
-    return (_jsx(Dialog, { open: true, width: "lg", title: nameOf(listing.meta, listing.locale) || entity.kind, onClose: onClose, children: _jsx(EntityList, { listing: listing, embedded: true, search: "box", onOpen: (row) => onChoose(String(row[key])) }) }));
+    return (_jsx(Dialog, { open: true, width: "lg", title: (isList(entity) ? entity.title : nameOf(listing.meta, listing.locale)) ||
+            listing.entity.kind, onClose: onClose, children: _jsx(EntityList, { listing: listing, embedded: true, search: "box", ...(columns === undefined ? {} : { columns }), onOpen: (row) => onChoose(String(row[key])) }) }));
 }

package/dist/web/record/EntityTags.d.ts

@@ -0,0 +1,38 @@
+import type { AnyRecord, Criteria } from "@sincpro/criteria";
+import type { Entity } from "../../core/entity.js";
+import { type ListDefinition } from "../../core/list.js";
+import { type OpenTarget } from "@sincpro/web-ui";
+/**
+ * A many2many: put SEVERAL records of an entity on this one — the followers of an invoice,
+ * the products of a promotion — as web-ui's `TagsField` chips, fed by `useLookup`.
+ *
+ * Context: the same literal search as a many2one, for N. The field opens on the first ten in
+ * the entity's order, and what is typed is asked of the SERVER (`TagsField onSearch`): a
+ * product among three thousand is found by its code though no chip shows it. The chosen never
+ * come back as options, and they keep their names wherever they lie — remembered, or asked
+ * once by their keys. A person or a company (`entity(…, { summary: { person: true } })`) is
+ * chosen by their face.
+ *
+ * Opening a chip is the composer's (`onOpen` — a preview by default: a chip is a glance at one
+ * of many), and «Buscar más…» is the list that adds (`onBrowseAll`, `api.pick` with the list in
+ * its choosing mode). Without a workspace a chip is a value.
+ *
+ *     <EntityTags entity={people} value={followers} onChange={setFollowers} />
+ */
+export declare function EntityTags<T extends AnyRecord>({ entity, value, onChange, criteria, onOpen, openTarget, onBrowseAll, placeholder, disabled, "aria-label": ariaLabel, }: {
+    /** What is chosen from: an entity, or a named list of it. */
+    entity: Entity<T> | ListDefinition<T>;
+    /** The keys chosen, in the order they were added — what the backend stores. */
+    value: readonly string[];
+    onChange: (next: string[]) => void;
+    /** Which records may be put at all: applied by the server under what is typed. */
+    criteria?: Criteria<T>;
+    /** Open the record behind a chip — in composer, `(id, to) => openIn(api, entity.ref(id), to)`. */
+    onOpen?: (id: string, to: OpenTarget) => void;
+    openTarget?: OpenTarget;
+    /** «Buscar más…»: the list that adds several at once, opened on what was typed. */
+    onBrowseAll?: (query: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    "aria-label"?: string;
+}): import("react").JSX.Element;

package/dist/web/record/EntityTags.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isList } from "../../core/list.js";
+import { useLookup } from "../../react/useLookup.js";
+import { TagsField } from "@sincpro/web-ui";
+/**
+ * A many2many: put SEVERAL records of an entity on this one — the followers of an invoice,
+ * the products of a promotion — as web-ui's `TagsField` chips, fed by `useLookup`.
+ *
+ * Context: the same literal search as a many2one, for N. The field opens on the first ten in
+ * the entity's order, and what is typed is asked of the SERVER (`TagsField onSearch`): a
+ * product among three thousand is found by its code though no chip shows it. The chosen never
+ * come back as options, and they keep their names wherever they lie — remembered, or asked
+ * once by their keys. A person or a company (`entity(…, { summary: { person: true } })`) is
+ * chosen by their face.
+ *
+ * Opening a chip is the composer's (`onOpen` — a preview by default: a chip is a glance at one
+ * of many), and «Buscar más…» is the list that adds (`onBrowseAll`, `api.pick` with the list in
+ * its choosing mode). Without a workspace a chip is a value.
+ *
+ *     <EntityTags entity={people} value={followers} onChange={setFollowers} />
+ */
+export function EntityTags({ entity, value, onChange, criteria, onOpen, openTarget, onBrowseAll, placeholder, disabled, "aria-label": ariaLabel, }) {
+    const lookup = useLookup(entity, {
+        ...(criteria === undefined ? {} : { criteria }),
+        values: value,
+    });
+    const person = (isList(entity) ? entity.entity : entity).summary.person === true;
+    const asTag = (one) => ({
+        value: one.id,
+        label: one.label,
+        ...(person ? { avatar: one.image ?? true } : {}),
+    });
+    const offered = new Set(lookup.options.map((one) => one.id));
+    // The chosen ride along for their labels; the field never offers them again.
+    const options = [
+        ...lookup.options.map(asTag),
+        ...lookup.chosenAll.filter((one) => !offered.has(one.id)).map(asTag),
+    ];
+    return (_jsx(TagsField, { value: value, onChange: onChange, options: options, ...(lookup.searchable ? { onSearch: lookup.search } : {}), ...(onOpen === undefined ? {} : { onOpen }), ...(openTarget === undefined ? {} : { openTarget }), ...(onBrowseAll === undefined ? {} : { onBrowseAll }), ...(placeholder === undefined ? {} : { placeholder }), ...(disabled === undefined ? {} : { disabled }), ...(ariaLabel === undefined ? {} : { "aria-label": ariaLabel }) }));
+}

package/dist/web/record/RelatedList.d.ts

@@ -8,7 +8,8 @@ import { type EntityListProps } from "../list/EntityList.js";
  * Context: the same `EntityList` a screen uses, `embedded` so it reads as a field of the record
  * (a one-line bar that does not stick), over `useRelated`. Its search box fills the RELATED
  * entity's own search template: the lines of an order are searched by product, the invoices of
- * a customer by number. Use `RecordLines` when the page the record brought is all there is.
+ * a customer by number. The column that points back to this record is left out — it is the
+ * same on every row. Use `RecordLines` when the page the record brought is all there is.
  */
 export declare function RelatedList<P extends AnyRecord, T extends AnyRecord>({ record, name, entity, pageSize, ...list }: {
     record: RecordReading<P>;

package/dist/web/record/RelatedList.js

@@ -1,16 +1,26 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { defaultFields } from "../../core/present.js";
 import { useRelated } from "../../react/useRelated.js";
 import { EntityList } from "../list/EntityList.js";
+import { useMemo } from "react";
 /**
  * A relation of a record as a list inside it — searched, ordered and paged by the server.
  *
  * Context: the same `EntityList` a screen uses, `embedded` so it reads as a field of the record
  * (a one-line bar that does not stick), over `useRelated`. Its search box fills the RELATED
  * entity's own search template: the lines of an order are searched by product, the invoices of
- * a customer by number. Use `RecordLines` when the page the record brought is all there is.
+ * a customer by number. The column that points back to this record is left out — it is the
+ * same on every row. Use `RecordLines` when the page the record brought is all there is.
  */
 export function RelatedList({ record, name, entity, pageSize, ...list }) {
     const listing = useRelated(record, name, entity, pageSize === undefined ? {} : { pageSize });
-    return _jsx(EntityList, { listing: listing, embedded: true, search: "box", ...list });
+    // Every row points back to THIS record: the column that says so is the same on all of them.
+    const back = record.meta?.fields[name]?.identified_by;
+    const own = list.columns;
+    const columns = useMemo(() => own ??
+        (listing.meta === null || !back
+            ? undefined
+            : defaultFields(listing.meta).filter((field) => field !== back)), [own, listing.meta, back]);
+    return (_jsx(EntityList, { listing: listing, embedded: true, search: "box", ...list, ...(columns === undefined ? {} : { columns }) }));
 }

package/dist/web/record/edit.d.ts

@@ -9,12 +9,17 @@ import type { ReactNode } from "react";
  * Context: forge's forms wrote `<Field label="Nombre" required><TextInput … /></Field>` once per
  * field, with the label, the «required» and the value plumbing by hand, while the server already
  * said all three. Here a field is a NAME. The control by type is a default, never the only way:
- * `as` draws any control — a many2one with `EntityPicker`, a rich text, a domain widget — and
- * still receives the value, the setter and the state.
+ * `as` draws any control — a rich text, a domain widget — and still receives the value, the
+ * setter and the state.
+ *
+ * A many2one needs no `as`: the model says what it points at (`relation: "Cliente"`, the key
+ * `customer_id` it is written by), the application declared that entity
+ * (`SincproApp entities`), so the field is an `EntityPicker` of it — the server's literal
+ * search, the ten first, «Buscar más…» — and, read-only, the record's name as a link. Where it
+ * opens is the view's (`RecordOpening`: a modal in a workspace, nothing outside one).
  *
  *     <RecordField record={invoice} name="due_date" />
- *     <RecordField record={invoice} name="customer_id"
- *       as={({ value, set }) => <EntityPicker entity={customers} value={String(value)} onChange={set} />} />
+ *     <RecordField record={invoice} name="customer_id" />
  */
 export type FieldControl = {
     value: unknown;
@@ -23,10 +28,12 @@ export type FieldControl = {
     invalid: boolean;
     label: string;
 };
-export declare function RecordField<T extends Record<string, unknown>>({ record, name, as, }: {
+export declare function RecordField<T extends Record<string, unknown>>({ record, name, as, bare, }: {
     record: RecordReading<T>;
     name: string;
     as?: (control: FieldControl) => ReactNode;
+    /** The control without its label — inside a page or a section that already names it. */
+    bare?: boolean;
 }): import("react").JSX.Element | null;
 /**
  * The record's «save / discard», for `<Record dirty={…}>`: present only while something changed,