shutro-erp 0.3.2 → 0.3.4

package/dist/ui/styles.css

@@ -1,5 +1,6 @@
 /*
- * Kosh design tokens (RFC 0007): colors, radius and typography as CSS variables, light and dark themes, Tailwind v4
+ * Kosh design tokens (RFC 0007, refreshed by RFC 0018): colors, radius, typography and density as CSS variables, light
+ * and dark themes with the company's accent, Tailwind v4
  * utilities mapped onto them. Components use logical properties only (ms/me, ps/pe, start/end), so RTL needs no
  * overrides. Import once from the app: `@import './styles.css';` after `@import 'tailwindcss';`.
  */
@@ -30,23 +31,33 @@
   --font-sans: var(--font-family);
 }
 
-:root {
-  --radius: 0.5rem;
+/* `.light` (and `.dark`) re-declare the tokens on a part of the page: a preview in the other theme, or with another
+   accent — custom properties are computed where they are declared, so the accent recomputes there. */
+:root,
+.light {
+  /* 6 px controls; cards and popovers use --radius-lg (10 px). */
+  --radius: 0.375rem;
   --font-family: "Inter", "Noto Sans Bengali", "Noto Sans Arabic", system-ui, sans-serif;
-  /* Light: contrast ratios ≥ 4.5:1 for text on background and surface (WCAG AA). */
-  --background: oklch(0.985 0.002 250);
-  --foreground: oklch(0.21 0.02 260);
+  /* The accent (RFC 0018): a company's brand hue and chroma, indigo by default; each theme fixes its lightness. */
+  --accent-h: 277;
+  --accent-c: 0.2;
+  /* Density (RFC 0018): comfortable by default, compact as a user setting. */
+  --control-h: 2.25rem;
+  --cell-py: 0.375rem;
+  /* Light: neutral (zinc) surfaces; text contrast ≥ 4.5:1 on background and surface (WCAG AA). */
+  --background: oklch(0.985 0.002 286);
+  --foreground: oklch(0.21 0.006 286);
   --surface: oklch(1 0 0);
-  --surface-foreground: oklch(0.21 0.02 260);
-  --muted: oklch(0.955 0.005 250);
-  --muted-foreground: oklch(0.45 0.02 260);
-  --border: oklch(0.9 0.008 250);
-  --input: oklch(0.86 0.01 250);
-  --ring: oklch(0.55 0.17 255);
-  --primary: oklch(0.5 0.17 255);
+  --surface-foreground: oklch(0.21 0.006 286);
+  --muted: oklch(0.965 0.003 286);
+  --muted-foreground: oklch(0.47 0.014 286);
+  --border: oklch(0.92 0.004 286);
+  --input: oklch(0.87 0.007 286);
+  --ring: oklch(0.55 var(--accent-c) var(--accent-h));
+  --primary: oklch(0.5 var(--accent-c) var(--accent-h));
   --primary-foreground: oklch(0.99 0 0);
-  --accent: oklch(0.94 0.03 255);
-  --accent-foreground: oklch(0.3 0.1 255);
+  --accent: oklch(0.96 calc(var(--accent-c) * 0.16) var(--accent-h));
+  --accent-foreground: oklch(0.38 var(--accent-c) var(--accent-h));
   --danger: oklch(0.52 0.2 25);
   --danger-foreground: oklch(0.99 0 0);
   --success: oklch(0.5 0.13 150);
@@ -56,20 +67,25 @@
   color-scheme: light;
 }
 
+[data-density="compact"] {
+  --control-h: 2rem;
+  --cell-py: 0.125rem;
+}
+
 .dark {
-  --background: oklch(0.17 0.015 260);
-  --foreground: oklch(0.94 0.01 250);
-  --surface: oklch(0.21 0.017 260);
-  --surface-foreground: oklch(0.94 0.01 250);
-  --muted: oklch(0.25 0.017 260);
-  --muted-foreground: oklch(0.72 0.02 255);
-  --border: oklch(0.3 0.02 260);
-  --input: oklch(0.36 0.02 260);
-  --ring: oklch(0.7 0.14 255);
-  --primary: oklch(0.68 0.15 255);
-  --primary-foreground: oklch(0.16 0.02 260);
-  --accent: oklch(0.3 0.05 255);
-  --accent-foreground: oklch(0.92 0.04 255);
+  --background: oklch(0.145 0.004 286);
+  --foreground: oklch(0.95 0.003 286);
+  --surface: oklch(0.185 0.005 286);
+  --surface-foreground: oklch(0.95 0.003 286);
+  --muted: oklch(0.24 0.006 286);
+  --muted-foreground: oklch(0.72 0.012 286);
+  --border: oklch(0.29 0.006 286);
+  --input: oklch(0.35 0.008 286);
+  --ring: oklch(0.7 min(var(--accent-c), 0.16) var(--accent-h));
+  --primary: oklch(0.7 min(var(--accent-c), 0.16) var(--accent-h));
+  --primary-foreground: oklch(0.16 0.01 var(--accent-h));
+  --accent: oklch(0.28 calc(var(--accent-c) * 0.3) var(--accent-h));
+  --accent-foreground: oklch(0.9 calc(var(--accent-c) * 0.35) var(--accent-h));
   --danger: oklch(0.65 0.19 25);
   --danger-foreground: oklch(0.16 0.02 260);
   --success: oklch(0.7 0.14 150);
@@ -87,6 +103,21 @@
     background: var(--background);
     color: var(--foreground);
     font-family: var(--font-family);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    /* Inter: the single-storey a and open digits; numbers line up in columns. */
+    font-feature-settings: "cv11", "ss01";
+    -webkit-font-smoothing: antialiased;
+  }
+  h1,
+  h2,
+  h3 {
+    letter-spacing: -0.011em;
+  }
+  td,
+  .tabular-nums,
+  input[inputmode="decimal"] {
+    font-variant-numeric: tabular-nums;
   }
   :focus-visible {
     outline: 2px solid var(--ring);
@@ -103,3 +134,14 @@
     }
   }
 }
+
+/* Outside the layers on purpose: unlayered styles win over Tailwind's utilities (the inputs' border classes). */
+/* Saved records read first (RFC 0018 §4.2): their inputs show no box until hovered or focused. */
+.kosh-quiet
+:is(input:not([type="checkbox"]):not([type="color"]), textarea, button[role="combobox"]):not(
+  :hover
+):not(:focus-visible):not(:focus):not([aria-invalid="true"]) {
+  border-color: transparent;
+  background-color: transparent;
+  box-shadow: none;
+}

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

@@ -0,0 +1,10 @@
+import { type ReactElement } from 'react';
+/** A typed date as ISO, or null: `2026-10-28`, or `28/10/2026` (`10/28/2026` where months come first). */
+export declare function parseTypedDate(text: string, lang: string): string | null;
+export declare function DateField({ id, value, onChange, invalid, required, }: {
+    readonly id?: string;
+    readonly value: string | null;
+    readonly onChange: (iso: string | null) => void;
+    readonly invalid?: boolean;
+    readonly required?: boolean;
+}): ReactElement;

package/dist/ui/views/DateField.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The date field (RFC 0018 §4.2): the date as the user's language writes it (`28 Oct 2026`, `২৮ অক্টো, ২০২৬`), typed
+ * (ISO `2026-10-28`, or day, month and year in the language's order) or picked on a calendar — arrows move by
+ * day and week, Page Up / Page Down by month, Home / End to the week's ends, Enter picks. Values stay ISO dates.
+ */
+import { CalendarDays, ChevronLeft, ChevronRight } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Input, Popover, PopoverContent, PopoverTrigger, } from '../components/primitives.js';
+import { useKosh } from '../context.js';
+import { cn } from '../lib/cn.js';
+const pad = (n) => String(n).padStart(2, '0');
+const iso = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+const fromIso = (value) => {
+    const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(value);
+    if (m === null)
+        return null;
+    const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+    return Number.isNaN(d.getTime()) ? null : d;
+};
+const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+const addMonths = (d, n) => {
+    const target = new Date(d.getFullYear(), d.getMonth() + n, 1);
+    const last = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+    return new Date(target.getFullYear(), target.getMonth(), Math.min(d.getDate(), last));
+};
+/** The order of day, month and year in `lang`'s numeric dates (`dmy`, `mdy`, `ymd`). */
+function orderOf(lang) {
+    try {
+        return new Intl.DateTimeFormat(lang, { day: 'numeric', month: 'numeric', year: 'numeric' })
+            .formatToParts(new Date(2026, 9, 28))
+            .map((p) => p.type[0])
+            .filter((c) => c === 'd' || c === 'm' || c === 'y')
+            .join('');
+    }
+    catch {
+        return 'dmy';
+    }
+}
+/** A typed date as ISO, or null: `2026-10-28`, or `28/10/2026` (`10/28/2026` where months come first). */
+export function parseTypedDate(text, lang) {
+    const raw = text.trim();
+    if (raw === '')
+        return null;
+    const isoDate = fromIso(raw);
+    if (isoDate !== null && /^\d{4}-\d{2}-\d{2}$/.test(raw))
+        return iso(isoDate);
+    // Any digits (Bengali ones too) separated by / . - or spaces.
+    const digits = raw.replace(/[০-৯]/g, (c) => String(c.charCodeAt(0) - 0x09e6));
+    const parts = digits.split(/[\s/.-]+/).filter((p) => p !== '');
+    if (parts.length !== 3 || parts.some((p) => !/^\d+$/.test(p)))
+        return null;
+    const order = orderOf(lang);
+    const at = (c) => Number(parts[order.indexOf(c)]);
+    let year = at('y');
+    if (year < 100)
+        year += 2000;
+    const d = new Date(year, at('m') - 1, at('d'));
+    return d.getMonth() === at('m') - 1 && d.getDate() === at('d') ? iso(d) : null;
+}
+/** The first day of the week in `lang` (0 Sunday … 6 Saturday). */
+function weekStart(lang) {
+    try {
+        const locale = new Intl.Locale(lang);
+        const first = (locale.getWeekInfo?.() ?? locale.weekInfo)?.firstDay;
+        return first === undefined ? 1 : first % 7;
+    }
+    catch {
+        return 1;
+    }
+}
+function Calendar({ value, onPick, lang, }) {
+    const { t } = useTranslation();
+    const { format } = useKosh();
+    const today = useMemo(() => new Date(), []);
+    const [focus, setFocus] = useState(() => (value === null ? null : fromIso(value)) ?? today);
+    const grid = useRef(null);
+    const first = weekStart(lang);
+    const month = new Date(focus.getFullYear(), focus.getMonth(), 1);
+    const start = addDays(month, -((month.getDay() - first + 7) % 7));
+    const days = Array.from({ length: 42 }, (_, i) => addDays(start, i));
+    const weekday = new Intl.DateTimeFormat(lang, { weekday: 'narrow' });
+    const title = new Intl.DateTimeFormat(lang, { month: 'long', year: 'numeric' }).format(month);
+    useEffect(() => {
+        grid.current?.querySelector(`[data-day="${iso(focus)}"]`)?.focus();
+    }, [focus]);
+    const onKey = (e) => {
+        const moves = {
+            ArrowLeft: () => addDays(focus, document.dir === 'rtl' ? 1 : -1),
+            ArrowRight: () => addDays(focus, document.dir === 'rtl' ? -1 : 1),
+            ArrowUp: () => addDays(focus, -7),
+            ArrowDown: () => addDays(focus, 7),
+            PageUp: () => addMonths(focus, -1),
+            PageDown: () => addMonths(focus, 1),
+            Home: () => addDays(focus, -((focus.getDay() - first + 7) % 7)),
+            End: () => addDays(focus, 6 - ((focus.getDay() - first + 7) % 7)),
+        };
+        const move = moves[e.key];
+        if (move === undefined)
+            return;
+        e.preventDefault();
+        setFocus(move());
+    };
+    return (_jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": t('views.previousMonth'), onClick: () => setFocus(addMonths(focus, -1)), children: _jsx(ChevronLeft, { className: "rtl:rotate-180", "aria-hidden": true }) }), _jsx("p", { className: "text-sm font-medium", "aria-live": "polite", children: title }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": t('views.nextMonth'), onClick: () => setFocus(addMonths(focus, 1)), children: _jsx(ChevronRight, { className: "rtl:rotate-180", "aria-hidden": true }) })] }), _jsxs("table", { ref: grid, "aria-label": title, className: "border-separate border-spacing-0.5", onKeyDown: onKey, children: [_jsx("thead", { children: _jsx("tr", { children: days.slice(0, 7).map((d) => (_jsx("th", { scope: "col", className: "py-1 text-center text-xs font-normal text-muted-foreground", children: weekday.format(d) }, iso(d)))) }) }), _jsx("tbody", { children: [0, 1, 2, 3, 4, 5].map((week) => (_jsx("tr", { children: days.slice(week * 7, week * 7 + 7).map((d) => {
+                                const key = iso(d);
+                                const selected = key === value;
+                                const inMonth = d.getMonth() === month.getMonth();
+                                return (_jsx("td", { className: "p-0", children: _jsx("button", { type: "button", "data-day": key, tabIndex: key === iso(focus) ? 0 : -1, "aria-pressed": selected, "aria-label": format.date(key), onClick: () => onPick(key), className: cn('size-8 rounded-md text-sm tabular-nums hover:bg-muted', !inMonth && 'text-muted-foreground/60', key === iso(today) && 'font-semibold underline underline-offset-4', selected && 'bg-primary text-primary-foreground hover:bg-primary'), children: new Intl.NumberFormat(lang).format(d.getDate()) }) }, key));
+                            }) }, week))) })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => onPick(iso(today)), children: t('views.today') }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => onPick(null), children: t('views.clear') })] })] }));
+}
+export function DateField({ id, value, onChange, invalid, required, }) {
+    const { t, i18n } = useTranslation();
+    const { format } = useKosh();
+    const lang = i18n.resolvedLanguage ?? i18n.language ?? 'en';
+    const [typing, setTyping] = useState(null);
+    const [open, setOpen] = useState(false);
+    const shown = typing ?? (value === null ? '' : format.date(value));
+    const bad = typing !== null && typing.trim() !== '' && parseTypedDate(typing, lang) === null;
+    return (_jsxs("div", { className: "relative", children: [_jsx(Input, { id: id, value: shown, required: required, placeholder: t('views.datePlaceholder'), "aria-invalid": invalid === true || bad ? true : undefined, className: "pe-10", onFocus: () => setTyping(value ?? ''), onChange: (e) => {
+                    setTyping(e.target.value);
+                    const parsed = parseTypedDate(e.target.value, lang);
+                    if (parsed !== null || e.target.value.trim() === '')
+                        onChange(parsed);
+                }, onBlur: () => setTyping(null) }), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "absolute inset-y-0 end-0 h-full", "aria-label": t('views.pickDate'), children: _jsx(CalendarDays, { "aria-hidden": true }) }) }), _jsx(PopoverContent, { align: "end", className: "w-auto", children: _jsx(Calendar, { value: value, lang: lang, onPick: (picked) => {
+                                onChange(picked);
+                                setOpen(false);
+                            } }) })] })] }));
+}

package/dist/ui/views/FormView.js

@@ -8,7 +8,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { evaluate, holds, } from '../../views/index.js';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useBlocker, useParams } from '@tanstack/react-router';
-import { ArrowLeft, Check, ChevronLeft, ChevronRight, CircleDot, MoreHorizontal, Plus, Trash2, } from 'lucide-react';
+import { ArrowLeft, Check, ChevronLeft, ChevronRight, CircleDot, MoreHorizontal, PanelRight, Plus, Trash2, } from 'lucide-react';
 import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ApiError, NetworkError, } from '../api.js';
@@ -18,7 +18,9 @@ import { useDesign } from '../design.js';
 import { cn } from '../lib/cn.js';
 import { useLiveRecord } from '../live.js';
 import { useToast } from '../shell/toast.js';
+import { StatusChip } from './StatusChip.js';
 import { PrefetchedNames, useRowNames } from './widgets.js';
+const pick = (row, keys) => Object.fromEntries(keys.filter((k) => k in row).map((k) => [k, row[k]]));
 /** A line's values as the server takes them: many2many as `{ set }` (a line's taxes). */
 function lineValues(values, fields) {
     const out = {};
@@ -26,6 +28,58 @@ function lineValues(values, fields) {
         out[key] = fields[key]?.kind === 'many2many' && Array.isArray(value) ? { set: value } : value;
     return out;
 }
+/**
+ * The one2many and many2many fields a form shows (its lines, its tags): a record's default fields leave them out,
+ * so the form asks for them by name.
+ */
+const RAIL_KEY = 'kosh.rail';
+/** Whether the record pages' right rail is open (RFC 0018: open by default), remembered per browser. */
+function useRail() {
+    const [open, setOpen] = useState(() => {
+        try {
+            return localStorage.getItem(RAIL_KEY) !== 'closed';
+        }
+        catch {
+            return true;
+        }
+    });
+    return [
+        open,
+        (next) => {
+            setOpen(next);
+            try {
+                if (next)
+                    localStorage.removeItem(RAIL_KEY);
+                else
+                    localStorage.setItem(RAIL_KEY, 'closed');
+            }
+            catch {
+                // storage unavailable: the choice lasts for this page
+            }
+        },
+    ];
+}
+function relationFieldsOf(sheet, fields) {
+    const out = new Set();
+    const walk = (nodes) => {
+        for (const node of nodes) {
+            if (node.kind === 'lines')
+                out.add(node.field);
+            else if (node.kind === 'field') {
+                const kind = fields[node.field]?.kind;
+                if (kind === 'one2many' || kind === 'many2many')
+                    out.add(node.field);
+            }
+            else if (node.kind === 'group')
+                walk(node.children);
+            else if (node.kind === 'notebook')
+                for (const page of node.pages)
+                    walk(page.children);
+        }
+    };
+    walk(sheet);
+    return [...out];
+}
 function commandsOf(lines, fields) {
     return {
         ...(lines.rows.some((r) => r.id === undefined)
@@ -108,6 +162,7 @@ export function FormView({ served, recordId, defaults, onSaved, onBack, crumbs,
     const toast = useToast();
     const queryClient = useQueryClient();
     const formId = useId();
+    const [railOpen, setRailOpen] = useRail();
     const route = useParams({ strict: false });
     const view = served.view;
     if (view.type !== 'form')
@@ -130,7 +185,24 @@ export function FormView({ served, recordId, defaults, onSaved, onBack, crumbs,
                 },
                 etag: null,
             }
-            : api.get(model, recordId),
+            : (async () => {
+                // The defaults (what conditions and the header read), then the lines and tags the form shows.
+                const relations = relationFieldsOf(view.sheet, fields);
+                const [record, related] = await Promise.all([
+                    api.get(model, recordId),
+                    relations.length === 0 ? null : api.get(model, recordId, relations),
+                ]);
+                return related === null
+                    ? record
+                    : {
+                        ...record,
+                        record: {
+                            ...related.record,
+                            ...record.record,
+                            ...pick(related.record, relations),
+                        },
+                    };
+            })(),
     });
     // Proposed values (from a document) are unsaved changes: Save, Discard and the leave guard apply to them.
     // Proposed lines of a one2many are new rows of its line editor.
@@ -374,13 +446,84 @@ export function FormView({ served, recordId, defaults, onSaved, onBack, crumbs,
             (state === undefined || spec.from.includes(String(state))) &&
             visible(b.visibleWhen));
     });
+    // The rail (RFC 0018 §4.2): the summary (the view's `summary` fields, else its `totals` group), the record's
+    // details, and the timeline.
+    const totalsGroup = view.summary === undefined
+        ? view.sheet.find((n) => n.kind === 'group' && n.id === 'totals')
+        : undefined;
+    const summaryNodes = view.summary !== undefined
+        ? view.summary.map((key) => ({ kind: 'field', id: `summary-${key}`, field: key }))
+        : totalsGroup?.kind === 'group'
+            ? totalsGroup.children.filter((n) => n.kind === 'field')
+            : [];
+    const row = (node) => {
+        const field = fields[node.field];
+        if (field === undefined || !visible(node.visibleWhen))
+            return null;
+        const Widget = registry.widget(node, field);
+        return (_jsxs("div", { className: "flex items-baseline justify-between gap-3 py-1 text-sm", children: [_jsx("dt", { className: "text-muted-foreground", children: node.label ?? field.label }), _jsx("dd", { className: "text-end font-medium tabular-nums", children: _jsx(Widget, { id: `${formId}-rail-${node.id}`, node: node, field: field, value: values[node.field], record: values, readonly: true }) })] }, node.id));
+    };
+    const detailNodes = ['createdBy', 'createdAt', 'updatedBy', 'updatedAt', 'company']
+        .filter((key) => fields[key] !== undefined && values[key] !== undefined && values[key] !== null)
+        .map((key) => ({ kind: 'field', id: `detail-${key}`, field: key }));
+    const chatter = view.chatter === true && registry.component('chatter') !== undefined && !isNew
+        ? registry.component('chatter')
+        : undefined;
+    const rail = (_jsxs(_Fragment, { children: [summaryNodes.length === 0 ? null : (_jsxs("section", { className: "rounded-lg border bg-surface p-4", "aria-labelledby": `${formId}-summary`, children: [_jsx("h2", { id: `${formId}-summary`, className: "mb-1 text-sm font-semibold", children: t('views.summary') }), _jsx("dl", { className: "divide-y", children: summaryNodes.map(row) })] })), isNew || detailNodes.length === 0 ? null : (_jsxs("section", { className: "rounded-lg border bg-surface p-4", "aria-labelledby": `${formId}-details`, children: [_jsx("h2", { id: `${formId}-details`, className: "mb-1 text-sm font-semibold", children: t('views.details') }), _jsx("dl", { children: detailNodes.map(row) })] })), chatter === undefined
+                ? null
+                : (() => {
+                    const Chatter = chatter;
+                    return (_jsx(Chatter, { node: { kind: 'component', id: 'chatter', component: 'chatter' }, record: record ?? null, model: model, served: served, api: api, version: loaded.data?.etag ?? null, reload: () => void loaded.refetch() }));
+                })()] }));
+    const showRail = railOpen;
+    // The main column: each group, notebook and table of lines a card; loose fields together.
+    const sections = [];
+    for (const node of view.sheet) {
+        if (node === totalsGroup)
+            continue;
+        const loose = node.kind === 'field' || node.kind === 'component';
+        const last = sections[sections.length - 1];
+        if (loose && last?.key.startsWith('loose-') === true)
+            last.nodes.push(node);
+        else
+            sections.push({ key: loose ? `loose-${node.id}` : node.id, nodes: [node] });
+    }
+    // The key facts under the title: the view's `subtitle`, else the first many2one, date and monetary fields.
+    const flatFields = (nodes) => nodes.flatMap((n) => n.kind === 'field'
+        ? [n]
+        : n.kind === 'group'
+            ? flatFields(n.children)
+            : n.kind === 'notebook'
+                ? n.pages.flatMap((p) => flatFields(p.children))
+                : []);
+    const facts = isNew
+        ? []
+        : view.subtitle !== undefined
+            ? view.subtitle
+                .filter((key) => fields[key] !== undefined)
+                .map((key) => ({ kind: 'field', id: `fact-${key}`, field: key }))
+            : (() => {
+                const candidates = flatFields(view.sheet).filter((n) => n.field !== statusbar &&
+                    values[n.field] !== null &&
+                    values[n.field] !== undefined &&
+                    values[n.field] !== '');
+                const first = (kinds) => candidates.find((n) => kinds.includes(fields[n.field]?.kind ?? ''));
+                // The total, when the summary has one; else its first amount.
+                const totals = summaryNodes.find((n) => n.field === 'amountTotal') ??
+                    summaryNodes.find((n) => fields[n.field]?.kind === 'monetary');
+                return [first(['many2one']), first(['date']), totals ?? first(['monetary'])].filter((n) => n !== undefined);
+            })();
     const named = [values['displayName'], values['name']].find((v) => typeof v === 'string' && v.trim() !== '');
     const title = named === undefined ? (isNew ? t('views.new') : `#${recordId}`) : String(named);
-    return (_jsxs(PrefetchedNames.Provider, { value: names, children: [_jsxs("form", { "aria-label": title, "data-kosh-form": true, className: "grid gap-4", onSubmit: (e) => {
+    return (_jsxs(PrefetchedNames.Provider, { value: names, children: [_jsxs("form", { "aria-label": title, "data-kosh-form": true, className: cn('grid gap-4', !isNew && 'kosh-quiet'), onSubmit: (e) => {
                     e.preventDefault();
                     if (dirty && !locked)
                         save.mutate();
-                }, children: [_jsxs("div", { className: "sticky top-12 z-20 -mx-4 flex flex-wrap items-center justify-between gap-2 border-b bg-background/95 px-4 py-2 backdrop-blur", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": t('views.back'), "data-kosh-back": true, onClick: onBack, children: _jsx(ArrowLeft, { className: "rtl:-scale-x-100", "aria-hidden": true }) }), _jsxs("div", { className: "min-w-0", children: [crumbs === undefined || crumbs.length === 0 ? null : (_jsx("nav", { "aria-label": t('views.breadcrumbs'), children: _jsx("ol", { className: "flex flex-wrap items-center gap-1 text-xs text-muted-foreground", children: crumbs.map((c, i) => (_jsxs("li", { className: "flex items-center gap-1", children: [c.onClick === undefined ? (_jsx("span", { children: c.label })) : (_jsx("button", { type: "button", className: "hover:text-foreground hover:underline", onClick: c.onClick, children: c.label })), _jsx(ChevronRight, { className: "size-3 rtl:-scale-x-100", "aria-hidden": true })] }, i))) }) })), _jsx("h1", { className: "truncate text-lg font-semibold", children: title })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [live.others.length === 0 ? null : (_jsx("ul", { className: "flex items-center -space-x-1", "aria-label": t('views.viewing', {
+                }, children: [_jsxs("div", { className: "sticky top-12 z-20 -mx-4 flex flex-wrap items-center justify-between gap-2 border-b bg-background/95 px-4 py-2 backdrop-blur", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": t('views.back'), "data-kosh-back": true, onClick: onBack, children: _jsx(ArrowLeft, { className: "rtl:-scale-x-100", "aria-hidden": true }) }), _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2.5", children: [_jsx("h1", { className: "truncate text-xl font-semibold", children: title }), statusbar === undefined || fields[statusbar] === undefined || isNew ? null : (_jsx(StatusChip, { field: fields[statusbar], value: state, transitions: served.transitions.filter((tr) => tr.field === statusbar) })), locked && !isNew ? (_jsx("span", { className: "rounded-full border px-2 py-0.5 text-xs text-muted-foreground", children: t('views.readonly') })) : null] }), facts.length === 0 ? null : (_jsx("p", { className: "mt-0.5 flex flex-wrap items-center gap-x-2 text-sm text-muted-foreground", children: facts.map((node, i) => {
+                                                    const field = fields[node.field];
+                                                    const Widget = registry.widget(node, field);
+                                                    return (_jsxs("span", { className: "flex items-center gap-2", title: field.label, children: [i === 0 ? null : _jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsxs("span", { className: "sr-only", children: [field.label, ": "] }), _jsx(Widget, { id: `${formId}-fact-${node.id}`, node: node, field: field, value: values[node.field], record: values, readonly: true })] }, node.id));
+                                                }) }))] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [live.others.length === 0 ? null : (_jsx("ul", { className: "flex items-center -space-x-1", "aria-label": t('views.viewing', {
                                             names: live.others.map((u) => u.name).join(', '),
                                         }), title: t('views.viewing', { names: live.others.map((u) => u.name).join(', ') }), children: live.others.slice(0, 4).map((u) => (_jsx("li", { className: "flex size-6 items-center justify-center rounded-full border-2 border-surface bg-accent text-[10px] font-semibold text-accent-foreground", children: u.name
                                                 .split(/\s+/)
@@ -390,23 +533,20 @@ export function FormView({ served, recordId, defaults, onSaved, onBack, crumbs,
                                                     setChanges({});
                                                     setLines(new Map());
                                                     setProblem(null);
-                                                }, children: t('views.discard') }), _jsx(Button, { type: "submit", variant: "primary", busy: save.isPending, "data-kosh-save": true, children: t('views.save') })] })) : null, !isNew && served.operations.unlink ? (_jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": "Actions", children: _jsx(MoreHorizontal, { "aria-hidden": true }) }) }), _jsx(MenuContent, { children: _jsxs(MenuItem, { onSelect: () => setDeleting(true), children: [_jsx(Trash2, { className: "size-4", "aria-hidden": true }), t('views.delete')] }) })] })) : null] })] }), live.changedByOther ? (_jsx(Alert, { tone: "warning", action: _jsx(Button, { type: "button", size: "sm", onClick: () => {
-                                setChanges({});
-                                setLines(new Map());
-                                live.dismiss();
-                                void loaded.refetch();
-                            }, children: t('views.reload') }), children: t('views.changedByOther') })) : null, problem === null ? null : (_jsx(Alert, { tone: problem.kind === 'stale-record' ? 'warning' : 'danger', action: problem.kind === 'stale-record' ? (_jsx(Button, { type: "button", size: "sm", onClick: () => {
-                                setChanges({});
-                                setProblem(null);
-                                void loaded.refetch();
-                            }, children: t('views.reload') })) : undefined, children: problem.kind === 'stale-record' ? t('views.stale') : problem.message })), warnings.map((w) => (_jsx(Alert, { tone: "info", children: w }, w))), statusbar === undefined && buttons.length === 0 ? null : (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 rounded-lg border bg-surface px-3 py-2", children: [_jsx("div", { className: "flex flex-wrap gap-2", children: buttons.map((b) => (_jsx(Button, { type: "button", size: "sm", variant: b.primary === true ? 'primary' : 'secondary', busy: transition.isPending && transition.variables === b.transition, onClick: () => b.confirm === undefined ? transition.mutate(b.transition) : setConfirming(b), children: b.label ?? b.transition }, b.id))) }), statusbar === undefined ? null : (_jsx("ol", { "aria-label": fields[statusbar]?.label ?? statusbar, className: "flex flex-wrap items-center gap-1 text-xs", children: (fields[statusbar]?.options ?? []).map((o) => (_jsx("li", { "aria-current": o.value === state ? 'step' : undefined, className: cn('rounded-full px-2.5 py-1', o.value === state
-                                        ? 'bg-primary text-primary-foreground'
-                                        : 'bg-muted text-muted-foreground'), children: o.label }, o.value))) }))] })), _jsxs("div", { className: "grid gap-6 rounded-lg border bg-surface p-5", children: [locked && !isNew ? (_jsx("p", { className: "text-xs text-muted-foreground", children: t('views.readonly') })) : null, _jsx("div", { className: "grid gap-x-6 gap-y-4 sm:grid-cols-2", children: renderNodes(view.sheet) })] }), view.chatter === true && registry.component('chatter') !== undefined && !isNew
-                        ? (() => {
-                            const Chatter = registry.component('chatter');
-                            return (_jsx(Chatter, { node: { kind: 'component', id: 'chatter', component: 'chatter' }, record: record ?? null, model: model, served: served, api: api, version: loaded.data?.etag ?? null, reload: () => void loaded.refetch() }));
-                        })()
-                        : null] }), _jsx(Dialog, { open: confirming !== null, onOpenChange: (open) => !open && setConfirming(null), title: confirming?.label ?? confirming?.transition ?? '', description: confirming?.confirm ?? '', footer: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setConfirming(null), children: t('views.no') }), _jsx(Button, { variant: "primary", onClick: () => {
+                                                }, children: t('views.discard') }), _jsx(Button, { type: "submit", variant: "primary", busy: save.isPending, "data-kosh-save": true, children: t('views.save') })] })) : null, _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "hidden xl:inline-flex", "aria-pressed": railOpen, "aria-label": railOpen ? t('views.hidePanel') : t('views.showPanel'), title: railOpen ? t('views.hidePanel') : t('views.showPanel'), onClick: () => setRailOpen(!railOpen), children: _jsx(PanelRight, { className: "rtl:-scale-x-100", "aria-hidden": true }) }), !isNew && served.operations.unlink ? (_jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": "Actions", children: _jsx(MoreHorizontal, { "aria-hidden": true }) }) }), _jsx(MenuContent, { children: _jsxs(MenuItem, { onSelect: () => setDeleting(true), children: [_jsx(Trash2, { className: "size-4", "aria-hidden": true }), t('views.delete')] }) })] })) : null] })] }), _jsxs("div", { className: cn('grid gap-4', showRail && 'xl:grid-cols-[minmax(0,1fr)_20rem] xl:items-start'), children: [_jsxs("div", { className: "grid min-w-0 content-start gap-4", children: [live.changedByOther ? (_jsx(Alert, { tone: "warning", action: _jsx(Button, { type: "button", size: "sm", onClick: () => {
+                                                setChanges({});
+                                                setLines(new Map());
+                                                live.dismiss();
+                                                void loaded.refetch();
+                                            }, children: t('views.reload') }), children: t('views.changedByOther') })) : null, problem === null ? null : (_jsx(Alert, { tone: problem.kind === 'stale-record' ? 'warning' : 'danger', action: problem.kind === 'stale-record' ? (_jsx(Button, { type: "button", size: "sm", onClick: () => {
+                                                setChanges({});
+                                                setProblem(null);
+                                                void loaded.refetch();
+                                            }, children: t('views.reload') })) : undefined, children: problem.kind === 'stale-record' ? t('views.stale') : problem.message })), warnings.map((w) => (_jsx(Alert, { tone: "info", children: w }, w))), buttons.length === 0 ? null : (_jsx("div", { role: "toolbar", "aria-label": t('views.recordActions'), className: "flex flex-wrap gap-2", children: _jsx("div", { className: "contents", children: buttons.map((b, i) => (_jsx(Button, { type: "button", size: "sm", variant: b.primary === true || (i === 0 && !buttons.some((x) => x.primary === true))
+                                                    ? 'primary'
+                                                    : 'secondary', busy: transition.isPending && transition.variables === b.transition, onClick: () => b.confirm === undefined ? transition.mutate(b.transition) : setConfirming(b), children: b.label ?? b.transition }, b.id))) }) })), sections.map((section) => (_jsx("section", { className: "rounded-lg border bg-surface p-5", children: _jsx("div", { className: "grid gap-x-6 gap-y-4 sm:grid-cols-2", children: renderNodes(section.nodes) }) }, section.key))), showRail ? null : rail] }), showRail ? (_jsx("aside", { "aria-label": t('views.recordPanel'), 
+                                // Beside the record when wide; under it otherwise (one grid column).
+                                className: "grid content-start gap-4 xl:sticky xl:top-28", children: rail })) : null] })] }), _jsx(Dialog, { open: confirming !== null, onOpenChange: (open) => !open && setConfirming(null), title: confirming?.label ?? confirming?.transition ?? '', description: confirming?.confirm ?? '', footer: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setConfirming(null), children: t('views.no') }), _jsx(Button, { variant: "primary", onClick: () => {
                                 if (confirming !== null)
                                     transition.mutate(confirming.transition);
                                 setConfirming(null);

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

@@ -1,4 +1,6 @@
 import { type ReactElement } from 'react';
 import type { ViewProps } from '../registry.js';
 /** The default list renderer. */
+/** A sum's label: "Total Credit limit", but "Total" alone for a column already called "Total" (no "Total Total"). */
+export declare function totalLabel(word: string, label: string): string;
 export declare function ListView(props: ViewProps): ReactElement;