clavarium-binder 0.1.1-next.2 → 0.1.1

package/bin/binder.mjs

@@ -17,6 +17,7 @@ export const HELP = `binder: the lists you were given, and their records.
   binder search "text"                 in every list you can see
   binder add LIST "title" [--description "text"] [--state S] [--due DATE] [--owner me] [--note "text"] [--field name=value]
   binder edit ID [--title "t"] [--description "text"] [--due DATE|none] [--owner me|ID|none] [--field name=value]
+         [--cover PICTURE|none]          the picture the card is shown by: one attached (its ref), or a photo field
   binder move ID STATE                 past a gate, only what a person approved
   binder note ID "text"                a short note: a decision, a fact, a result
   binder attach ID KIND REF ["title"]  KIND: message, file, asset, branch, link, record
@@ -56,7 +57,7 @@ export function read(argv) {
         case 'get': return rest[0] ? ['get', { id: rest[0] }] : { refused: 'say which record: binder get ID' };
         case 'search': return rest.length ? ['search', { text: rest.join(' ') }] : { refused: 'say what to look for' };
         case 'add': return rest.length >= 2 ? ['add', { list: rest[0], title: rest.slice(1).join(' '), state: flags.state, due, owners, note: flags.note, description: flags.description, ...has }] : { refused: 'binder add LIST "title"' };
-        case 'edit': return rest[0] ? ['edit', { id: rest[0], title: flags.title, description: flags.description, due, owners, ...has }] : { refused: 'say which record: binder edit ID' };
+        case 'edit': return rest[0] ? ['edit', { id: rest[0], title: flags.title, description: flags.description, due, owners, ...(flags.cover === undefined ? {} : { cover: flags.cover === 'none' ? '' : flags.cover }), ...has }] : { refused: 'say which record: binder edit ID' };
         case 'move': return rest.length === 2 ? ['move', { id: rest[0], state: rest[1] }] : { refused: 'binder move ID STATE' };
         case 'note': return rest.length >= 2 ? ['note', { id: rest[0], text: rest.slice(1).join(' ') }] : { refused: 'binder note ID "text"' };
         case 'attach': return rest.length >= 3 ? ['attach', { id: rest[0], kind: rest[1], ref: rest[2], title: rest.slice(3).join(' ') }] : { refused: 'binder attach ID KIND REF ["title"]' };

package/docs/protocol.md

@@ -64,3 +64,11 @@ whoever wrote it (`edit-note`).
 
 And the screen: `mount(element, { call, words, lang, people, picture, openAttached })`
 from `clavarium-binder/ui`, with `ui/binder-ui.css` and `ui/texts/*.json`.
+
+What a card shows: what is set, nothing about what is empty. The fields set
+make one line under its title; its state is said unless the card is in the
+first state and that is the list's only state not done (with no gate). Its
+picture -- the `cover` chosen (`binder edit ID --cover REF`, an attached
+picture or a photo field), else its photo field set, else its only picture
+attached, else none -- is put forward
+on its page and in Tiles, through the page's `picture(value)`.

package/host/binder-host.mjs

@@ -57,9 +57,9 @@ export function say(op, data, list) {
             const out = [`#${r.id} ${r.title}`, `  list: ${l.title}; state: ${st?.name ?? r.state}${r.approved ? ' (approved)' : ''}${r.archived ? '; archived' : ''}${owners(r) ? `; owners:${owners(r)}` : ''}${due(r)}`];
             if (r.description) out.push('Description:', ...r.description.split('\n').map((x) => (x ? `  ${x}` : '')));
             else out.push('No description yet: give one (what it is and why, 1-3 lines for a person) with binder edit ID --description "...".');
-            for (const f of l.fields) if (r.fields[f.id] !== undefined) out.push(`  ${f.name}: ${r.fields[f.id]}`);
+            for (const f of l.fields) if (r.fields[f.id] !== undefined) out.push(`  ${f.name}: ${r.fields[f.id]}${r.cover === `field:${f.id}` ? ' (cover)' : ''}`);
             if (r.notes.length) { out.push('Notes:'); for (const n of r.notes) out.push(`  ${day(n.at)} ${n.by.name}: ${n.text.replace(/\n/g, '\n    ')}${n.edited ? ' (edited)' : ''}`); }
-            if (r.attached.length) { out.push('Attached:'); for (const a of r.attached) out.push(`  ${a.kind} ${a.kind === 'record' ? `#${a.ref}` : a.ref}${a.title ? ` "${a.title}"` : ''}`); }
+            if (r.attached.length) { out.push('Attached:'); for (const a of r.attached) out.push(`  ${a.kind} ${a.kind === 'record' ? `#${a.ref}` : a.ref}${a.title ? ` "${a.title}"` : ''}${r.cover === a.id ? ' (cover)' : ''}`); }
             out.push(`History: ${history.length} change${history.length === 1 ? '' : 's'}, the last ${history.length ? `${day(history.at(-1).at)} by ${history.at(-1).by.name}` : 'none'}.`);
             return out.join('\n');
         }
@@ -89,7 +89,7 @@ export function keeper(dir, { sides = () => [], now = () => Date.now() } = {}) {
                 case 'get': data = store.record(a.id, who); break;
                 case 'search': data = store.search(a.text, who); break;
                 case 'add': data = store.add(a.list, { title: a.title, description: a.description, state: a.state, fields: a.fields, owners: me(a.owners), due: a.due, note: a.note }, who); break;
-                case 'edit': data = store.edit(a.id, { title: a.title, description: a.description, fields: a.fields, owners: me(a.owners), due: a.due }, who); break;
+                case 'edit': data = store.edit(a.id, { title: a.title, description: a.description, fields: a.fields, owners: me(a.owners), due: a.due, cover: a.cover }, who); break;
                 case 'move': { const r = store.move(a.id, a.state, who); data = { ...r, stateName: store.record(r.id, who).list.states.find((x) => x.id === r.state)?.name }; break; }
                 case 'note': data = store.note(a.id, a.text, who); break;
                 case 'attach': data = store.attach(a.id, { kind: a.kind, ref: a.ref, title: a.title }, who); break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clavarium-binder",
-  "version": "0.1.1-next.2",
+  "version": "0.1.1",
   "description": "Clavarium Binder: lists of records kept together by people and AI agents, each with its id (a command and an MCP server for agents, a keeper and a screen for the application). No dependency.",
   "license": "MIT",
   "homepage": "https://github.com/clavarium/clavarium-binder#readme",

package/server/binder.mjs

@@ -23,7 +23,7 @@ import { fileURLToPath } from 'node:url';
 import { randomUUID } from 'node:crypto';
 import { createInterface } from 'node:readline';
 
-export const VERSION = '0.1.1-next.2';
+export const VERSION = '0.1.1';
 export const FOLDER = '.binder';
 /* How long an ask waits for its answer. The keeper answers within a second or two. */
 export const WAIT_MS = 20_000;
@@ -68,7 +68,7 @@ export const TOOLS = [
     { name: 'get', description: 'One record whole: its fields, notes, what is attached, its history.', inputSchema: { type: 'object', properties: { id: S('the record number, as #12 or 12') }, required: ['id'] } },
     { name: 'search', description: 'Records whose title, notes or fields hold a text, in every list you can see.', inputSchema: { type: 'object', properties: { text: { type: 'string' } }, required: ['text'] } },
     { name: 'add', description: 'Add a record to a list (in its first state unless you say), with a short title and a description a person understands at a glance. You cannot add it approved: a person ticks it.', inputSchema: { type: 'object', properties: { list: S('its name or id'), title: { type: 'string' }, description: DESCRIBE, state: { type: 'string' }, due: S('2026-11-04 or 2026-11-04 09:00'), owner: S('"me", or an id'), note: { type: 'string' }, fields: { type: 'object', description: '{ field name: value }' } }, required: ['list', 'title'] } },
-    { name: 'edit', description: 'Change a record: title, description, fields, owners, due date (empty to remove it).', inputSchema: { type: 'object', properties: { id: { type: 'string' }, title: { type: 'string' }, description: DESCRIBE, due: { type: 'string' }, owner: S('"me", or an id; empty for nobody'), fields: { type: 'object' } }, required: ['id'] } },
+    { name: 'edit', description: 'Change a record: title, description, fields, owners, due date, cover picture (empty to remove it).', inputSchema: { type: 'object', properties: { id: { type: 'string' }, title: { type: 'string' }, description: DESCRIBE, due: { type: 'string' }, owner: S('"me", or an id; empty for nobody'), fields: { type: 'object' }, cover: S('the picture the card is shown by, when it has several: a picture attached (its ref) or a photo field; empty to remove it') }, required: ['id'] } },
     { name: 'move', description: 'Put a record in another state of its list. Past a gate (an approval), only once a person approved it.', inputSchema: { type: 'object', properties: { id: { type: 'string' }, state: { type: 'string' } }, required: ['id', 'state'] } },
     { name: 'note', description: 'Add a short note to a record: a decision, a fact, a result. Talking with the person stays in the chat.', inputSchema: { type: 'object', properties: { id: { type: 'string' }, text: { type: 'string' } }, required: ['id', 'text'] } },
     { name: 'attach', description: 'Attach something to a record: a message of the chat, a file, an asset, a branch, a link, another record.', inputSchema: { type: 'object', properties: { id: { type: 'string' }, kind: { type: 'string', enum: ['message', 'file', 'asset', 'branch', 'link', 'record'] }, ref: S('what it is: a path, a URL, repository:branch, a message id, a record number'), title: { type: 'string' } }, required: ['id', 'kind', 'ref'] } },
@@ -84,7 +84,7 @@ export function asked(name, a = {}) {
         case 'get': return ['get', { id: a.id }];
         case 'search': return ['search', { text: a.text }];
         case 'add': return ['add', { list: a.list, title: a.title, description: a.description, state: a.state, due: a.due, owners, note: a.note, fields: a.fields }];
-        case 'edit': return ['edit', { id: a.id, title: a.title, description: a.description, due: a.due, owners, fields: a.fields }];
+        case 'edit': return ['edit', { id: a.id, title: a.title, description: a.description, due: a.due, owners, fields: a.fields, cover: a.cover }];
         case 'move': return ['move', { id: a.id, state: a.state }];
         case 'note': return ['note', { id: a.id, text: a.text }];
         case 'attach': return ['attach', { id: a.id, kind: a.kind, ref: a.ref, title: a.title }];

package/server/store.mjs

@@ -36,6 +36,8 @@ export const STATES_MAX = 12;
 export const FIELDS_MAX = 20;
 export const OWNERS_MAX = 10;
 export const ATTACH_KINDS = ['message', 'file', 'asset', 'branch', 'link', 'record'];
+/* A file attached that is a picture, by its name (the screen has the same rule). */
+export const isPicture = (ref) => /\.(jpe?g|png|webp|gif)$/i.test(String(ref ?? '').split(/[?#]/)[0]);
 
 const NOT_SHOWN = /[\u0000-\u0008\u000B-\u001F\u007F-\u009F​-‏‪-‮⁠-⁤⁦-⁩]/gu;
 export const oneLine = (text, max) => String(text ?? '').replace(/\r/g, '').replace(NOT_SHOWN, '').replace(/\s+/g, ' ').trim().slice(0, max);
@@ -259,7 +261,12 @@ export function openStore(dir, { now = () => Date.now() } = {}) {
             save(); log(w, 'add', { record: id, list: list.id, change: { title: t, ...(d ? { description: d } : {}), state: st.id } });
             return r;
         },
-        edit(given, { title, description, fields, owners, due } = {}, who) {
+        /* COVER: the one picture a card is shown by, when it has several. It is a
+         * picture attached (its id; given by id, the start of it, or its ref) or a
+         * photo field set ("field:ID"; given by the field's id or name). Empty
+         * clears it. Without one, a card is shown by its photo field set, else by
+         * its only picture attached. */
+        edit(given, { title, description, fields, owners, due, cover } = {}, who) {
             const w = whoOf(who);
             const { r, list } = recordOf(given, w, 'write');
             const change = {};
@@ -268,6 +275,7 @@ export function openStore(dir, { now = () => Date.now() } = {}) {
             if (fields !== undefined) change.fields = setFields(list, r, fields);
             if (owners !== undefined) r.owners = change.owners = ownersOf(owners);
             if (due !== undefined) { if (due === null || due === '') { delete r.due; change.due = null; } else r.due = change.due = dueOf(due); }
+            if (cover !== undefined) { const c = coverOf(list, r, cover); if (c) r.cover = change.cover = c; else { delete r.cover; change.cover = null; } }
             r.changed = stamp();
             save(); log(w, 'edit', { record: r.id, list: list.id, change });
             return r;
@@ -335,6 +343,7 @@ export function openStore(dir, { now = () => Date.now() } = {}) {
             const a = r.attached.find((x) => x.id === attachedId || x.id.startsWith(String(attachedId ?? '-')) || x.ref === attachedId);
             if (!a) no('nothing like that is attached');
             r.attached = r.attached.filter((x) => x !== a); r.changed = stamp();
+            if (r.cover === a.id) delete r.cover;
             save(); log(w, 'detach', { record: r.id, list: list.id, change: { kind: a.kind, ref: a.ref } });
             return r;
         },
@@ -372,7 +381,7 @@ export function openStore(dir, { now = () => Date.now() } = {}) {
         for (const [k, v] of Object.entries(given)) {
             const f = list.fields.find((x) => x.id === k) ?? list.fields.find((x) => x.name.toLowerCase() === String(k).toLowerCase());
             if (!f) no(`the list ${list.title} has no field "${k}"${list.fields.length ? ` (it has: ${list.fields.map((x) => x.name).join(', ')})` : ''}`);
-            if (v === null || v === '') { delete r.fields[f.id]; change[f.id] = null; continue; }
+            if (v === null || v === '') { delete r.fields[f.id]; change[f.id] = null; if (r.cover === `field:${f.id}`) delete r.cover; continue; }
             const value = oneLine(v, FIELD_MAX);
             if (f.type === 'number' && !Number.isFinite(Number(value))) no(`${f.name} is a number`);
             if (f.type === 'date' && !/^\d{4}-\d{2}-\d{2}$/.test(value)) no(`${f.name} is a date: 2026-11-04`);
@@ -381,6 +390,16 @@ export function openStore(dir, { now = () => Date.now() } = {}) {
         }
         return change;
     }
+    function coverOf(list, r, given) {
+        if (given === null || given === '') return '';
+        const g = oneLine(given, REF_MAX);
+        const a = r.attached.find((x) => x.id === g) ?? r.attached.find((x) => x.ref === g) ?? (g.length >= 4 ? r.attached.find((x) => x.id.startsWith(g)) : undefined);
+        if (a) { if (a.kind !== 'file' || !isPicture(a.ref)) no(`the cover is a picture: ${a.ref} is not one`); return a.id; }
+        const name = g.replace(/^field:/, '');
+        const f = list.fields.find((x) => x.id === name) ?? list.fields.find((x) => x.name.toLowerCase() === name.toLowerCase());
+        if (f) { if (f.type !== 'photo') no(`the cover is a picture: ${f.name} is not a photo field`); if (!r.fields[f.id]) no(`${f.name} is empty`); return `field:${f.id}`; }
+        return no('the cover is a picture attached (its id, or what it is) or a photo field');
+    }
     function ownersOf(given) {
         const list = (Array.isArray(given) ? given : [given]).map((x) => oneLine(x, 100)).filter(Boolean);
         if (list.length > OWNERS_MAX) no(`${OWNERS_MAX} owners at most`);

package/ui/binder-ui.css

@@ -35,6 +35,9 @@
 .binder-chip { border: 1px solid var(--binder-line); background: transparent; border-radius: 999px; padding: .3em .8em; color: var(--binder-dim); }
 .binder-chip[aria-pressed="true"] { border-color: var(--binder-action); color: var(--binder-text); background: color-mix(in srgb, var(--binder-action) 14%, transparent); }
 .binder-owners { display: flex; gap: .35rem; flex-wrap: wrap; }
+.binder-pop { position: relative; }
+.binder-dots { font-weight: 700; letter-spacing: .05em; padding: .4em .75em; line-height: 1.15; }
+.binder-menu-end { left: auto; right: 0; }
 .binder-primary { background: var(--binder-action); color: var(--binder-on-action) !important; border: 1px solid var(--binder-action); border-radius: 8px; padding: .45em 1em; font-weight: 600; }
 .binder-ghost { background: var(--binder-panel); border: 1px solid var(--binder-line); border-radius: 8px; padding: .45em .9em; }
 .binder-danger { background: var(--binder-danger); color: var(--binder-bg) !important; border: 0; border-radius: 8px; padding: .45em .9em; font-weight: 600; }
@@ -51,6 +54,11 @@
 .binder-what { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
 .binder-what b { overflow-wrap: anywhere; }
 .binder-sub { color: var(--binder-dim); font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+/* The fields set, on one line under a title. */
+.binder-facts { color: var(--binder-dim); overflow-wrap: anywhere; }
+.binder-head .binder-facts { font-size: 1.02rem; color: var(--binder-text); opacity: .82; }
+.binder-what .binder-facts { font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.binder-facts-small { font-size: .82em; }
 .binder-meta { display: flex; gap: .6em; flex-wrap: wrap; font-size: .85em; color: var(--binder-dim); }
 .binder-tick { width: 1.4rem; height: 1.4rem; border: 2px solid var(--binder-dim); border-radius: 5px; background: transparent; display: grid; place-items: center; padding: 0; font-weight: 800; font-size: .85rem; line-height: 1; }
 .binder-tick[aria-checked="true"] { background: var(--binder-ok); border-color: var(--binder-ok); color: var(--binder-bg); }
@@ -67,7 +75,9 @@
 /* As cards, with a face. */
 .binder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .8rem; }
 .binder-face { align-items: center; text-align: center; }
-.binder-face img, .binder-initial { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; }
+.binder-face { padding: .6rem .6rem .8rem; }
+.binder-face img { width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; object-fit: cover; background: var(--binder-panel); }
+.binder-initial { width: 5.5rem; height: 5.5rem; border-radius: 50%; margin: .4rem 0; }
 .binder-initial { display: grid; place-items: center; background: var(--binder-panel); font-size: 2rem; font-weight: 700; color: var(--binder-dim); }
 
 /* A record, whole: one calm column, read on a phone first. */
@@ -78,7 +88,13 @@
 .binder .binder-text-btn { border: 0; background: transparent; padding: .35em 0; color: var(--binder-action); font-weight: 500; text-align: left; }
 .binder-text-btn:hover { text-decoration: underline; }
 .binder-small { padding: .35em .85em; font-size: .92em; }
-.binder-head { display: flex; flex-direction: column; gap: .6rem; }
+.binder-head { display: flex; flex-direction: column; gap: .45rem; }
+.binder-hero { display: block; width: 100%; max-height: 26rem; object-fit: cover; border-radius: 14px; background: var(--binder-panel); margin-bottom: -.4rem; }
+.binder-offer { display: flex; flex-wrap: wrap; gap: .1rem .45rem; align-items: center; font-size: .92em; }
+.binder .binder-offer .binder-text-btn { padding: .2em 0; }
+.binder-thumb { object-fit: cover; padding: 0; }
+.binder .binder-star { font-size: .85em; white-space: nowrap; color: var(--binder-dim); }
+.binder .binder-star[aria-pressed="true"] { color: var(--binder-ask); }
 .binder .binder-title { font-size: 1.65rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; border: 0; border-radius: 6px; background: transparent; padding: .05em .15em; margin: 0 -.15em;
   resize: none; overflow: hidden; width: 100%; box-sizing: border-box; field-sizing: content; }
 .binder .binder-title:hover:not([readonly]) { background: var(--binder-panel); }
@@ -154,4 +170,9 @@ button.binder-who:hover span:not(.binder-dot) { text-decoration: underline; text
   .binder-record { gap: 1.3rem; }
   .binder-row.binder-edit { grid-template-columns: 1fr auto; }
   .binder-cols { grid-auto-columns: minmax(80%, 1fr); }
+  .binder-hero { max-height: 18rem; }
+  .binder-bar { gap: .4rem; }
+  .binder-bar h2 { flex-basis: 100%; }
+  .binder-seg button { padding: .4em .6em; }
+  .binder-bar .binder-primary { padding: .45em .75em; }
 }

package/ui/binder-ui.js

@@ -18,14 +18,77 @@
 
 export const KEYS = Object.freeze(['lists', 'new-list', 'new-item', 'no-lists', 'template', 'create', 'cancel', 'title', 'list', 'columns', 'cards', 'back',
     'state', 'owners', 'due', 'notes', 'add-note', 'attached', 'attach', 'history', 'archive', 'restore', 'delete', 'delete-sure', 'approved', 'settings',
-    'states', 'fields', 'access', 'read', 'write', 'none', 'save', 'empty', 'nobody', 'archived', 'show-archived', 'gate', 'done', 'add-state', 'add-field',
+    'states', 'fields', 'access', 'read', 'write', 'none', 'save', 'empty', 'archived', 'show-archived', 'gate', 'done', 'add-state', 'add-field',
     'kind-message', 'kind-file', 'kind-asset', 'kind-branch', 'kind-link', 'kind-record', 'what', 'name', 'type', 'saved', 'edited', 'by', 'mine', 'all',
-    'delete-list', 'delete-list-sure', 'archive-list', 'no-records', 'search', 'description', 'add-description', 'edit', 'more', 'approve', 'no-due', 'add', 'ok']);
+    'delete-list', 'delete-list-sure', 'archive-list', 'no-records', 'search', 'description', 'edit', 'more', 'approve', 'add', 'ok',
+    'add-what', 'owner', 'attachment', 'tools', 'cover',
+    'op-add', 'op-edit', 'op-move', 'op-note', 'op-edit-note', 'op-remove-note', 'op-attach', 'op-detach', 'op-archive', 'op-restore', 'op-delete']);
 const KINDS = ['message', 'file', 'asset', 'branch', 'link', 'record'];
 const ICON = { message: '💬', file: '📄', asset: '🗄', branch: '⑂', link: '🔗', record: '▣' };
 const TYPES = ['text', 'number', 'date', 'link', 'photo'];
 const DESCRIPTION_MAX = 4000;
 
+/* WHAT A CARD SHOWS: what is set, and nothing about what is empty. These rules
+ * know no template: only a list's states and fields, and a record's values. */
+
+/* A file that is a picture, by its name: what a screen may put forward. */
+export const isPicture = (ref) => /\.(jpe?g|png|webp|gif)$/i.test(String(ref ?? '').split(/[?#]/)[0]);
+
+/* A card's pictures: its photo fields set ("field:ID"), then its files attached
+ * that are pictures (their id): [{ key, value }]. */
+export function pictures(l, r) {
+    const out = [];
+    for (const f of l.fields ?? []) if (f.type === 'photo' && r.fields?.[f.id]) out.push({ key: `field:${f.id}`, value: r.fields[f.id] });
+    for (const a of r.attached ?? []) if (a.kind === 'file' && isPicture(a.ref)) out.push({ key: a.id, value: a.ref });
+    return out;
+}
+/* The one put forward: the cover a person or an agent chose; else a photo field
+ * set (a picture put there on purpose); else the only picture attached; else none. */
+export function coverOf(l, r) {
+    const all = pictures(l, r);
+    const attached = all.filter((p) => !p.key.startsWith('field:'));
+    return all.find((p) => p.key === r.cover) ?? all.find((p) => p.key.startsWith('field:')) ?? (attached.length === 1 ? attached[0] : null);
+}
+/* It, as a picture to show, through the page's `picture` hook; else none. */
+export function imageOf(l, r, picture = () => null) {
+    const c = coverOf(l, r);
+    return c ? picture(c.value) ?? null : null;
+}
+
+/* The fields set, as one short line: [{ id, text }]. A date or a number says its
+ * field's name ("Naissance : 12 avril 1931": alone, a date or "3" says not what
+ * it is); a text or a link says itself. Photos are shown, not said. Empty fields
+ * are not there. */
+export function facts(l, r, lang = 'en') {
+    const out = [];
+    const named = (name, text) => `${name}${String(lang).startsWith('fr') ? '\u202f: ' : ': '}${text}`;
+    for (const f of l.fields ?? []) {
+        const v = r.fields?.[f.id];
+        if (v === undefined || v === null || v === '' || f.type === 'photo') continue;
+        let text = String(v);
+        if (f.type === 'date') {
+            const t = Date.parse(`${text.slice(0, 10)}T00:00:00`);
+            if (Number.isFinite(t)) { try { text = new Date(t).toLocaleDateString(lang, { day: 'numeric', month: 'long', year: 'numeric' }); } catch { /* as typed */ } }
+            text = named(f.name, text);
+        } else if (f.type === 'number') {
+            try { text = named(f.name, Number(v).toLocaleString(lang)); } catch { text = named(f.name, text); }
+        } else if (f.type === 'link') {
+            try { text = new URL(text).host.replace(/^www\./, ''); } catch { /* as typed */ }
+        }
+        out.push({ id: f.id, text });
+    }
+    return out;
+}
+
+/* Whether a card's state says anything. It says nothing when the card is in the
+ * first state and that is the list's only state not done, with no gate: then
+ * "open" is what every card is until it is done. Any other state is said. */
+export function stateShown(l, r) {
+    const open = l.states.filter((s) => !s.done);
+    if (open.length !== 1 || l.states.some((s) => s.gate)) return true;
+    return r.state !== l.states[0]?.id;
+}
+
 /* A DESCRIPTION, READ: a few lines of Markdown-ish text, as blocks a screen can
  * draw element by element. Paragraphs (a blank line between), lists ("- " or
  * "* "), **bold**, links ([text](https://...) or a bare http(s) address).
@@ -117,18 +180,27 @@ export function mount(root, { call, words = {}, lang = 'en', people = () => [],
     /* ---- the parts ---- */
     const top = () => h('div', { class: 'binder-top' },
         h('div', { class: 'binder-tabs', role: 'tablist' }, ui.lists.map((l) => h('button', { type: 'button', role: 'tab', 'aria-selected': String(l.id === ui.at), 'data-list': l.id,
-            onclick: () => { ui.at = l.id; ui.view = null; ui.mode = 'list'; ui.record = null; void refresh(); } }, l.title, h('small', {}, String(l.count))))),
+            onclick: () => { ui.at = l.id; ui.view = null; ui.mode = 'list'; ui.record = null; ui.open = null; void refresh(); } }, l.title, h('small', {}, String(l.count))))),
         h('button', { type: 'button', class: 'binder-new-list', onclick: () => { ui.mode = 'new-list'; paint(); } }, `+ ${w('new-list')}`));
 
+    /* The bar: the title, the views, "+ Card"; the rest behind "…". A filter on is
+     * said by a chip that takes it off. */
     function bar(l) {
         const view = ui.view ?? l.view;
+        const flip = (k) => { ui[k] = !ui[k]; ui.open = null; void refresh(); };
+        const item = (on, text, act, fn) => h('button', { type: 'button', role: on === null ? 'menuitem' : 'menuitemcheckbox', 'aria-checked': on === null ? null : String(on), 'data-act': act, onclick: fn },
+            h('span', { class: 'binder-check', 'aria-hidden': 'true' }, on ? '✓' : ''), text);
+        const menu = ui.open === 'tools' ? h('div', { class: 'binder-menu binder-menu-end', role: 'menu' },
+            item(ui.mine, w('mine'), 'mine', () => flip('mine')),
+            item(ui.archived, w('archived'), 'archived', () => flip('archived')),
+            l.access === 'write' && l.grants ? item(null, w('settings'), 'settings', () => { ui.open = null; ui.mode = 'settings'; paint(); }) : null) : null;
+        const chip = (k) => (ui[k] ? h('button', { type: 'button', class: 'binder-chip', 'aria-pressed': 'true', 'data-act': `off-${k}`, onclick: () => flip(k) }, w(k === 'mine' ? 'mine' : 'archived'), h('span', { 'aria-hidden': 'true' }, ' ×')) : null);
         return h('div', { class: 'binder-bar' },
-            h('h2', {}, l.title),
+            h('h2', {}, l.title), chip('mine'), chip('archived'),
             h('div', { class: 'binder-seg', role: 'group' }, ['list', 'columns', 'cards'].map((v) => h('button', { type: 'button', 'aria-pressed': String(v === view), 'data-view': v, onclick: () => { ui.view = v; paint(); } }, w(v)))),
-            h('button', { type: 'button', class: 'binder-chip', 'aria-pressed': String(ui.mine), onclick: () => { ui.mine = !ui.mine; void refresh(); } }, w('mine')),
-            h('button', { type: 'button', class: 'binder-chip', 'aria-pressed': String(ui.archived), onclick: () => { ui.archived = !ui.archived; void refresh(); } }, w('archived')),
-            l.access === 'write' && l.grants ? h('button', { type: 'button', class: 'binder-ghost', 'data-act': 'settings', onclick: () => { ui.mode = 'settings'; paint(); } }, w('settings')) : null,
-            l.access === 'write' && !ui.archived ? h('button', { type: 'button', class: 'binder-primary', 'data-act': 'new-item', onclick: () => { ui.mode = 'new-item'; paint(); } }, `+ ${w('new-item')}`) : null);
+            l.access === 'write' && !ui.archived ? h('button', { type: 'button', class: 'binder-primary', 'data-act': 'new-item', onclick: () => { ui.mode = 'new-item'; paint(); } }, `+ ${w('new-item')}`) : null,
+            h('div', { class: 'binder-pop' }, h('button', { type: 'button', class: 'binder-ghost binder-dots', 'data-act': 'tools', 'aria-haspopup': 'menu', 'aria-expanded': String(ui.open === 'tools'), 'aria-label': w('tools'), title: w('tools'),
+                onclick: () => { ui.open = ui.open === 'tools' ? null : 'tools'; paint(); } }, '…'), menu));
     }
 
     /* A due date as a person reads it: "26 oct.", "4 nov. 2027 09:00". */
@@ -150,34 +222,35 @@ export function mount(root, { call, words = {}, lang = 'en', people = () => [],
         return h('button', { type: 'button', class: 'binder-tick', role: 'checkbox', 'aria-checked': String(on), title: g >= 0 ? w('approved') : w('done'), disabled: l.access !== 'write' || !l.grants && g >= 0,
             onclick: (e) => { e.stopPropagation(); void soft(g >= 0 ? ask('approve', { id: r.id, yes: !on }) : ask('move', { id: r.id, state: on ? l.states[0].id : doneOf(l).id })).then(refresh); } }, on ? '✓' : '');
     }
-    const pill = (l, r) => { const st = l.states.find((s) => s.id === r.state); return h('span', { class: 'binder-pill', 'data-state': r.state, 'data-done': st?.done ? '' : null, 'data-gate': st?.gate ? '' : null }, st?.name ?? r.state); };
+    const pill = (l, r) => { if (!stateShown(l, r)) return null; const st = l.states.find((s) => s.id === r.state); return h('span', { class: 'binder-pill', 'data-state': r.state, 'data-done': st?.done ? '' : null, 'data-gate': st?.gate ? '' : null }, st?.name ?? r.state); };
     const meta = (l, r) => h('span', { class: 'binder-meta' },
         r.owners.length ? r.owners.map(nameOf).join(', ') : null,
         r.due ? h('span', { class: late(l, r) ? 'binder-late' : null }, `⏰ ${when(r.due)}`) : null,
         r.attached.length ? h('span', {}, `📎 ${r.attached.length}`) : null,
         r.notes.length ? h('span', {}, `✎ ${r.notes.length}`) : null);
     const sub = (r) => (r.description ? h('span', { class: 'binder-sub' }, firstLine(r.description)) : null);
+    /* The fields set, on one line: "Naissance 12 avril 1931 · Saint-Aubin". */
+    const factLine = (l, r, cls = 'binder-facts') => { const f = facts(l, r, lang); return f.length ? h('span', { class: cls }, f.map((x) => x.text).join(' · ')) : null; };
     const leave = () => { ui.open = null; ui.more = false; ui.draft = {}; };
     const open = (r) => { void soft(ask('get', { id: r.id }).then((d) => { leave(); ui.record = d; ui.mode = 'record'; paint(); window.scrollTo?.(0, 0); })); };
 
     function asList(l, records) {
         return h('div', { class: 'binder-rows' }, records.map((r) => h('div', { class: 'binder-row', 'data-record': r.id, tabindex: '0', onclick: () => open(r), onkeydown: (e) => { if (e.key === 'Enter') open(r); } },
-            tick(l, r), h('div', { class: 'binder-what' }, h('b', {}, r.title), sub(r), meta(l, r)), pill(l, r))));
+            tick(l, r), h('div', { class: 'binder-what' }, h('b', {}, r.title), factLine(l, r), sub(r), meta(l, r)), pill(l, r) ?? h('span'))));
     }
     function asColumns(l, records) {
         return h('div', { class: 'binder-cols' }, l.states.map((s) => {
             const here = records.filter((r) => r.state === s.id);
             return h('section', { class: 'binder-col', 'data-state': s.id }, h('h3', {}, s.name, h('span', {}, String(here.length))),
-                here.map((r) => h('div', { class: 'binder-card', 'data-record': r.id, tabindex: '0', onclick: () => open(r), onkeydown: (e) => { if (e.key === 'Enter') open(r); } }, h('b', {}, r.title), sub(r), meta(l, r))));
+                here.map((r) => h('div', { class: 'binder-card', 'data-record': r.id, tabindex: '0', onclick: () => open(r), onkeydown: (e) => { if (e.key === 'Enter') open(r); } }, h('b', {}, r.title), factLine(l, r), sub(r), meta(l, r))));
         }));
     }
     function asCards(l, records) {
-        const photo = l.fields.find((f) => f.type === 'photo');
         return h('div', { class: 'binder-grid' }, records.map((r) => {
-            const src = photo && r.fields[photo.id] ? picture(r.fields[photo.id]) : null;
+            const src = imageOf(l, r, picture);
             return h('div', { class: 'binder-card binder-face', 'data-record': r.id, tabindex: '0', onclick: () => open(r), onkeydown: (e) => { if (e.key === 'Enter') open(r); } },
                 src ? h('img', { src, alt: r.title, loading: 'lazy' }) : h('div', { class: 'binder-initial', 'aria-hidden': 'true' }, r.title.slice(0, 1).toUpperCase()),
-                h('b', {}, r.title), pill(l, r));
+                h('b', {}, r.title), factLine(l, r, 'binder-facts binder-facts-small'), pill(l, r));
         }));
     }
 
@@ -203,9 +276,11 @@ export function mount(root, { call, words = {}, lang = 'en', people = () => [],
                 h('button', { type: 'button', class: 'binder-primary', onclick: go }, w('create'))));
     }
 
-    /* A RECORD, WHOLE, read at a glance: its title, its state, what it is (the
-     * description); who and when on one line; what is attached; the notes.
-     * Everything else (fields, history, archive, delete) is folded under "more". */
+    /* A RECORD, WHOLE, read at a glance: its picture, its title, its fields set on
+     * one line, its state when it says something, what it is (the description);
+     * who and when, when set; what is attached; the notes. What is empty is not
+     * shown: one quiet line offers to add it. The rest (fields to change,
+     * history, archive, delete) is folded under "more". */
     function record() {
         const { record: r, list: l, history } = ui.record;
         const can = l.access === 'write';
@@ -231,6 +306,15 @@ export function mount(root, { call, words = {}, lang = 'en', people = () => [],
         const approve = g >= 0 && can && l.grants && !r.approved
             ? h('button', { type: 'button', class: 'binder-primary binder-small', 'data-act': 'approve', onclick: () => done(ask('approve', { id: r.id, yes: true })) }, `✓ ${w('approve')}`) : null;
 
+        /* Its picture, put forward. */
+        const cover = coverOf(l, r);
+        const coverSrc = cover ? picture(cover.value) : null;
+        const hero = coverSrc ? h('img', { class: 'binder-hero', src: coverSrc, alt: r.title }) : null;
+        const all = pictures(l, r);
+        /* With several pictures, each says whether it is the one put forward, and can become it. */
+        const star = (key) => (can && all.length > 1 ? h('button', { type: 'button', class: 'binder-text-btn binder-star', 'data-act': 'cover', 'aria-pressed': String(cover?.key === key),
+            onclick: (e) => { e.preventDefault(); done(ask('edit', { id: r.id, cover: cover?.key === key ? '' : key })); } }, `${cover?.key === key ? '★' : '☆'} ${w('cover')}`) : null);
+
         /* What it is. */
         let about;
         if (ui.open === 'description') {
@@ -241,16 +325,15 @@ export function mount(root, { call, words = {}, lang = 'en', people = () => [],
                 h('button', { type: 'button', class: 'binder-primary binder-small', 'data-act': 'save-description', onclick: () => { delete ui.draft.description; done(ask('edit', { id: r.id, description: text.value })); } }, w('save')),
                 h('button', { type: 'button', class: 'binder-text-btn', onclick: () => { delete ui.draft.description; set(null); } }, w('cancel'))));
         } else {
-            about = h('div', { class: 'binder-desc' }, r.description ? rich(r.description) : null,
-                can ? h('button', { type: 'button', class: 'binder-text-btn', 'data-act': 'edit-description', onclick: () => set('description') }, r.description ? w('edit') : `+ ${w('add-description')}`) : null);
+            about = r.description ? h('div', { class: 'binder-desc' }, rich(r.description),
+                can ? h('button', { type: 'button', class: 'binder-text-btn', 'data-act': 'edit-description', onclick: () => set('description') }, w('edit')) : null) : null;
         }
 
-        /* Who and when, on one line. */
+        /* Who and when, on one line: only what is set. */
         const names = r.owners.map(nameOf).join(', ');
-        const whoLine = h(can ? 'button' : 'div', { type: can ? 'button' : null, class: 'binder-who', 'data-act': 'who', 'aria-expanded': can ? String(ui.open === 'who') : null, onclick: can ? () => set(ui.open === 'who' ? null : 'who') : null },
-            h('span', { class: names ? null : 'binder-dim' }, `👤 ${names || w('nobody')}`),
-            h('span', { class: 'binder-dot', 'aria-hidden': 'true' }, '·'),
-            h('span', { class: r.due ? (late(l, r) ? 'binder-late' : null) : 'binder-dim' }, `⏰ ${r.due ? when(r.due) : w('no-due')}`));
+        const whoParts = [names ? h('span', {}, `👤 ${names}`) : null, r.due ? h('span', { class: late(l, r) ? 'binder-late' : null }, `⏰ ${when(r.due)}`) : null].filter(Boolean);
+        const whoLine = whoParts.length ? h(can ? 'button' : 'div', { type: can ? 'button' : null, class: 'binder-who', 'data-act': 'who', 'aria-expanded': can ? String(ui.open === 'who') : null, onclick: can ? () => set(ui.open === 'who' ? null : 'who') : null },
+            whoParts.flatMap((x, i) => (i ? [h('span', { class: 'binder-dot', 'aria-hidden': 'true' }, '·'), x] : [x]))) : null;
         let whoEdit = null;
         if (ui.open === 'who') {
             const day = h('input', { type: 'date', value: r.due?.slice(0, 10) ?? '', 'aria-label': w('due') });
@@ -265,7 +348,7 @@ export function mount(root, { call, words = {}, lang = 'en', people = () => [],
 
         /* What is attached: an icon and a name; a tap opens it. */
         const openIt = (a) => { if (a.kind === 'record') open({ id: a.ref }); else if (a.kind === 'link') window.open(a.ref, '_blank', 'noopener'); else openAttached?.(a); };
-        const nameOfIt = (a) => a.title || (a.kind === 'record' ? `#${a.ref}` : a.kind === 'file' ? a.ref.split('/').filter(Boolean).at(-1) ?? a.ref : a.ref);
+        const nameOfIt = (a) => a.title || (a.kind === 'record' ? ui.data?.records?.find((x) => x.id === a.ref)?.title ?? `#${a.ref}` : a.kind === 'file' ? a.ref.split('/').filter(Boolean).at(-1) ?? a.ref : a.ref);
         let attachForm = null;
         if (can && ui.open === 'attach') {
             const kind = h('select', { 'aria-label': w('attach') }, KINDS.map((k) => h('option', { value: k }, w(`kind-${k}`))));
@@ -275,17 +358,32 @@ export function mount(root, { call, words = {}, lang = 'en', people = () => [],
                 h('button', { type: 'button', class: 'binder-primary binder-small', 'data-act': 'attach', onclick: () => { if (ref.value.trim()) done(ask('attach', { id: r.id, kind: kind.value, ref: ref.value })); } }, w('attach')),
                 h('button', { type: 'button', class: 'binder-text-btn', onclick: () => set(null) }, w('cancel')));
         }
-        const attached = r.attached.length || can ? h('section', { class: 'binder-sec' }, h('h3', {}, w('attached')),
+        const thumb = (a) => { const src = a.kind === 'file' && isPicture(a.ref) ? picture(a.ref) : null; return src ? h('img', { class: 'binder-ic binder-thumb', src, alt: '' }) : h('span', { class: 'binder-ic', 'aria-hidden': 'true' }, ICON[a.kind] ?? '•'); };
+        const attached = r.attached.length || attachForm ? h('section', { class: 'binder-sec' }, h('h3', {}, w('attached')),
             r.attached.length ? h('ul', { class: 'binder-atts' }, r.attached.map((a) => h('li', { class: 'binder-att', 'data-kind': a.kind },
                 h('button', { type: 'button', class: 'binder-link', title: `${w(`kind-${a.kind}`)} · ${a.kind === 'record' ? `#${a.ref}` : a.ref}`, onclick: () => openIt(a) },
-                    h('span', { class: 'binder-ic', 'aria-hidden': 'true' }, ICON[a.kind] ?? '•'), h('span', { class: 'binder-att-name' }, nameOfIt(a))),
+                    thumb(a), h('span', { class: 'binder-att-name' }, nameOfIt(a))),
+                a.kind === 'file' && isPicture(a.ref) ? star(a.id) : null,
                 can ? h('button', { type: 'button', class: 'binder-x', 'aria-label': `${w('delete')} ${nameOfIt(a)}`, onclick: () => void soft(ask('detach', { id: r.id, what: a.id })).then(refresh) }, '×') : null))) : null,
             attachForm ?? (can ? h('button', { type: 'button', class: 'binder-text-btn', 'data-act': 'show-attach', onclick: () => set('attach') }, `+ ${w('attach')}`) : null)) : null;
 
+        /* What is empty, offered in one quiet line: "+ Ajouter : description · échéance · responsable · pièce jointe · champ". */
+        const low = (k) => w(k).toLocaleLowerCase(lang);
+        const offers = can ? [
+            !r.description && ui.open !== 'description' ? ['description', low('description'), () => set('description')] : null,
+            !r.due && ui.open !== 'who' ? ['due', low('due'), () => set('who')] : null,
+            !r.owners.length && people().length && ui.open !== 'who' ? ['owner', low('owner'), () => set('who')] : null,
+            !r.attached.length && ui.open !== 'attach' ? ['attach', low('attachment'), () => set('attach')] : null,
+            l.fields.some((f) => r.fields[f.id] === undefined || r.fields[f.id] === '') ? ['fields', low('fields'), () => { ui.more = true; paint(); requestAnimationFrame(() => root.querySelector?.('.binder-fields input')?.focus()); }] : null,
+        ].filter(Boolean) : [];
+        const addRow = offers.length ? h('div', { class: 'binder-offer' }, h('span', { class: 'binder-dim' }, `+ ${w('add-what')}`),
+            offers.flatMap(([act, text, fn], i) => [i ? h('span', { class: 'binder-dot', 'aria-hidden': 'true' }, '·') : null,
+                h('button', { type: 'button', class: 'binder-text-btn', 'data-add': act, onclick: fn }, text)])) : null;
+
         /* Notes: small dated messages, and a box to add one. */
         const note = h('textarea', { rows: '2', placeholder: w('add-note'), 'aria-label': w('add-note'), maxlength: '2000', text: ui.draft.note ?? '' });
         note.addEventListener('input', () => { ui.draft.note = note.value; });
-        const notes = r.notes.length || can ? h('section', { class: 'binder-sec' }, h('h3', {}, w('notes')),
+        const notes = r.notes.length || can ? h('section', { class: 'binder-sec' }, r.notes.length ? h('h3', {}, w('notes')) : null,
             r.notes.map((n) => h('div', { class: 'binder-note', 'data-kind': n.by.kind },
                 h('div', { class: 'binder-note-by' }, h('b', {}, n.by.name), ` · ${stamp(n.at)}${n.edited ? ` · ${w('edited')}` : ''}`), h('p', {}, n.text))),
             can ? h('div', { class: 'binder-note-add' }, note, h('button', { type: 'button', class: 'binder-ghost binder-small', 'data-act': 'note',
@@ -297,7 +395,7 @@ export function mount(root, { call, words = {}, lang = 'en', people = () => [],
             const input = h('input', { type: f.type === 'date' ? 'date' : f.type === 'number' ? 'number' : 'text', value: String(v), disabled: !can, 'aria-label': f.name, 'data-field': f.id });
             input.addEventListener('change', () => void soft(ask('edit', { id: r.id, fields: { [f.id]: input.value } })).then(refresh));
             const src = f.type === 'photo' && v ? picture(v) : null;
-            return h('label', { class: 'binder-field' }, h('span', {}, f.name), src ? h('img', { src, alt: f.name, class: 'binder-photo' }) : null, input);
+            return h('label', { class: 'binder-field' }, h('span', {}, f.name), src ? h('img', { src, alt: f.name, class: 'binder-photo' }) : null, input, f.type === 'photo' && v ? star(`field:${f.id}`) : null);
         };
         const stateName = (id) => l.states.find((s) => s.id === id)?.name ?? id;
         const sure = h('span', { class: 'binder-sure', hidden: true }, w('delete-sure'),
@@ -306,19 +404,22 @@ export function mount(root, { call, words = {}, lang = 'en', people = () => [],
         const more = h('details', { class: 'binder-more', open: ui.more, ontoggle: (e) => { ui.more = e.currentTarget.open; } }, h('summary', { 'data-act': 'more' }, `⋯ ${w('more')}`),
             l.fields.length ? h('div', { class: 'binder-fields' }, l.fields.map(field)) : null,
             h('div', { class: 'binder-history' }, h('h3', {}, `${w('history')} · ${history.length}`),
-                history.slice().reverse().map((x) => h('div', { class: 'binder-log' }, h('time', {}, stamp(x.at)), `${x.by.name} · ${x.op}${x.op === 'move' && x.change ? ` → ${stateName(x.change.to)}` : ''}`))),
+                history.slice().reverse().map((x) => h('div', { class: 'binder-log' }, h('time', {}, stamp(x.at)), `${x.by.name} · ${words[`op-${x.op}`] ?? x.op}${x.op === 'move' && x.change ? ` → ${stateName(x.change.to)}` : ''}`))),
             can ? h('div', { class: 'binder-actions' },
+                /* The state said nothing, so it is not shown: closing the card is here. */
+                !stateShown(l, r) ? h('button', { type: 'button', class: 'binder-ghost binder-small', 'data-act': 'to-done', onclick: () => done(ask('move', { id: r.id, state: doneOf(l).id })) }, `✓ ${doneOf(l).name}`) : null,
                 h('button', { type: 'button', class: 'binder-ghost binder-small', 'data-act': 'archive', onclick: () => void soft(ask('archive', { id: r.id, restore: !!r.archived })).then(() => { ui.record = null; ui.mode = 'list'; return refresh(); }) }, r.archived ? w('restore') : w('archive')),
                 l.grants ? h('button', { type: 'button', class: 'binder-ghost binder-small binder-warn', 'data-act': 'delete', onclick: () => { sure.hidden = false; } }, w('delete')) : null, sure) : null);
 
         return h('div', { class: 'binder-page binder-record', 'data-record': r.id },
             h('div', { class: 'binder-crumb' }, h('button', { type: 'button', class: 'binder-text-btn', 'data-act': 'back', onclick: () => { leave(); ui.record = null; ui.mode = 'list'; void refresh(); } }, `‹ ${l.title}`),
                 h('span', { class: 'binder-dim' }, `#${r.id}${r.archived ? ` · ${w('archived')}` : ''}`)),
-            h('header', { class: 'binder-head' }, title,
-                h('div', { class: 'binder-status' }, h('div', { class: 'binder-state-wrap' }, pillOf, menu), approve)),
+            hero,
+            h('header', { class: 'binder-head' }, title, factLine(l, r),
+                stateShown(l, r) || approve ? h('div', { class: 'binder-status' }, stateShown(l, r) ? h('div', { class: 'binder-state-wrap binder-pop' }, pillOf, menu) : null, approve) : null),
             about,
-            h('div', { class: 'binder-who-wrap' }, whoLine, whoEdit),
-            attached, notes, more);
+            whoLine || whoEdit ? h('div', { class: 'binder-who-wrap' }, whoLine, whoEdit) : null,
+            attached, addRow, notes, more);
     }
 
     function settings(l) {
@@ -383,9 +484,10 @@ export function mount(root, { call, words = {}, lang = 'en', people = () => [],
         box.replaceChildren(...parts);
     }
 
-    /* The state menu closes on a tap elsewhere, or Escape. */
-    const away = (e) => { if (ui.open === 'states' && !e.target?.closest?.('.binder-state-wrap')) { ui.open = null; paint(); } };
-    const escape = (e) => { if (e.key === 'Escape' && ui.open === 'states') { ui.open = null; paint(); } };
+    /* A menu closes on a tap elsewhere, or Escape. */
+    const menus = ['states', 'tools'];
+    const away = (e) => { if (menus.includes(ui.open) && !e.target?.closest?.('.binder-pop')) { ui.open = null; paint(); } };
+    const escape = (e) => { if (e.key === 'Escape' && menus.includes(ui.open)) { ui.open = null; paint(); } };
     document.addEventListener('pointerdown', away);
     document.addEventListener('keydown', escape);
     void refresh();

package/ui/texts/en.json

@@ -33,7 +33,6 @@
   "none": "None",
   "save": "Save",
   "empty": "Empty",
-  "nobody": "Nobody",
   "archived": "Archived",
   "show-archived": "Archived",
   "gate": "Needs approval",
@@ -60,11 +59,25 @@
   "no-records": "Nothing here.",
   "search": "Search",
   "description": "Description",
-  "add-description": "Add a description",
   "edit": "Edit",
   "more": "Details",
   "approve": "Approve",
-  "no-due": "No due date",
   "add": "Add",
-  "ok": "OK"
+  "ok": "OK",
+  "add-what": "Add:",
+  "owner": "Owner",
+  "attachment": "Attachment",
+  "tools": "More",
+  "cover": "Cover",
+  "op-add": "Created",
+  "op-edit": "Edited",
+  "op-move": "Moved",
+  "op-note": "Note",
+  "op-edit-note": "Note edited",
+  "op-remove-note": "Note removed",
+  "op-attach": "Attached",
+  "op-detach": "Detached",
+  "op-archive": "Archived",
+  "op-restore": "Restored",
+  "op-delete": "Deleted"
 }

package/ui/texts/fr.json

@@ -33,7 +33,6 @@
   "none": "Aucun",
   "save": "Enregistrer",
   "empty": "Vide",
-  "nobody": "Personne",
   "archived": "Archivées",
   "show-archived": "Archivées",
   "gate": "À valider",
@@ -60,11 +59,25 @@
   "no-records": "Rien ici.",
   "search": "Chercher",
   "description": "Description",
-  "add-description": "Ajouter une description",
   "edit": "Modifier",
   "more": "Détails",
   "approve": "Valider",
-  "no-due": "Sans échéance",
   "add": "Ajouter",
-  "ok": "OK"
+  "ok": "OK",
+  "add-what": "Ajouter :",
+  "owner": "Responsable",
+  "attachment": "Pièce jointe",
+  "tools": "Plus",
+  "cover": "À la une",
+  "op-add": "Créée",
+  "op-edit": "Modifiée",
+  "op-move": "Déplacée",
+  "op-note": "Note",
+  "op-edit-note": "Note modifiée",
+  "op-remove-note": "Note retirée",
+  "op-attach": "Attaché",
+  "op-detach": "Détaché",
+  "op-archive": "Archivée",
+  "op-restore": "Restaurée",
+  "op-delete": "Supprimée"
 }