shutro-erp 0.3.4 → 0.3.6

package/dist/ui/views/StatsRow.js

@@ -0,0 +1,88 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A row of stat tiles on a record page (RFC 0022 §3.1): how many — or how much — of another model relate to this
+ * record, computed by the server with the user's rights (`aggregate`), live with the record's version, each tile a
+ * jump to that list filtered the same way. Other modules append their tiles to the row (view extensions).
+ */
+import { holds, resolveRecord, } from '../../views/index.js';
+import { useQueries, useQuery } from '@tanstack/react-query';
+import { useNavigate } from '@tanstack/react-router';
+import { useKosh } from '../context.js';
+import { cn } from '../lib/cn.js';
+// The badge's tones (primitives), on the figure only.
+const TONES = {
+    neutral: 'text-foreground',
+    info: 'text-primary',
+    success: 'text-success',
+    warning: 'text-warning-text',
+    danger: 'text-danger',
+};
+/** The measure's value as the aggregate route returns it: a count, a decimal string, or amounts per currency. */
+function textOf(raw, format) {
+    if (raw === null || raw === undefined)
+        return { text: '0' };
+    if (typeof raw === 'number')
+        return { text: format.number(raw) };
+    if (typeof raw === 'string')
+        return { text: format.decimal(raw) };
+    if (Array.isArray(raw)) {
+        const [first] = raw;
+        if (first === undefined)
+            return { text: '0' };
+        return {
+            text: format.decimal(String(first.amount ?? '0')),
+            ...(typeof first.currency === 'string' ? { currency: first.currency } : {}),
+        };
+    }
+    if (typeof raw === 'object' && 'amount' in raw) {
+        const a = raw;
+        return {
+            text: format.decimal(String(a.amount)),
+            ...(typeof a.currency === 'string' ? { currency: a.currency } : {}),
+        };
+    }
+    return { text: String(raw) };
+}
+export function StatsRow({ node, values, env, version, }) {
+    const { api, format } = useKosh();
+    const navigate = useNavigate();
+    const routes = useQuery({ queryKey: ['routes'], queryFn: () => api.routes() });
+    const tiles = node.children.filter((tile) => tile.visibleWhen === undefined || holds(tile.visibleWhen, values, env));
+    const wheres = tiles.map((tile) => resolveRecord(tile.where, values));
+    const results = useQueries({
+        queries: tiles.map((tile, i) => ({
+            queryKey: ['stat', tile.model, wheres[i], tile.measure ?? 'count', version],
+            queryFn: async () => {
+                const [row] = await api.aggregate(tile.model, {
+                    where: wheres[i],
+                    measures: { value: tile.measure ?? 'count' },
+                });
+                return row?.['value'] ?? null;
+            },
+        })),
+    });
+    if (tiles.length === 0)
+        return null;
+    const open = (i) => {
+        const tile = tiles[i];
+        if (tile === undefined)
+            return;
+        const route = routes.data?.[tile.model];
+        const action = tile.action ?? route?.action;
+        if (action === undefined || route?.app === undefined)
+            return;
+        void navigate({
+            to: '/$app/a/$action',
+            params: { app: route.app, action },
+            search: { q: JSON.stringify({ c: wheres[i], cl: tile.label }) },
+        });
+    };
+    return (_jsx("section", { "aria-label": node.id, className: "col-span-full grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4", children: tiles.map((tile, i) => {
+            const result = results[i];
+            const value = textOf(result?.data, format);
+            const clickable = routes.data?.[tile.model]?.app !== undefined;
+            const body = (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: tile.label }), _jsxs("span", { className: cn('text-xl font-semibold tabular-nums leading-tight', TONES[tile.tone ?? 'neutral']), children: [result?.isPending === true ? '…' : value.text, value.currency === undefined ? null : (_jsx("span", { className: "ms-1 text-xs font-normal text-muted-foreground", children: value.currency }))] })] }));
+            const className = 'grid gap-0.5 rounded-lg border bg-surface px-3 py-2 text-start transition-colors';
+            return clickable ? (_jsx("button", { type: "button", className: cn(className, 'hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring'), onClick: () => open(i), children: body }, tile.id)) : (_jsx("div", { className: className, children: body }, tile.id));
+        }) }));
+}

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

@@ -12,6 +12,7 @@ export declare function useRowNames(rows: readonly Readonly<Record<string, unkno
     readonly kind: string;
     readonly target?: string;
 }[]): ReadonlyMap<string, ReadonlyMap<number, string>>;
-/** Registers the default widgets. */
+/** A stable tint for a value (a stage, a tag): a hue from its text. */
+export declare const tintOf: (key: string) => string;
 export declare function registerDefaultWidgets(registry: Registry): Registry;
 export {};

package/dist/ui/views/widgets.js

@@ -8,7 +8,8 @@ import { useQueries, useQuery } from '@tanstack/react-query';
 import { Popover } from 'radix-ui';
 import { createContext, useContext, useId, useMemo, useState, } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Badge, Checkbox, Input, Select, Textarea } from '../components/primitives.js';
+import { Avatar } from '../components/Avatar.js';
+import { Badge, Button, buttonClass, Checkbox, Input, Select, Textarea, } from '../components/primitives.js';
 import { useKosh } from '../context.js';
 import { cn } from '../lib/cn.js';
 import { DateField } from './DateField.js';
@@ -242,6 +243,192 @@ function JsonWidget({ id, value, readonly, onChange, invalid }) {
         } }));
 }
 /** Registers the default widgets. */
+// ---- Richer widgets (RFC 0022 §3.3) ------------------------------------------------------------------------
+const idOfValue = (v) => typeof v === 'number'
+    ? v
+    : typeof v === 'object' && v !== null && 'id' in v
+        ? Number(v.id)
+        : null;
+/** A link in display, the text input otherwise: `mailto:`, `tel:` or the address itself. */
+function linkWidget(kind) {
+    return function LinkWidget(props) {
+        const value = text(props.value);
+        if (props.onChange !== undefined && !props.readonly)
+            return _jsx(CharWidget, { ...props });
+        if (value === '')
+            return _jsx("span", {});
+        const href = kind === 'email'
+            ? `mailto:${value}`
+            : kind === 'phone'
+                ? `tel:${value.replace(/[^\d+]/g, '')}`
+                : /^https?:\/\//i.test(value)
+                    ? value
+                    : `https://${value}`;
+        return (_jsx("a", { href: href, className: "text-primary underline-offset-2 hover:underline", ...(kind === 'url' ? { target: '_blank', rel: 'noreferrer' } : {}), onClick: (e) => e.stopPropagation(), children: kind === 'url' ? value.replace(/^https?:\/\//i, '') : value }));
+    };
+}
+/** 0–100 as a bar with the number; the integer input to edit. */
+function ProgressWidget(props) {
+    const { format } = useKosh();
+    if (props.onChange !== undefined && !props.readonly)
+        return _jsx(IntegerWidget, { ...props });
+    // Decimals arrive as strings ("75.0"), integers as numbers.
+    const raw = typeof props.value === 'number'
+        ? props.value
+        : typeof props.value === 'string' && props.value.trim() !== ''
+            ? Number(props.value)
+            : Number.NaN;
+    const n = Number.isFinite(raw) ? Math.max(0, Math.min(100, raw)) : null;
+    if (n === null)
+        return _jsx("span", {});
+    return (_jsxs("span", { className: "inline-flex w-full max-w-40 items-center gap-2", children: [_jsx("span", { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": n, "aria-label": props.field.label, className: "h-1.5 flex-1 overflow-hidden rounded-full bg-muted", children: _jsx("span", { className: "block h-full rounded-full bg-primary", style: { width: `${n}%` } }) }), _jsxs("span", { className: "tabular-nums text-xs text-muted-foreground", children: [format.number(n), "%"] })] }));
+}
+/** A number as a percentage. */
+function PercentageWidget(props) {
+    const { format } = useKosh();
+    if (props.onChange !== undefined && !props.readonly)
+        return _jsx(DecimalWidget, { ...props });
+    const v = typeof props.value === 'number'
+        ? props.value
+        : typeof props.value === 'string' && props.value !== ''
+            ? Number(props.value)
+            : null;
+    return (_jsx("span", { className: "tabular-nums", children: v === null || Number.isNaN(v) ? '' : `${format.number(v)}%` }));
+}
+/** Stars in a row: read-only as one image, editable as radios (a visually hidden input under each star). */
+function Stars({ label, options, selected, editable, onPick, }) {
+    const group = useId();
+    if (!editable)
+        return (_jsx("span", { role: "img", "aria-label": label, className: "inline-flex gap-0.5 text-warning-text", children: options.map((o, i) => (_jsx("span", { "aria-hidden": true, children: i <= selected ? '★' : '☆' }, o.key))) }));
+    return (_jsxs("fieldset", { className: "inline-flex gap-0.5 text-warning-text", children: [_jsx("legend", { className: "sr-only", children: label }), options.map((o, i) => (_jsxs("label", { className: "cursor-pointer leading-none", title: o.label, children: [_jsx("input", { type: "radio", name: group, className: "sr-only", checked: i === selected, onChange: () => onPick(i) }), _jsx("span", { "aria-hidden": true, children: i <= selected ? '★' : '☆' }), _jsx("span", { className: "sr-only", children: o.label })] }, o.key)))] }));
+}
+/** Stars out of five for a 0–5 number; click a star to set it. */
+function RatingWidget({ value, readonly, onChange, field }) {
+    const n = typeof value === 'number' ? value : typeof value === 'string' ? Number(value) : 0;
+    const rounded = Number.isNaN(n) ? 0 : Math.round(n);
+    return (_jsx(Stars, { label: `${field.label}: ${Number.isNaN(n) ? 0 : n} / 5`, options: [1, 2, 3, 4, 5].map((s) => ({ key: String(s), label: `${s} / 5` })), selected: rounded - 1, editable: onChange !== undefined && !readonly, onPick: (i) => onChange?.(i + 1) }));
+}
+/** A selection shown as stars (its options in order: the first is one star); click to set it. */
+function PriorityWidget({ value, readonly, onChange, field }) {
+    const options = field.options ?? [];
+    const index = options.findIndex((o) => o.value === value);
+    return (_jsx(Stars, { label: `${field.label}: ${options[index]?.label ?? ''}`, options: options.map((o) => ({ key: o.value, label: o.label })), selected: index, editable: onChange !== undefined && !readonly, onPick: (i) => onChange?.(options[i]?.value ?? null) }));
+}
+/** A stable tint for a value (a stage, a tag): a hue from its text. */
+export const tintOf = (key) => {
+    let h = 0;
+    for (const c of key)
+        h = (h * 31 + c.charCodeAt(0)) % 360;
+    return `oklch(0.7 0.14 ${h})`;
+};
+/** A selection or text as a coloured dot with its label; the select to edit. */
+function ColorWidget(props) {
+    if (props.onChange !== undefined && !props.readonly)
+        return props.field.kind === 'selection' ? (_jsx(SelectionWidget, { ...props })) : (_jsx(CharWidget, { ...props }));
+    const value = text(props.value);
+    if (value === '')
+        return _jsx("span", {});
+    const label = (props.field.options ?? []).find((o) => o.value === value)?.label ?? value;
+    return (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { "aria-hidden": true, className: "size-2.5 rounded-full", style: { background: tintOf(value) } }), label] }));
+}
+/** A date as "in 3 days" / "2 days late", toned; the date field to edit. */
+function DaysLeftWidget(props) {
+    const { t } = useTranslation();
+    const { format } = useKosh();
+    if (props.onChange !== undefined && !props.readonly)
+        return _jsx(DateWidget, { ...props });
+    const value = text(props.value);
+    if (value === '')
+        return _jsx("span", {});
+    const day = new Date(`${value.slice(0, 10)}T00:00:00Z`).getTime();
+    const today = new Date();
+    const now = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());
+    const days = Math.round((day - now) / 86_400_000);
+    const label = days === 0
+        ? t('views.daysLeft.today')
+        : days > 0
+            ? t('views.daysLeft.in', { count: days })
+            : t('views.daysLeft.late', { count: -days });
+    return (_jsx("span", { title: format.date(value), className: cn('tabular-nums', days < 0 ? 'text-danger' : days <= 3 ? 'text-warning-text' : 'text-muted-foreground'), children: label }));
+}
+/** Many2many chips tinted by their name; the picker to edit. */
+function TagsWidget(props) {
+    const ids = Array.isArray(props.value)
+        ? props.value.map(idOf).filter((v) => v !== null)
+        : [];
+    const names = useDisplayNames(props.field.target, ids);
+    if (props.onChange !== undefined && !props.readonly)
+        return _jsx(Many2manyWidget, { ...props });
+    return (_jsx("span", { className: "flex flex-wrap gap-1", children: ids.map((i) => {
+            const name = names.get(i) ?? `#${i}`;
+            return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs", children: [_jsx("span", { "aria-hidden": true, className: "size-2 rounded-full", style: { background: tintOf(name) } }), name] }, i));
+        }) }));
+}
+/** Draws `file` at most `max` pixels wide or high, as a WebP blob. */
+async function shrinkTo(file, max) {
+    const bitmap = await createImageBitmap(file);
+    const scale = Math.min(1, max / Math.max(bitmap.width, bitmap.height));
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.max(1, Math.round(bitmap.width * scale));
+    canvas.height = Math.max(1, Math.round(bitmap.height * scale));
+    const ctx = canvas.getContext('2d');
+    if (ctx === null)
+        throw new Error('No canvas');
+    ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+    bitmap.close();
+    return new Promise((resolve, reject) => canvas.toBlob((b) => (b === null ? reject(new Error('No image')) : resolve(b)), 'image/webp', 0.86));
+}
+/**
+ * An image kept as an attachment of the record (RFC 0022 §3.3): shown from its 256 px thumbnail, uploaded from a
+ * file the browser first shrinks (at most 1600 px, and the thumbnail), both attached to the record; the field then
+ * holds the image. A new record has to be saved first (its attachments need it).
+ */
+function imageWidget(shape) {
+    return function ImageWidget({ value, readonly, onChange, field, record, model, }) {
+        const { api } = useKosh();
+        const { t } = useTranslation();
+        const inputId = useId();
+        const [busy, setBusy] = useState(false);
+        const [error, setError] = useState(null);
+        const id = idOfValue(value);
+        const recordId = typeof record['id'] === 'number' ? record['id'] : null;
+        const src = id === null ? null : `/api/v1/attachments/${id}/download?inline=true&w=256`;
+        const name = String(record['displayName'] ?? record['name'] ?? '');
+        const editable = onChange !== undefined && !readonly;
+        const pick = async (file) => {
+            if (model === undefined || recordId === null)
+                return setError(t('views.image.saveFirst'));
+            setBusy(true);
+            setError(null);
+            try {
+                const [full, thumb] = await Promise.all([shrinkTo(file, 1600), shrinkTo(file, 256)]);
+                const path = `/api/v1/attachments/${model}/${recordId}`;
+                const stem = file.name.replace(/\.[^.]+$/, '') || field.label;
+                const made = await api.upload(path, full, `${stem}.webp`);
+                await api.upload(path, thumb, `${stem}-256.webp`, {
+                    'x-variant-of': String(made.id),
+                    'x-width': '256',
+                });
+                onChange?.(made.id);
+            }
+            catch (e) {
+                setError(e instanceof Error ? e.message : String(e));
+            }
+            finally {
+                setBusy(false);
+            }
+        };
+        const picture = shape === 'avatar' ? (_jsx(Avatar, { name: name, src: src, shape: "circle" })) : src === null ? (_jsx("span", { className: "grid size-24 place-items-center rounded-md border border-dashed text-xs text-muted-foreground", children: t('views.image.none') })) : (_jsx("img", { src: src, alt: name, className: "size-24 rounded-md border object-cover" }));
+        if (!editable)
+            return picture;
+        return (_jsxs("span", { className: "inline-flex items-center gap-3", children: [picture, _jsxs("span", { className: "grid gap-1", children: [_jsx("input", { id: inputId, type: "file", accept: "image/*", className: "sr-only", onChange: (e) => {
+                                const file = e.target.files?.[0];
+                                if (file !== undefined)
+                                    void pick(file);
+                                e.target.value = '';
+                            } }), _jsx("label", { htmlFor: inputId, className: cn(buttonClass('secondary', 'sm'), 'cursor-pointer', busy && 'pointer-events-none opacity-50'), children: t('views.image.choose') }), id === null ? null : (_jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => onChange?.(null), children: t('views.image.remove') })), error === null ? null : (_jsx("span", { role: "alert", className: "text-xs text-danger", children: error }))] })] }));
+    };
+}
 export function registerDefaultWidgets(registry) {
     for (const [name, widget] of [
         ['char', CharWidget],
@@ -264,6 +451,18 @@ export function registerDefaultWidgets(registry) {
         ['many2one', Many2oneWidget],
         ['many2many', Many2manyWidget],
         ['one2many', One2manyWidget],
+        ['email', linkWidget('email')],
+        ['phone', linkWidget('phone')],
+        ['url', linkWidget('url')],
+        ['progress', ProgressWidget],
+        ['percentage', PercentageWidget],
+        ['rating', RatingWidget],
+        ['priority', PriorityWidget],
+        ['color', ColorWidget],
+        ['daysLeft', DaysLeftWidget],
+        ['tags', TagsWidget],
+        ['image', imageWidget('image')],
+        ['avatar', imageWidget('avatar')],
     ])
         registry.registerWidget(name, widget);
     return registry;

package/dist/views/builders.d.ts

@@ -6,7 +6,7 @@
  * The model handle is described structurally (a name and a `fields` record), so this package does not depend on
  * Shutro.
  */
-import type { ButtonNode, CalendarView, CohortView, ComponentNode, Condition, DashboardView, FieldNode, FormNode, FormView, GanttView, GraphView, GroupNode, HierarchyView, KanbanView, LinesNode, ListView, MapView, NotebookNode, PageNode, PivotView, SearchSpec, SpreadsheetView, WindowAction } from './types.js';
+import type { ButtonNode, CalendarView, CohortView, ComponentNode, Condition, DashboardView, FieldNode, FormNode, FormView, GanttView, GraphView, GroupNode, HierarchyView, KanbanView, LinesNode, ListView, MapView, NotebookNode, PageNode, PivotView, SearchSpec, SpreadsheetView, StatNode, StatsNode, WindowAction } from './types.js';
 /** What the builders read from a Shutro model handle. */
 export interface ModelHandle {
     readonly name: string;
@@ -24,6 +24,12 @@ export type FieldInput<K extends string> = K | ({
 } & Omit<FieldNode, 'kind' | 'id' | 'field'>);
 /** A field node (forms, cards). */
 export declare function field<K extends string>(input: FieldInput<K>): FieldNode;
+/** A stat tile's input: the related model's handle or name, the rest as the node. */
+export type StatInput = Omit<StatNode, 'kind' | 'model'> & {
+    readonly model: ModelRef;
+};
+/** A stat tile (RFC 0022 §3.1), for `k.stats` and for extensions appending to another module's row. */
+export declare function stat(input: StatInput): StatNode;
 type ViewInput<V> = Omit<V, 'id' | 'model' | 'type'>;
 /** A list view. */
 export declare function list<M extends ModelRef>(model: M, spec: Omit<ViewInput<ListView>, 'columns' | 'inlineEdit' | 'defaultOrder'> & {
@@ -36,12 +42,19 @@ export interface FormKit<K extends string> {
     field(input: FieldInput<K>): FieldNode;
     group(id: string, children: readonly (FieldInput<K> | FormNode)[], options?: Omit<GroupNode, 'kind' | 'id' | 'children'>): GroupNode;
     notebook(id: string, pages: readonly PageNode[]): NotebookNode;
-    page(id: string, label: string, children: readonly (FieldInput<K> | FormNode)[]): PageNode;
+    page(id: string, label: string, children: readonly (FieldInput<K> | FormNode)[], options?: {
+        readonly description?: string;
+        readonly visibleWhen?: Condition;
+    }): PageNode;
     /** An editable one2many; its columns are keys of the related model (checked at load). */
     lines(field: K, columns: readonly FieldInput<string>[], options?: {
         readonly readonlyWhen?: Condition;
     }): LinesNode;
     component(id: string, component: string, props?: Readonly<Record<string, unknown>>): ComponentNode;
+    /** A row of tiles of related records; empty rows are for other modules to fill. */
+    stats(id: string, children: readonly StatInput[], options?: {
+        readonly visibleWhen?: Condition;
+    }): StatsNode;
     button(transition: string, options?: Omit<ButtonNode, 'kind' | 'id' | 'transition'> & {
         readonly id?: string;
     }): ButtonNode;
@@ -63,6 +76,10 @@ export declare function kanban<M extends ModelRef>(model: M, spec: Omit<ViewInpu
         readonly subtitle?: FieldKey<M>;
         readonly footer?: readonly FieldInput<FieldKey<M>>[];
         readonly badges?: readonly FieldInput<FieldKey<M>>[];
+        readonly image?: FieldKey<M>;
+        readonly avatar?: FieldKey<M>;
+        readonly progress?: FieldKey<M>;
+        readonly color?: FieldKey<M>;
     };
 }): KanbanView;
 /** A window action. */

package/dist/views/builders.js

@@ -9,6 +9,10 @@ function fieldNode(input) {
 export function field(input) {
     return fieldNode(input);
 }
+/** A stat tile (RFC 0022 §3.1), for `k.stats` and for extensions appending to another module's row. */
+export function stat(input) {
+    return { ...input, kind: 'stat', model: nameOf(input.model) };
+}
 /** A list view. */
 export function list(model, spec) {
     return {
@@ -30,7 +34,13 @@ function kit() {
             children: children.map(child),
         }),
         notebook: (id, pages) => ({ kind: 'notebook', id, pages }),
-        page: (id, label, children) => ({ kind: 'page', id, label, children: children.map(child) }),
+        page: (id, label, children, options = {}) => ({
+            kind: 'page',
+            id,
+            label,
+            ...options,
+            children: children.map(child),
+        }),
         lines: (key, columns, options = {}) => ({
             kind: 'lines',
             id: key,
@@ -44,6 +54,12 @@ function kit() {
             component,
             ...(props === undefined ? {} : { props }),
         }),
+        stats: (id, children, options = {}) => ({
+            kind: 'stats',
+            id,
+            ...options,
+            children: children.map(stat),
+        }),
         button: (transition, options = {}) => {
             const { id, ...rest } = options;
             return { kind: 'button', id: id ?? transition, transition, ...rest };
@@ -76,6 +92,10 @@ export function kanban(model, spec) {
             ...(spec.card.subtitle === undefined ? {} : { subtitle: spec.card.subtitle }),
             footer: (spec.card.footer ?? []).map(fieldNode),
             badges: (spec.card.badges ?? []).map(fieldNode),
+            ...(spec.card.image === undefined ? {} : { image: spec.card.image }),
+            ...(spec.card.avatar === undefined ? {} : { avatar: spec.card.avatar }),
+            ...(spec.card.progress === undefined ? {} : { progress: spec.card.progress }),
+            ...(spec.card.color === undefined ? {} : { color: spec.card.color }),
         },
     };
 }

package/dist/views/condition.d.ts

@@ -21,3 +21,9 @@ export declare function holds(condition: Condition | undefined, values: Readonly
  * (relation paths, unknown operators).
  */
 export declare function evaluate(condition: Condition | undefined, values: Readonly<Record<string, unknown>>, env: ConditionEnv): boolean | undefined;
+/**
+ * A condition with its `$record` placeholders replaced by the record's values (`{ partner: { $record: 'id' } }` on
+ * record 42 becomes `{ partner: 42 }`); related values give their id. For stat tiles (RFC 0022 §3.1) and any
+ * filter a record page opens.
+ */
+export declare function resolveRecord(condition: Condition, values: Readonly<Record<string, unknown>>): Condition;

package/dist/views/condition.js

@@ -119,3 +119,23 @@ export function evaluate(condition, values, env) {
     }
     return unknown ? undefined : true;
 }
+const idOfValue = (v) => typeof v === 'object' && v !== null && !Array.isArray(v) && 'id' in v
+    ? v.id
+    : v;
+/**
+ * A condition with its `$record` placeholders replaced by the record's values (`{ partner: { $record: 'id' } }` on
+ * record 42 becomes `{ partner: 42 }`); related values give their id. For stat tiles (RFC 0022 §3.1) and any
+ * filter a record page opens.
+ */
+export function resolveRecord(condition, values) {
+    const walk = (value) => {
+        if (Array.isArray(value))
+            return value.map(walk);
+        if (typeof value !== 'object' || value === null)
+            return value;
+        if ('$record' in value)
+            return idOfValue(values[String(value.$record)]) ?? null;
+        return Object.fromEntries(Object.entries(value).map(([k, v]) => [k, walk(v)]));
+    };
+    return walk(condition);
+}

package/dist/views/documents.d.ts

@@ -46,6 +46,14 @@ export type Block = {
     readonly kind: 'signature';
     readonly id: string;
     readonly labels: readonly string[];
+}
+/** A QR code of a field's value (a ticket's check-in code, an e-invoice's signed QR), `size` millimetres wide. */
+ | {
+    readonly kind: 'qr';
+    readonly id: string;
+    readonly bind: string;
+    readonly size?: number;
+    readonly label?: string;
 } | {
     readonly kind: 'columns';
     readonly id: string;

package/dist/views/extend.d.ts

@@ -3,8 +3,8 @@
  * module dependency order, with the origin of every node recorded. An unknown anchor is an error at load time, not
  * a silently missing button.
  */
-import type { ButtonNode, FormNode, ResolvedView, ViewDefinition, ViewExtension } from './types.js';
-type AnyNode = FormNode | ButtonNode;
+import type { ButtonNode, FormNode, ResolvedView, StatNode, ViewDefinition, ViewExtension } from './types.js';
+type AnyNode = FormNode | ButtonNode | StatNode;
 /** A view or extension that cannot apply. */
 export declare class ViewDefinitionError extends Error {
     readonly view: string;

package/dist/views/extend.js

@@ -22,6 +22,8 @@ export function nodesOf(view) {
                 }
             if (node.kind === 'lines')
                 out.push(...node.columns);
+            if (node.kind === 'stats')
+                out.push(...node.children);
         }
     };
     switch (view.type) {
@@ -80,7 +82,7 @@ function applyIn(nodes, op) {
                     ...target,
                     children: [...target.children, ...added],
                 };
-            else if (target.kind === 'page')
+            else if (target.kind === 'page' || target.kind === 'stats')
                 out[index] = {
                     ...target,
                     children: [
@@ -122,6 +124,14 @@ function applyIn(nodes, op) {
                 }
             }
         }
+        if (node.kind === 'stats') {
+            const [children, done] = applyIn(node.children, op);
+            if (done) {
+                const out = [...nodes];
+                out[i] = { ...node, children };
+                return [out, true];
+            }
+        }
         if (node.kind === 'lines') {
             const [columns, done] = applyIn(node.columns, op);
             if (done) {

package/dist/views/index.d.ts

@@ -4,8 +4,8 @@
  * actions and search definitions, extension by anchors, client-side condition evaluation and load-time checks.
  * Shared by the server (validation, per-user filtering) and the UI (rendering). No dependencies.
  */
-export { action, calendar, cohort, dashboard, type FieldInput, type FieldKey, type FormKit, field, form, type GroupKey, gantt, graph, hierarchy, type ImplicitKey, kanban, list, type MeasureInput, type ModelHandle, map, pivot, search, spreadsheet, } from './builders.js';
-export { type ConditionEnv, evaluate, holds } from './condition.js';
+export { action, calendar, cohort, dashboard, type FieldInput, type FieldKey, type FormKit, field, form, type GroupKey, gantt, graph, hierarchy, type ImplicitKey, kanban, list, type MeasureInput, type ModelHandle, map, pivot, type StatInput, search, spreadsheet, stat, } from './builders.js';
+export { type ConditionEnv, evaluate, holds, resolveRecord } from './condition.js';
 export type { Block, Layout } from './documents.js';
 export { nodesOf, resolveView, ViewDefinitionError } from './extend.js';
 export type * from './types.js';

package/dist/views/index.js

@@ -4,8 +4,8 @@
  * actions and search definitions, extension by anchors, client-side condition evaluation and load-time checks.
  * Shared by the server (validation, per-user filtering) and the UI (rendering). No dependencies.
  */
-export { action, calendar, cohort, dashboard, field, form, gantt, graph, hierarchy, kanban, list, map, pivot, search, spreadsheet, } from './builders.js';
-export { evaluate, holds } from './condition.js';
+export { action, calendar, cohort, dashboard, field, form, gantt, graph, hierarchy, kanban, list, map, pivot, search, spreadsheet, stat, } from './builders.js';
+export { evaluate, holds, resolveRecord } from './condition.js';
 export { nodesOf, resolveView, ViewDefinitionError } from './extend.js';
 export { validateAction, validateSearch, validateView, } from './validate.js';
 /** Package identity. */