shutro-erp 0.3.2 → 0.3.4

package/dist/ui/views/ListView.js

@@ -27,6 +27,11 @@ import { PrefetchedNames, useRowNames } from './widgets.js';
 const features = tableFeatures({});
 const helper = createColumnHelper();
 const HEIGHTS = { comfortable: 40, compact: 32 };
+/** The record's page in a new tab: the list's address with the record's id (`/<app>/a/<action>/<id>`). */
+function openInNewTab(id) {
+    const path = window.location.pathname.replace(/\/$/, '');
+    window.open(`${path}/${id}`, '_blank', 'noopener');
+}
 /** Requests a bulk action sends at once. */
 const PARALLEL = 6;
 /** How long a bulk delete waits for Undo before it runs. */
@@ -188,7 +193,6 @@ function Rows({ props, where, columns, fields, offset, limit, height, selection,
                 offset,
                 count: true,
             });
-            onCount?.(result.count ?? result.items.length);
             rememberList(model, result.items.map((r) => r.id), offset, result.count ?? result.items.length);
             return result;
         },
@@ -199,6 +203,11 @@ function Rows({ props, where, columns, fields, offset, limit, height, selection,
         if (query.data !== undefined)
             onRows?.(query.data.items);
     }, [query.data, onRows]);
+    // From the data, not the fetch: a search answered from the cache (back to All) has its count too.
+    useEffect(() => {
+        if (query.data !== undefined)
+            onCount?.(query.data.count ?? query.data.items.length);
+    }, [query.data, onCount]);
     const names = useRowNames(items, Object.values(fields));
     const tableColumns = useMemo(() => helper.columns(columns.map((node) => helper.accessor((row) => row[node.field], {
         id: node.id,
@@ -488,7 +497,11 @@ function Rows({ props, where, columns, fields, offset, limit, height, selection,
     if (query.isError)
         return (_jsx(Alert, { action: _jsx(Button, { size: "sm", onClick: () => void query.refetch(), children: t('app.retry') }), children: query.error instanceof ApiError ? query.error.message : t('app.error') }));
     if (items.length === 0)
-        return (_jsx(EmptyState, { icon: _jsx(Inbox, { "aria-hidden": true }), title: filtered === true ? t('views.emptyFiltered') : t('views.emptyTitle'), ...(filtered === true ? {} : { description: t('views.emptyHint') }), ...(props.served.operations.create && offset === 0
+        return (_jsx(EmptyState, { icon: _jsx(Inbox, { "aria-hidden": true }), title: filtered === true
+                ? t('views.emptyFiltered')
+                : props.served.view.label === undefined
+                    ? t('views.emptyTitle')
+                    : t('views.emptyNamed', { name: props.served.view.label.toLocaleLowerCase() }), ...(filtered === true ? {} : { description: t('views.emptyHint') }), ...(props.served.operations.create && offset === 0
                 ? {
                     action: (_jsxs(Button, { variant: "primary", size: "sm", onClick: () => props.onOpen('new'), children: [_jsx(Plus, { "aria-hidden": true }), t('views.createFirst')] })),
                 }
@@ -525,8 +538,20 @@ function Rows({ props, where, columns, fields, offset, limit, height, selection,
                                     return null;
                                 const id = row.original.id;
                                 const isSelected = selection?.selected.has(id) === true;
-                                return (_jsxs("tr", { tabIndex: 0, "aria-selected": selection === undefined ? undefined : isSelected, style: { height }, className: cn('cursor-pointer border-b hover:bg-muted/60 focus-visible:bg-muted', isSelected && 'bg-accent/60 hover:bg-accent/70'), onClick: () => props.onOpen(id), onKeyDown: (e) => {
-                                        if (e.key === 'Enter')
+                                return (_jsxs("tr", { tabIndex: 0, "aria-selected": selection === undefined ? undefined : isSelected, style: { height }, className: cn('cursor-pointer border-b hover:bg-muted/60 focus-visible:bg-muted', isSelected && 'bg-accent/60 hover:bg-accent/70'), 
+                                    // Ctrl / Cmd + click or the middle button: the record in a new tab, the list stays.
+                                    onClick: (e) => {
+                                        if (e.ctrlKey || e.metaKey)
+                                            openInNewTab(id);
+                                        else
+                                            props.onOpen(id);
+                                    }, onAuxClick: (e) => {
+                                        if (e.button === 1)
+                                            openInNewTab(id);
+                                    }, onKeyDown: (e) => {
+                                        if (e.key === 'Enter' && (e.ctrlKey || e.metaKey))
+                                            openInNewTab(id);
+                                        else if (e.key === 'Enter')
                                             props.onOpen(id);
                                         // Space on the row itself selects it (the checkbox handles its own keys).
                                         if (e.key === ' ' && selection !== undefined && e.target === e.currentTarget) {
@@ -597,7 +622,7 @@ function Totals({ props, columns, fields, }) {
                 : v === null || v === undefined
                     ? '0'
                     : String(v);
-            return (_jsxs("div", { className: "flex gap-2", children: [_jsxs("dt", { className: "text-muted-foreground", children: [t('views.total'), " ", c.label ?? fields[c.field]?.label ?? c.field] }), _jsx("dd", { className: "font-medium tabular-nums", children: format.decimal(amount) })] }, c.id));
+            return (_jsxs("div", { className: "flex gap-2", children: [_jsx("dt", { className: "text-muted-foreground", children: totalLabel(t('views.total'), c.label ?? fields[c.field]?.label ?? c.field) }), _jsx("dd", { className: "font-medium tabular-nums", children: format.decimal(amount) })] }, c.id));
         }) }));
 }
 function Groups({ props, columns, fields, height, }) {
@@ -653,6 +678,12 @@ function saveFile(blob, filename) {
     setTimeout(() => URL.revokeObjectURL(url), 1000);
 }
 /** The default list renderer. */
+/** A sum's label: "Total Credit limit", but "Total" alone for a column already called "Total" (no "Total Total"). */
+export function totalLabel(word, label) {
+    return label.toLocaleLowerCase().startsWith(word.toLocaleLowerCase())
+        ? label
+        : `${word} ${label}`;
+}
 export function ListView(props) {
     const { api, uid } = useKosh();
     const { t } = useTranslation();
@@ -669,7 +700,7 @@ export function ListView(props) {
     const allColumns = view.columns.filter((c) => fields[c.field] !== undefined);
     const columnsKey = `kosh.columns.${uid}.${view.id}`;
     const [hidden, setHidden] = useState(() => new Set(stored.get(columnsKey, [])));
-    const [density, setDensity] = useState(() => stored.get('kosh.density', 'comfortable'));
+    const { density, setDensity } = useKosh();
     const height = HEIGHTS[density];
     const columns = allColumns.filter((c) => !hidden.has(c.id));
     const design = useDesign();
@@ -808,25 +839,26 @@ export function ListView(props) {
             tone: 'danger',
         }),
     });
-    const toolbar = ids.length > 0 ? (_jsxs("div", { role: "toolbar", "aria-label": t('views.selected', { count: ids.length }), className: "flex flex-wrap items-center gap-2 border-b bg-accent/40 px-3 py-2 text-sm", children: [_jsx("span", { className: "font-medium", children: t('views.selected', { count: ids.length }) }), _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('views.clearSelection'), onClick: () => setSelected(new Set()), children: _jsx(X, { "aria-hidden": true }) }), _jsx("span", { className: "flex-1" }), transitions.map((tr) => (_jsx(Button, { size: "sm", busy: transition.isPending && transition.variables?.name === tr.name, onClick: () => transition.mutate({ name: tr.name, what: ids }), children: tr.name.charAt(0).toUpperCase() + tr.name.slice(1).replace(/_/g, ' ') }, tr.name))), archivable ? (_jsxs(Button, { size: "sm", busy: archive.isPending, onClick: () => archive.mutate(ids), children: [_jsx(Archive, { "aria-hidden": true }), t('views.archive')] })) : null, served.operations.unlink ? (_jsxs(Button, { size: "sm", variant: "danger", onClick: () => setConfirmingDelete(true), children: [_jsx(Trash2, { "aria-hidden": true }), t('views.delete')] })) : null, canExport ? (_jsxs(Button, { size: "sm", busy: exportAs.isPending, onClick: () => exportAs.mutate('csv'), children: [_jsx(Download, { "aria-hidden": true }), t('views.export')] })) : null] })) : (_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b px-3 py-1.5 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: count === null ? (_jsx(Skeleton, { className: "inline-block h-4 w-20" })) : (t('views.records', { count })) }), _jsx("span", { className: "flex-1" }), design.active ? (_jsxs(Button, { size: "sm", variant: "ghost", className: "border border-dashed border-primary/50 text-primary", onClick: () => design.choose({
-                    kind: 'list',
-                    view: view.id,
-                    model,
-                    after: allColumns.at(-1)?.id ?? '',
-                    shown: allColumns.map((c) => c.field),
-                }), children: [_jsx(Plus, { "aria-hidden": true }), t('views.design.addColumn')] })) : null, _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('views.density'), "aria-pressed": density === 'compact', title: density === 'compact' ? t('views.comfortable') : t('views.compact'), onClick: () => {
-                    const next = density === 'compact' ? 'comfortable' : 'compact';
-                    setDensity(next);
-                    stored.set('kosh.density', next);
-                }, children: _jsx(Rows3, { "aria-hidden": true }) }), _jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('views.columns'), children: _jsx(Columns3, { "aria-hidden": true }) }) }), _jsxs(MenuContent, { align: "end", children: [_jsx(MenuLabel, { children: t('views.columns') }), allColumns.map((c) => (_jsx(MenuCheckboxItem, { checked: !hidden.has(c.id), onCheckedChange: (checked) => {
-                                    const next = new Set(hidden);
-                                    if (checked)
-                                        next.delete(c.id);
-                                    else if (next.size < allColumns.length - 1)
-                                        next.add(c.id);
-                                    setHidden(next);
-                                    stored.set(columnsKey, [...next]);
-                                }, children: c.label ?? fields[c.field]?.label ?? c.field }, c.id)))] })] }), canExport ? (_jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('views.export'), busy: exportAs.isPending, children: _jsx(Download, { "aria-hidden": true }) }) }), _jsxs(MenuContent, { align: "end", children: [_jsx(MenuLabel, { children: t('views.export') }), _jsx(MenuItem, { onSelect: () => exportAs.mutate('csv'), children: t('views.exportCsv') }), _jsx(MenuItem, { onSelect: () => exportAs.mutate('xlsx'), children: t('views.exportXlsx') })] })] })) : null] }));
+    // Selected rows: a floating bar at the bottom of the screen (RFC 0018 §4.3); the list's own toolbar stays put.
+    const floating = ids.length > 0 ? (_jsxs("div", { role: "toolbar", "aria-label": t('views.selected', { count: ids.length }), "data-kosh-selection-bar": true, className: "fixed inset-x-0 bottom-4 z-30 mx-auto flex w-fit max-w-[calc(100vw-2rem)] flex-wrap items-center gap-2 rounded-xl border bg-surface px-3 py-2 text-sm shadow-lg", children: [_jsx("span", { className: "font-medium", children: t('views.selected', { count: ids.length }) }), _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('views.clearSelection'), onClick: () => setSelected(new Set()), children: _jsx(X, { "aria-hidden": true }) }), _jsx("span", { className: "flex-1" }), transitions.map((tr) => (_jsx(Button, { size: "sm", busy: transition.isPending && transition.variables?.name === tr.name, onClick: () => transition.mutate({ name: tr.name, what: ids }), children: tr.name.charAt(0).toUpperCase() + tr.name.slice(1).replace(/_/g, ' ') }, tr.name))), archivable ? (_jsxs(Button, { size: "sm", busy: archive.isPending, onClick: () => archive.mutate(ids), children: [_jsx(Archive, { "aria-hidden": true }), t('views.archive')] })) : null, served.operations.unlink ? (_jsxs(Button, { size: "sm", variant: "danger", onClick: () => setConfirmingDelete(true), children: [_jsx(Trash2, { "aria-hidden": true }), t('views.delete')] })) : null, canExport ? (_jsxs(Button, { size: "sm", busy: exportAs.isPending, onClick: () => exportAs.mutate('csv'), children: [_jsx(Download, { "aria-hidden": true }), t('views.export')] })) : null] })) : null;
+    const toolbar = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b px-3 py-1.5 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: count === null ? (_jsx(Skeleton, { className: "inline-block h-4 w-20" })) : (t('views.records', { count })) }), _jsx("span", { className: "flex-1" }), design.active ? (_jsxs(Button, { size: "sm", variant: "ghost", className: "border border-dashed border-primary/50 text-primary", onClick: () => design.choose({
+                            kind: 'list',
+                            view: view.id,
+                            model,
+                            after: allColumns.at(-1)?.id ?? '',
+                            shown: allColumns.map((c) => c.field),
+                        }), children: [_jsx(Plus, { "aria-hidden": true }), t('views.design.addColumn')] })) : null, _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('views.density'), "aria-pressed": density === 'compact', title: density === 'compact' ? t('views.comfortable') : t('views.compact'), onClick: () => {
+                            const next = density === 'compact' ? 'comfortable' : 'compact';
+                            setDensity(next);
+                        }, children: _jsx(Rows3, { "aria-hidden": true }) }), _jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('views.columns'), children: _jsx(Columns3, { "aria-hidden": true }) }) }), _jsxs(MenuContent, { align: "end", children: [_jsx(MenuLabel, { children: t('views.columns') }), allColumns.map((c) => (_jsx(MenuCheckboxItem, { checked: !hidden.has(c.id), onCheckedChange: (checked) => {
+                                            const next = new Set(hidden);
+                                            if (checked)
+                                                next.delete(c.id);
+                                            else if (next.size < allColumns.length - 1)
+                                                next.add(c.id);
+                                            setHidden(next);
+                                            stored.set(columnsKey, [...next]);
+                                        }, children: c.label ?? fields[c.field]?.label ?? c.field }, c.id)))] })] }), canExport ? (_jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('views.export'), busy: exportAs.isPending, children: _jsx(Download, { "aria-hidden": true }) }) }), _jsxs(MenuContent, { align: "end", children: [_jsx(MenuLabel, { children: t('views.export') }), _jsx(MenuItem, { onSelect: () => exportAs.mutate('csv'), children: t('views.exportCsv') }), _jsx(MenuItem, { onSelect: () => exportAs.mutate('xlsx'), children: t('views.exportXlsx') })] })] })) : null] }), floating] }));
     return (_jsxs("div", { className: "rounded-lg border bg-surface", children: [props.groupBy.length > 0 ? (_jsx(Groups, { props: props, columns: columns, fields: fields, height: height })) : (_jsxs(_Fragment, { children: [toolbar, _jsx(Rows, { props: props, where: props.where, columns: columns, fields: fields, offset: offset, limit: pageSize, height: height, selection: { selected, onToggle: toggle, onToggleAll: toggleAll }, hiddenIds: pendingDelete, onCount: setCount, onRows: setPageRows, filtered: filtered }), count !== null && count > pageSize ? (_jsxs("nav", { "aria-label": "Pagination", className: "flex items-center justify-end gap-2 border-t px-3 py-2 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: t('views.range', {
                                     from: offset + 1,
                                     to: Math.min(offset + pageSize, count),

package/dist/ui/views/StatusChip.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import type { ViewField } from '../api.js';
+export declare function StatusChip({ field, value, transitions, }: {
+    readonly field: ViewField;
+    readonly value: unknown;
+    readonly transitions: readonly {
+        readonly from: readonly string[];
+        readonly to: string;
+    }[];
+}): ReactElement;

package/dist/ui/views/StatusChip.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A record's state as one chip in its meaning's tone (RFC 0018 §4.2), instead of a row of every state: it opens the
+ * whole workflow — the states passed, the current one, the ones a transition leads to next. The server serves the
+ * transitions; the chip only shows them.
+ */
+import { Check, ChevronDown, Circle } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { badgeVariants, Popover, PopoverContent, PopoverTrigger, } from '../components/primitives.js';
+import { cn } from '../lib/cn.js';
+import { toneOf } from './widgets.js';
+export function StatusChip({ field, value, transitions, }) {
+    const { t } = useTranslation();
+    const options = field.options ?? [];
+    const index = options.findIndex((o) => o.value === value);
+    const current = options[index];
+    const next = new Set(transitions.filter((tr) => tr.from.includes(String(value))).map((tr) => tr.to));
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": t('views.statusOf', { field: field.label, state: current?.label ?? '—' }), className: cn(badgeVariants({ tone: toneOf(String(value ?? '')) }), 'gap-1.5 px-2.5 py-1 hover:brightness-95 focus-visible:outline-2'), children: [_jsx("span", { className: "size-1.5 rounded-full bg-current", "aria-hidden": true }), current?.label ?? '—', _jsx(ChevronDown, { className: "size-3.5 opacity-70", "aria-hidden": true })] }) }), _jsxs(PopoverContent, { className: "w-64", children: [_jsx("p", { className: "mb-2 px-2 text-xs font-medium text-muted-foreground", children: field.label }), _jsx("ol", { className: "grid gap-0.5", children: options.map((o, i) => {
+                            const isCurrent = i === index;
+                            return (_jsxs("li", { "aria-current": isCurrent ? 'step' : undefined, className: cn('flex items-center gap-2 rounded-md px-2 py-1.5 text-sm', isCurrent ? 'bg-accent font-medium text-accent-foreground' : 'text-foreground', i > index && !next.has(o.value) && 'text-muted-foreground'), children: [i < index ? (_jsx(Check, { className: "size-3.5 text-success", "aria-hidden": true })) : (_jsx(Circle, { className: cn('size-3.5', isCurrent && 'fill-current'), "aria-hidden": true })), _jsx("span", { className: "flex-1", children: o.label }), next.has(o.value) ? (_jsx("span", { className: "text-xs text-muted-foreground", children: t('views.nextState') })) : null] }, o.value));
+                        }) })] })] }));
+}

package/dist/ui/views/widgets.d.ts

@@ -1,5 +1,7 @@
 import { type Context } from 'react';
 import type { Registry } from '../registry.js';
+type Tone = 'info' | 'success' | 'danger' | 'warning' | 'neutral';
+export declare function toneOf(value: string): Tone;
 /** Display names a list or kanban loaded in one batch per model, so cells do not query one by one. */
 export declare const PrefetchedNames: Context<ReadonlyMap<string, ReadonlyMap<number, string>>>;
 /** Display names of ids: from {@link PrefetchedNames}, else batched through the name-search endpoint (cached). */
@@ -12,3 +14,4 @@ export declare function useRowNames(rows: readonly Readonly<Record<string, unkno
 }[]): ReadonlyMap<string, ReadonlyMap<number, string>>;
 /** Registers the default widgets. */
 export declare function registerDefaultWidgets(registry: Registry): Registry;
+export {};

package/dist/ui/views/widgets.js

@@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next';
 import { Badge, Checkbox, Input, Select, Textarea } from '../components/primitives.js';
 import { useKosh } from '../context.js';
 import { cn } from '../lib/cn.js';
+import { DateField } from './DateField.js';
 const text = (v) => (v === null || v === undefined ? '' : String(v));
 function CharWidget({ id, value, readonly, onChange, field, invalid }) {
     if (onChange === undefined || readonly)
@@ -56,11 +57,11 @@ function BooleanWidget({ id, value, readonly, onChange, field }) {
         return _jsx("span", { children: value === true ? t('views.yes') : t('views.no') });
     return (_jsx(Checkbox, { id: id, checked: value === true, disabled: readonly, "aria-label": field.label, onCheckedChange: (c) => onChange(c === true) }));
 }
-function DateWidget({ id, value, readonly, onChange }) {
+function DateWidget({ id, value, readonly, onChange, field, invalid }) {
     const { format } = useKosh();
     if (onChange === undefined || readonly)
         return _jsx("span", { children: format.date(value === null || value === undefined ? null : String(value)) });
-    return (_jsx(Input, { id: id, type: "date", value: text(value).slice(0, 10), onChange: (e) => onChange(e.target.value === '' ? null : e.target.value) }));
+    return (_jsx(DateField, { id: id, value: value === null || value === undefined || value === '' ? null : text(value).slice(0, 10), onChange: onChange, required: field.required, ...(invalid === undefined ? {} : { invalid }) }));
 }
 function DatetimeWidget({ id, value, readonly, onChange }) {
     const { format } = useKosh();
@@ -80,14 +81,31 @@ function SelectionWidget({ id, value, readonly, onChange, field }) {
         return _jsx("span", { children: label });
     return (_jsx(Select, { id: id, label: field.label, value: value === null || value === undefined ? null : String(value), options: options, onChange: onChange }));
 }
-const TONES = ['info', 'success', 'danger', 'warning', 'neutral'];
+/** What a state's value means, by the words ERP states use (`posted`, `to_approve`, `cancel`…). */
+const MEANINGS = [
+    [
+        /(^|_)(cancel|cancelled|canceled|failed|refused|rejected|lost|blocked|overdue|error|bounced)($|_)/,
+        'danger',
+    ],
+    [
+        /(^|_)(to|not|partial|partially|pending|waiting|wait|hold|review|approve|quarantine)($|_)/,
+        'warning',
+    ],
+    [
+        /(^|_)(done|paid|posted|sale|confirmed|approved|won|delivered|validated|completed|complete|reconciled|invoiced|handled|active|accepted|signed|locked)($|_)/,
+        'success',
+    ],
+    [/(^|_)(sent|open|progress|received|in|scheduled|running|purchase|ordered)($|_)/, 'info'],
+];
+export function toneOf(value) {
+    const v = value.toLowerCase();
+    return MEANINGS.find(([pattern]) => pattern.test(v))?.[1] ?? 'neutral';
+}
 function BadgeWidget({ value, field }) {
     if (value === null || value === undefined || value === '')
         return null;
-    const options = field.options ?? [];
-    const index = options.findIndex((o) => o.value === value);
-    const label = options[index]?.label ?? text(value);
-    return _jsx(Badge, { tone: TONES[Math.max(index, 0) % TONES.length] ?? 'neutral', children: label });
+    const label = (field.options ?? []).find((o) => o.value === value)?.label ?? text(value);
+    return _jsx(Badge, { tone: toneOf(text(value)), children: label });
 }
 /** Display names a list or kanban loaded in one batch per model, so cells do not query one by one. */
 export const PrefetchedNames = createContext(new Map());
@@ -166,7 +184,7 @@ function Many2oneWidget({ id, value, readonly, onChange, field, invalid, }) {
     const label = current === null ? '' : (names.get(current) ?? `#${current}`);
     if (onChange === undefined || readonly)
         return _jsx("span", { children: label });
-    return (_jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx("button", { id: id, type: "button", role: "combobox", "aria-expanded": open, "aria-controls": listId, "aria-invalid": invalid === true ? true : undefined, className: "flex h-9 w-full items-center justify-between rounded-md border border-input bg-surface px-3 text-start text-sm aria-invalid:border-danger", children: _jsx("span", { className: cn(current === null && 'text-muted-foreground'), children: current === null ? t('views.choose') : label }) }) }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { align: "start", sideOffset: 4, className: "z-50 w-[var(--radix-popover-trigger-width)] rounded-md border bg-surface p-1 shadow-lg", children: [_jsx(Input, { autoFocus: true, "aria-label": field.label, placeholder: t('search.placeholder'), value: q, onChange: (e) => setQ(e.target.value) }), _jsxs("div", { id: listId, role: "listbox", "aria-label": field.label, className: "mt-1 max-h-60 overflow-auto", children: [field.required ? null : (_jsx("button", { type: "button", role: "option", "aria-selected": current === null, className: "w-full rounded-sm px-2 py-1.5 text-start text-sm text-muted-foreground hover:bg-muted", onClick: () => {
+    return (_jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx("button", { id: id, type: "button", role: "combobox", "aria-expanded": open, "aria-controls": listId, "aria-invalid": invalid === true ? true : undefined, className: "flex h-[var(--control-h)] w-full items-center justify-between rounded-md border border-input bg-surface px-3 text-start text-sm aria-invalid:border-danger", children: _jsx("span", { className: cn(current === null && 'text-muted-foreground'), children: current === null ? t('views.choose') : label }) }) }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { align: "start", sideOffset: 4, className: "z-50 w-[var(--radix-popover-trigger-width)] rounded-md border bg-surface p-1 shadow-lg", children: [_jsx(Input, { autoFocus: true, "aria-label": field.label, placeholder: t('search.placeholder'), value: q, onChange: (e) => setQ(e.target.value) }), _jsxs("div", { id: listId, role: "listbox", "aria-label": field.label, className: "mt-1 max-h-60 overflow-auto", children: [field.required ? null : (_jsx("button", { type: "button", role: "option", "aria-selected": current === null, className: "w-full rounded-sm px-2 py-1.5 text-start text-sm text-muted-foreground hover:bg-muted", onClick: () => {
                                         onChange(null);
                                         setOpen(false);
                                     }, children: t('views.none') })), (results.data ?? []).map((r) => (_jsx("button", { type: "button", role: "option", "aria-selected": r.id === current, className: "w-full rounded-sm px-2 py-1.5 text-start text-sm hover:bg-muted", onClick: () => {

package/dist/views/types.d.ts

@@ -96,6 +96,13 @@ export interface FormView extends ViewBase {
     readonly readonlyWhen?: Condition;
     /** Messages and activities (RFC 0006). */
     readonly chatter?: boolean;
+    /**
+     * The key facts under the title (RFC 0018 §4.2): the customer, the date, the total. Default: the first many2one,
+     * date and monetary fields of the form.
+     */
+    readonly subtitle?: readonly string[];
+    /** The fields of the right rail's Summary (RFC 0018 §4.2). Default: the group named `totals`. */
+    readonly summary?: readonly string[];
 }
 export interface KanbanCard {
     readonly title: string;

package/dist/views/validate.js

@@ -58,6 +58,10 @@ export function validateView(view, models) {
         if (node.kind === 'button' && !info.transitions.includes(node.transition))
             problems.push(`unknown transition '${node.transition}' (has ${info.transitions.join(', ') || 'none'})`);
     }
+    if (view.type === 'form')
+        for (const key of [...(view.subtitle ?? []), ...(view.summary ?? [])])
+            if (!info.fields.has(key))
+                problems.push(`unknown field '${key}' in the subtitle or summary`);
     if (view.type === 'form' && view.header.statusbar !== undefined) {
         const kind = info.fields.get(view.header.statusbar)?.kind;
         if (kind !== 'state' && kind !== 'selection')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shutro-erp",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Shutro ERP (Kosh): a modern ERP framework on TypeScript, PostgreSQL and the Shutro ORM — typed end to end, permissions enforced on the server, metadata-driven views, reporting, documents and a chatter on every record.",
   "keywords": [
     "erp",
@@ -289,7 +289,7 @@
     "postal-mime": "^4.1.4",
     "radix-ui": "^1.8.1",
     "sanitize-html": "^2.18.1",
-    "shutro": "^0.3.2",
+    "shutro": "^0.3.3",
     "tailwind-merge": "^3.7.0",
     "web-push": "^3.6.7"
   },