@ayni.org/ayni-ui-core 0.2.0 → 0.3.1

package/README.md

@@ -10,5 +10,19 @@ and sync. The browser UI in this repository and the Ayni app both build on it; n
 pnpm add @ayni.org/ayni-ui-core @ayni.org/ayni-agui-profile
 ```
 
+## One design, two renderers
+
+The browser draws with CSS and the Ayni app with React Native styles. What the two must share is written here once:
+
+| Surface | Design values and colour roles | What it shows |
+| --- | --- | --- |
+| A conversation | `CONVERSATION_DESIGN`, `CONVERSATION_COLORS` | `replyQuoteOf`, `reactionPillOf`, `plainText` |
+| The home page (rail and column) | `HOME_DESIGN`, `HOME_COLORS` | `TRUST_MARK`, `CONTROLLER_KIND_ICON`, `formatTime` |
+| The Proof of Trust | `PROOF_OF_TRUST_DESIGN`, `PROOF_OF_TRUST_COLORS` | `verdictOf`, `identityStepOf`, `accreditationLine`, `otherCredentialLine`, `claimRows`, and its English wording (`PROOF_OF_TRUST_COPY`) |
+
+The browser's stylesheet is the reference: tests in this repository compare it, and the English translation file,
+with these values, so a change made on one side only fails. The app builds its styles from the same values. A change
+of look or wording on one of these surfaces starts here.
+
 Published to npm from this repository by the `npm-publish` workflow whenever `package.json` carries a version that is
 not on npm yet.

package/dist/conversationDesign.d.ts

@@ -78,7 +78,7 @@ export declare const CONVERSATION_DESIGN: {
 };
 export type ConversationDesign = typeof CONVERSATION_DESIGN;
 /** The colour roles both palettes define, in the browser as custom properties and in the app as theme colours. */
-export type ColorRole = 'bg' | 'surface' | 'text' | 'muted' | 'border' | 'accent' | 'accentContrast' | 'warning';
+export type ColorRole = 'bg' | 'surface' | 'text' | 'muted' | 'border' | 'accent' | 'accentContrast' | 'warning' | 'ok' | 'danger';
 /** Which colour role paints what in a conversation. */
 export declare const CONVERSATION_COLORS: {
     readonly userBubble: {

package/dist/flag.d.ts

@@ -0,0 +1,2 @@
+/** The flag emoji of an ISO 3166-1 alpha-2 code, or an empty string when the code is not one. */
+export declare function flagOf(countryCode?: string): string;

package/dist/flag.js

@@ -0,0 +1,7 @@
+/** The flag emoji of an ISO 3166-1 alpha-2 code, or an empty string when the code is not one. */
+export function flagOf(countryCode) {
+    const code = (countryCode ?? '').trim().toUpperCase();
+    if (!/^[A-Z]{2}$/.test(code))
+        return '';
+    return String.fromCodePoint(...[...code].map((c) => 0x1f1e6 + c.charCodeAt(0) - 65));
+}

package/dist/homeDesign.d.ts

@@ -0,0 +1,270 @@
+/** The text every surface starts from: its size, and its line height as a multiple of the size. */
+export declare const BASE_TEXT: {
+    readonly fontSize: 15;
+    readonly lineHeight: 1.45;
+};
+export declare const HOME_DESIGN: {
+    readonly rail: {
+        readonly width: 64;
+        readonly paddingY: 10;
+        readonly gap: 6;
+        /** a controller's tile, and the bordered tiles that are not controllers (add, settings) */
+        readonly tile: {
+            readonly size: 48;
+            readonly radius: 14;
+            readonly initialsFontSize: 15;
+            readonly initialsWeight: 600;
+            readonly inactiveOpacity: 0.5;
+        };
+        readonly ghost: {
+            readonly borderWidth: 1;
+            readonly iconSize: 22;
+        };
+        /** the bar to the left of the selected tile */
+        readonly selectedBar: {
+            readonly left: -8;
+            readonly inset: 10;
+            readonly width: 4;
+            readonly radius: 2;
+        };
+        /** unread messages, on the tile's top right corner */
+        readonly badge: {
+            readonly top: 2;
+            readonly right: 2;
+            readonly minWidth: 18;
+            readonly height: 18;
+            readonly paddingX: 5;
+            readonly radius: 9;
+            readonly fontSize: 11;
+            readonly fontWeight: 600;
+        };
+        /** something waits for the person, on the tile's bottom right corner */
+        readonly dot: {
+            readonly bottom: 4;
+            readonly right: 4;
+            readonly size: 9;
+            readonly borderWidth: 2;
+        };
+        /** the line under the pinned tiles, with its pin */
+        readonly separator: {
+            readonly width: 48;
+            readonly height: 14;
+            readonly lineWidth: 1;
+            readonly pinSize: 11;
+            readonly pinPaddingX: 3;
+        };
+        /**
+         * The two zones a tile is dragged between, the pinned one above the line and the rest below: while a tile is
+         * dragged both show a dashed outline, the one under the pointer a solid one; the empty pinned zone grows to
+         * one slot.
+         */
+        readonly zone: {
+            readonly minHeight: 12;
+            readonly radius: 12;
+            readonly droppableMinHeight: 48;
+            readonly droppableOutlineWidth: 1;
+            /** the share of the accent in the dashed outline */
+            readonly droppableOutlineShare: 0.5;
+            readonly outlineOffset: -2;
+            readonly targetOutlineWidth: 2;
+        };
+        /** the tile being dragged, where it stood; and the line above the pinned tile it would land before */
+        readonly drag: {
+            readonly opacity: 0.4;
+            readonly scale: 0.96;
+            readonly dropLineWidth: 3;
+        };
+    };
+    readonly column: {
+        readonly header: {
+            readonly height: 64;
+            readonly paddingLeft: 12;
+            readonly paddingRight: 8;
+            readonly gap: 8;
+            readonly fontSize: 16;
+            readonly iconSize: 18;
+            readonly flagFontSize: 16;
+        };
+        /** one agent: its logo, its name with the trust mark, its links, its menu */
+        readonly agentRow: {
+            readonly gap: 10;
+            readonly paddingTop: 8;
+            readonly paddingRight: 6;
+            readonly paddingBottom: 8;
+            readonly paddingLeft: 10;
+        };
+        readonly agentAvatar: {
+            readonly size: 40;
+            readonly radius: 12;
+            readonly initialsFontSize: 14;
+        };
+        readonly agentText: {
+            readonly gap: 1;
+        };
+        readonly agentTitle: {
+            readonly gap: 6;
+            readonly fontWeight: 600;
+        };
+        readonly trustMark: {
+            readonly size: 24;
+            readonly radius: 6;
+            readonly iconSize: 16;
+        };
+        readonly links: {
+            readonly gap: 10;
+            readonly fontSize: 11;
+            readonly lineHeight: 1.2;
+        };
+        /** the small icon buttons of a card: its menu, new conversation, search */
+        readonly smallButton: {
+            readonly size: 36;
+            readonly radius: 12;
+            readonly iconSize: 18;
+        };
+        /** the open card: the link state with the tools, then the conversations */
+        readonly body: {
+            readonly paddingX: 8;
+            readonly paddingBottom: 8;
+            readonly gap: 6;
+        };
+        readonly meta: {
+            readonly paddingX: 4;
+            readonly gap: 8;
+            readonly fontSize: 12;
+            readonly stateGap: 5;
+            readonly iconSize: 12;
+            readonly toolsGap: 2;
+        };
+        readonly conversationRow: {
+            readonly paddingY: 10;
+            readonly paddingLeft: 12;
+            /** room for the row's menu button */
+            readonly paddingRight: 40;
+            readonly minHeight: 44;
+            readonly radius: 10;
+            readonly rowGap: 2;
+            readonly columnGap: 8;
+            readonly titleWeight: 600;
+            readonly previewFontSize: 13;
+            readonly timeFontSize: 12;
+            /** the share of the accent mixed into the background of the selected row */
+            readonly selectedTint: 0.12;
+            readonly menuButtonSize: 36;
+            readonly menuIconSize: 16;
+        };
+        /** unread messages of a conversation, and of a closed card */
+        readonly count: {
+            readonly radius: 9;
+            readonly fontSize: 11;
+            readonly paddingY: 1;
+            readonly paddingX: 6;
+        };
+        readonly sectionLabel: {
+            readonly fontSize: 12;
+            readonly letterSpacing: 0.04;
+            readonly gap: 6;
+            readonly paddingTop: 4;
+            readonly paddingX: 8;
+            readonly iconSize: 12;
+        };
+        readonly empty: {
+            readonly fontSize: 13;
+            readonly paddingY: 6;
+            readonly paddingX: 8;
+        };
+    };
+};
+export type HomeDesign = typeof HOME_DESIGN;
+/** Which colour role paints what on the home page. */
+export declare const HOME_COLORS: {
+    readonly rail: {
+        readonly background: "surface";
+        readonly border: "border";
+        readonly icon: "muted";
+    };
+    readonly tileInitials: {
+        readonly background: "border";
+        readonly text: "text";
+    };
+    readonly ghost: {
+        readonly background: "bg";
+        readonly border: "border";
+    };
+    readonly selectedBar: {
+        readonly background: "accent";
+    };
+    readonly badge: {
+        readonly background: "danger";
+    };
+    readonly dot: {
+        readonly background: "warning";
+        readonly border: "surface";
+    };
+    readonly separator: {
+        readonly line: "border";
+        readonly pin: "muted";
+        readonly pinBackground: "surface";
+        readonly target: "accent";
+    };
+    readonly zone: {
+        readonly outline: "accent";
+    };
+    readonly drag: {
+        readonly dropLine: "accent";
+    };
+    readonly column: {
+        readonly background: "bg";
+        readonly border: "border";
+    };
+    readonly header: {
+        readonly icon: "muted";
+    };
+    readonly selectedCard: {
+        readonly background: "surface";
+    };
+    readonly links: {
+        readonly text: "muted";
+    };
+    readonly meta: {
+        readonly text: "muted";
+    };
+    readonly conversationRow: {
+        readonly preview: "muted";
+        readonly time: "muted";
+        readonly selectedTitle: "accent";
+    };
+    readonly count: {
+        readonly background: "accent";
+        readonly text: "accentContrast";
+    };
+    readonly sectionLabel: {
+        readonly text: "muted";
+    };
+};
+/** The trust mark of an agent, and the verdict of its Proof of Trust: one icon and one colour per result. */
+export declare const TRUST_MARK: {
+    readonly trusted: {
+        readonly icon: "shield-check";
+        readonly color: "ok";
+    };
+    readonly untrusted: {
+        readonly icon: "shield-alert";
+        readonly color: "danger";
+    };
+    readonly unverified: {
+        readonly icon: "shield-question";
+        readonly color: "warning";
+    };
+};
+export type TrustResult = keyof typeof TRUST_MARK;
+/** The icon before a controller's name: what stands behind its agents. */
+export declare const CONTROLLER_KIND_ICON: {
+    readonly organization: "building";
+    readonly persona: "user";
+    readonly unverified: "shield-question";
+};
+/**
+ * The time on a message and on a conversation row: the hour today, the day and the hour before. An unreadable
+ * date gives an empty string.
+ */
+export declare function formatTime(iso: string, locale: string, now?: Date): string;

package/dist/homeDesign.js

@@ -0,0 +1,118 @@
+/** The text every surface starts from: its size, and its line height as a multiple of the size. */
+export const BASE_TEXT = { fontSize: 15, lineHeight: 1.45 };
+export const HOME_DESIGN = {
+    rail: {
+        width: 64,
+        paddingY: 10,
+        gap: 6,
+        /** a controller's tile, and the bordered tiles that are not controllers (add, settings) */
+        tile: { size: 48, radius: 14, initialsFontSize: 15, initialsWeight: 600, inactiveOpacity: 0.5 },
+        ghost: { borderWidth: 1, iconSize: 22 },
+        /** the bar to the left of the selected tile */
+        selectedBar: { left: -8, inset: 10, width: 4, radius: 2 },
+        /** unread messages, on the tile's top right corner */
+        badge: { top: 2, right: 2, minWidth: 18, height: 18, paddingX: 5, radius: 9, fontSize: 11, fontWeight: 600 },
+        /** something waits for the person, on the tile's bottom right corner */
+        dot: { bottom: 4, right: 4, size: 9, borderWidth: 2 },
+        /** the line under the pinned tiles, with its pin */
+        separator: { width: 48, height: 14, lineWidth: 1, pinSize: 11, pinPaddingX: 3 },
+        /**
+         * The two zones a tile is dragged between, the pinned one above the line and the rest below: while a tile is
+         * dragged both show a dashed outline, the one under the pointer a solid one; the empty pinned zone grows to
+         * one slot.
+         */
+        zone: {
+            minHeight: 12,
+            radius: 12,
+            droppableMinHeight: 48,
+            droppableOutlineWidth: 1,
+            /** the share of the accent in the dashed outline */
+            droppableOutlineShare: 0.5,
+            outlineOffset: -2,
+            targetOutlineWidth: 2,
+        },
+        /** the tile being dragged, where it stood; and the line above the pinned tile it would land before */
+        drag: { opacity: 0.4, scale: 0.96, dropLineWidth: 3 },
+    },
+    column: {
+        header: { height: 64, paddingLeft: 12, paddingRight: 8, gap: 8, fontSize: 16, iconSize: 18, flagFontSize: 16 },
+        /** one agent: its logo, its name with the trust mark, its links, its menu */
+        agentRow: { gap: 10, paddingTop: 8, paddingRight: 6, paddingBottom: 8, paddingLeft: 10 },
+        agentAvatar: { size: 40, radius: 12, initialsFontSize: 14 },
+        agentText: { gap: 1 },
+        agentTitle: { gap: 6, fontWeight: 600 },
+        trustMark: { size: 24, radius: 6, iconSize: 16 },
+        links: { gap: 10, fontSize: 11, lineHeight: 1.2 },
+        /** the small icon buttons of a card: its menu, new conversation, search */
+        smallButton: { size: 36, radius: 12, iconSize: 18 },
+        /** the open card: the link state with the tools, then the conversations */
+        body: { paddingX: 8, paddingBottom: 8, gap: 6 },
+        meta: { paddingX: 4, gap: 8, fontSize: 12, stateGap: 5, iconSize: 12, toolsGap: 2 },
+        conversationRow: {
+            paddingY: 10,
+            paddingLeft: 12,
+            /** room for the row's menu button */
+            paddingRight: 40,
+            minHeight: 44,
+            radius: 10,
+            rowGap: 2,
+            columnGap: 8,
+            titleWeight: 600,
+            previewFontSize: 13,
+            timeFontSize: 12,
+            /** the share of the accent mixed into the background of the selected row */
+            selectedTint: 0.12,
+            menuButtonSize: 36,
+            menuIconSize: 16,
+        },
+        /** unread messages of a conversation, and of a closed card */
+        count: { radius: 9, fontSize: 11, paddingY: 1, paddingX: 6 },
+        sectionLabel: { fontSize: 12, letterSpacing: 0.04, gap: 6, paddingTop: 4, paddingX: 8, iconSize: 12 },
+        empty: { fontSize: 13, paddingY: 6, paddingX: 8 },
+    },
+};
+/** Which colour role paints what on the home page. */
+export const HOME_COLORS = {
+    rail: { background: 'surface', border: 'border', icon: 'muted' },
+    tileInitials: { background: 'border', text: 'text' },
+    ghost: { background: 'bg', border: 'border' },
+    selectedBar: { background: 'accent' },
+    badge: { background: 'danger' },
+    dot: { background: 'warning', border: 'surface' },
+    separator: { line: 'border', pin: 'muted', pinBackground: 'surface', target: 'accent' },
+    zone: { outline: 'accent' },
+    drag: { dropLine: 'accent' },
+    column: { background: 'bg', border: 'border' },
+    header: { icon: 'muted' },
+    selectedCard: { background: 'surface' },
+    links: { text: 'muted' },
+    meta: { text: 'muted' },
+    conversationRow: { preview: 'muted', time: 'muted', selectedTitle: 'accent' },
+    count: { background: 'accent', text: 'accentContrast' },
+    sectionLabel: { text: 'muted' },
+};
+/** The trust mark of an agent, and the verdict of its Proof of Trust: one icon and one colour per result. */
+export const TRUST_MARK = {
+    trusted: { icon: 'shield-check', color: 'ok' },
+    untrusted: { icon: 'shield-alert', color: 'danger' },
+    unverified: { icon: 'shield-question', color: 'warning' },
+};
+/** The icon before a controller's name: what stands behind its agents. */
+export const CONTROLLER_KIND_ICON = {
+    organization: 'building',
+    persona: 'user',
+    unverified: 'shield-question',
+};
+/**
+ * The time on a message and on a conversation row: the hour today, the day and the hour before. An unreadable
+ * date gives an empty string.
+ */
+export function formatTime(iso, locale, now = new Date()) {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return '';
+    const today = now.toDateString() === d.toDateString();
+    return new Intl.DateTimeFormat(locale, today
+        ? { hour: '2-digit', minute: '2-digit' }
+        : { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' }).format(d);
+}

package/dist/index.d.ts

@@ -2,7 +2,10 @@ export * from './agents.js';
 export * from './appLinks.js';
 export * from './conversationDesign.js';
 export * from './directory.js';
+export * from './flag.js';
+export * from './homeDesign.js';
 export * from './profileClient.js';
+export * from './proofOfTrustDesign.js';
 export * from './reducer.js';
 export * from './sse.js';
 export * from './store.js';
@@ -59,8 +62,6 @@ export declare function controllerOf(agent: {
     logoRef?: string;
     countryCode?: string;
 };
-/** The flag emoji of an ISO 3166-1 alpha-2 code, or an empty string when the code is not one. */
-export declare function flagOf(countryCode?: string): string;
 /** Rail order for controllers (UI-SHELL-011): pinned in the person's order, then by activity, then unverified. */
 /**
  * The stable rail (UI-SHELL-011, D37): pinned controllers in the person's order, then the identified ones (an

package/dist/index.js

@@ -2,7 +2,10 @@ export * from './agents.js';
 export * from './appLinks.js';
 export * from './conversationDesign.js';
 export * from './directory.js';
+export * from './flag.js';
+export * from './homeDesign.js';
 export * from './profileClient.js';
+export * from './proofOfTrustDesign.js';
 export * from './reducer.js';
 export * from './sse.js';
 export * from './store.js';
@@ -60,13 +63,6 @@ export function controllerOf(agent) {
     }
     return { did: agent.did, kind: 'unverified', name: agent.name, logoRef: agent.logoRef };
 }
-/** The flag emoji of an ISO 3166-1 alpha-2 code, or an empty string when the code is not one. */
-export function flagOf(countryCode) {
-    const code = (countryCode ?? '').trim().toUpperCase();
-    if (!/^[A-Z]{2}$/.test(code))
-        return '';
-    return String.fromCodePoint(...[...code].map((c) => 0x1f1e6 + c.charCodeAt(0) - 65));
-}
 /** Rail order for controllers (UI-SHELL-011): pinned in the person's order, then by activity, then unverified. */
 /**
  * The stable rail (UI-SHELL-011, D37): pinned controllers in the person's order, then the identified ones (an

package/dist/proofOfTrustDesign.d.ts

@@ -0,0 +1,350 @@
+import { type TrustResult } from './homeDesign.js';
+import type { Accreditation, CredentialCard, TrustDetails } from './trustDetails.js';
+export declare const PROOF_OF_TRUST_DESIGN: {
+    /** the card itself; on a phone it takes the screen, with no border and no radius */
+    readonly card: {
+        readonly maxWidth: 760;
+        readonly radius: 18;
+    };
+    readonly head: {
+        readonly gap: 6;
+        readonly paddingY: 12;
+        readonly paddingRight: 14;
+        readonly paddingLeft: 18;
+        readonly dotSize: 10;
+        readonly didFontSize: 12;
+        readonly toolIconSize: 15;
+        readonly closeIconSize: 18;
+    };
+    readonly body: {
+        readonly paddingTop: 18;
+        readonly paddingX: 22;
+        readonly paddingBottom: 22;
+        readonly gap: 18;
+    };
+    readonly verdict: {
+        readonly gap: 10;
+        readonly paddingY: 12;
+        readonly paddingX: 16;
+        readonly radius: 14;
+        readonly borderWidth: 2;
+        readonly iconSize: 22;
+        /** the share of the verdict's colour mixed into the background */
+        readonly tint: 0.08;
+        readonly labelFontSize: 18;
+        readonly labelWeight: 700;
+        readonly labelSpacing: 0.06;
+        readonly subFontSize: 12;
+    };
+    readonly reasons: {
+        readonly fontSize: 14;
+        readonly paddingLeft: 18;
+    };
+    readonly loading: {
+        readonly gap: 8;
+        readonly fontSize: 13;
+        readonly iconSize: 16;
+    };
+    /** one identity step: its node on the line, then who it is */
+    readonly step: {
+        readonly gap: 16;
+        readonly paddingBottom: 22;
+        readonly bodyGap: 8;
+    };
+    /** the line that joins a step's node to the next one */
+    readonly line: {
+        readonly left: 15;
+        readonly top: 32;
+        readonly width: 2;
+        readonly okShare: 0.4;
+    };
+    readonly node: {
+        readonly size: 32;
+        readonly borderWidth: 2;
+        readonly iconSize: 16;
+    };
+    readonly kicker: {
+        readonly fontSize: 11;
+        readonly fontWeight: 700;
+        readonly letterSpacing: 0.08;
+        readonly paddingTop: 7;
+    };
+    readonly identity: {
+        readonly gap: 14;
+        readonly avatarSize: 56;
+        readonly avatarRadius: 14;
+        readonly avatarFontSize: 18;
+        readonly textGap: 4;
+    };
+    readonly name: {
+        readonly fontSize: 20;
+        readonly fontWeight: 700;
+        readonly gap: 8;
+        readonly lineHeight: 1.2;
+        readonly iconSize: 18;
+    };
+    readonly facts: {
+        readonly gap: 14;
+        readonly columnGap: 2;
+        readonly fontSize: 13;
+        readonly linkGap: 3;
+        readonly linkIconSize: 11;
+    };
+    readonly provenance: {
+        readonly fontSize: 13;
+    };
+    readonly section: {
+        readonly paddingTop: 12;
+        readonly titleMarginBottom: 8;
+        readonly titleFontSize: 12;
+        readonly titleWeight: 700;
+        readonly titleSpacing: 0.08;
+        readonly titleGap: 8;
+        readonly iconSize: 16;
+    };
+    readonly count: {
+        readonly minWidth: 20;
+        readonly height: 20;
+        readonly paddingX: 6;
+        readonly radius: 10;
+        readonly fontSize: 11;
+        readonly tint: 0.14;
+    };
+    readonly row: {
+        readonly gap: 10;
+        readonly paddingY: 7;
+        readonly fontSize: 14;
+        readonly titleWeight: 600;
+        readonly titleGap: 6;
+        readonly titleIconSize: 14;
+        readonly linkIconSize: 12;
+    };
+    readonly valid: {
+        readonly gap: 4;
+        readonly fontSize: 13;
+        readonly fontWeight: 600;
+        readonly iconSize: 14;
+    };
+    readonly role: {
+        readonly fontSize: 11;
+        readonly fontWeight: 700;
+        readonly letterSpacing: 0.05;
+        readonly paddingY: 2;
+        readonly paddingX: 8;
+        readonly radius: 6;
+        readonly tint: 0.12;
+        readonly ecosystemTint: 0.14;
+    };
+    readonly tag: {
+        readonly fontSize: 11;
+        readonly fontWeight: 600;
+        readonly radius: 6;
+        readonly paddingY: 1;
+        readonly paddingX: 6;
+        readonly tint: 0.12;
+    };
+    readonly claims: {
+        readonly marginTop: 2;
+        readonly rowGap: 2;
+        readonly columnGap: 12;
+        readonly fontSize: 13;
+    };
+    readonly endpoint: {
+        readonly fontSize: 12;
+    };
+    readonly actions: {
+        readonly gap: 10;
+        readonly paddingTop: 14;
+    };
+};
+export type ProofOfTrustDesign = typeof PROOF_OF_TRUST_DESIGN;
+/** Which colour role paints what on the Proof of Trust. */
+export declare const PROOF_OF_TRUST_COLORS: {
+    readonly view: {
+        readonly background: "surface";
+    };
+    readonly card: {
+        readonly background: "bg";
+        readonly border: "border";
+    };
+    readonly did: {
+        readonly text: "muted";
+    };
+    readonly verdictSub: {
+        readonly text: "muted";
+    };
+    readonly reasons: {
+        readonly text: "danger";
+    };
+    readonly loading: {
+        readonly text: "muted";
+    };
+    readonly line: {
+        readonly ok: "ok";
+        readonly rest: "border";
+    };
+    readonly node: {
+        readonly ok: "ok";
+        readonly bad: "danger";
+        readonly background: "bg";
+    };
+    readonly kicker: {
+        readonly text: "muted";
+    };
+    readonly nameIcon: {
+        readonly color: "muted";
+    };
+    readonly facts: {
+        readonly text: "muted";
+    };
+    readonly provenance: {
+        readonly text: "muted";
+    };
+    readonly section: {
+        readonly border: "border";
+        readonly title: "muted";
+    };
+    readonly count: {
+        readonly background: "accent";
+        readonly text: "accent";
+    };
+    readonly valid: {
+        readonly ok: "ok";
+        readonly bad: "danger";
+    };
+    readonly role: {
+        readonly text: "accent";
+        readonly ecosystem: "warning";
+    };
+    readonly tag: {
+        readonly text: "accent";
+    };
+    readonly claims: {
+        readonly key: "muted";
+    };
+};
+/** The verdict the card shows: the registry's answer once loaded, the agent's last known result before. */
+export declare function verdictOf(details: Pick<TrustDetails, 'trusted'> | null | undefined, fallback: TrustResult): TrustResult;
+/** The icon and the colour of a verdict: those of the trust mark. */
+export declare const VERDICT_MARK: {
+    readonly trusted: {
+        readonly icon: "shield-check";
+        readonly color: "ok";
+    };
+    readonly untrusted: {
+        readonly icon: "shield-alert";
+        readonly color: "danger";
+    };
+    readonly unverified: {
+        readonly icon: "shield-question";
+        readonly color: "warning";
+    };
+};
+/** A DID short enough for one line: its two ends. */
+export declare function shortDid(did: string): string;
+export declare function schemaLabel(title: string): string;
+/** The DID in the Verana search, from the graph's address. */
+export declare function didSearchUrl(graphUrl: string, did: string): string;
+/**
+ * The wording of the card, in English: the browser's translation files hold the same keys (a test compares the
+ * English one with this), and the app, which speaks English for now, reads it from here.
+ */
+export declare const PROOF_OF_TRUST_COPY: {
+    readonly title: "Proof of Trust";
+    readonly loading: "Checking the registry";
+    readonly copyDid: "Copy the DID";
+    readonly openInGraph: "Open in the Verana search";
+    readonly evaluated: "Evaluated {{time}}";
+    readonly block: "block {{block}}";
+    readonly service: "Service";
+    readonly operatedBy: "Operated by";
+    readonly selfIssued: "Self-issued";
+    readonly issuedBy: "Issued by {{name}}";
+    readonly issuedByUnknown: "Issuer accredited";
+    readonly since: "since {{time}}";
+    readonly validUntil: "valid until {{time}}";
+    readonly minimumAge: "Minimum age {{age}}";
+    readonly registryId: "Registry id";
+    readonly jurisdiction: "Jurisdiction";
+    readonly alsoPresents: "Also presents";
+    readonly verified: "verified";
+    readonly invalid: "invalid";
+    readonly accreditations: "Accreditations";
+    readonly endpoints: "Endpoints in the DID Document";
+    readonly governance: "Governance";
+    readonly ecosystem: "Ecosystem";
+    readonly root: "accredited by the ecosystem";
+    readonly egf: "Governance framework";
+    readonly cgf: "Corporate governance framework";
+    readonly corporation: "Corporation {{id}}";
+    readonly via: "via {{chain}}";
+    readonly 'role.ECOSYSTEM': "Ecosystem";
+    readonly 'role.ISSUER_GRANTOR': "Issuer grantor";
+    readonly 'role.VERIFIER_GRANTOR': "Verifier grantor";
+    readonly 'role.ISSUER': "Issuer";
+    readonly 'role.VERIFIER': "Verifier";
+    readonly 'role.HOLDER': "Holder";
+};
+export type ProofOfTrustKey = keyof typeof PROOF_OF_TRUST_COPY;
+/** The wording of a verdict and of the reasons behind one that is not "trusted" (the browser's `trust.*` keys). */
+export declare const TRUST_COPY: {
+    readonly trusted: "Trusted";
+    readonly untrusted: "Untrusted";
+    readonly unverified: "Could not verify";
+    readonly 'reasons.not-trusted': "The Verana registry does not vouch for this service.";
+    readonly 'reasons.did-not-found': "The DID is unknown to the registry.";
+    readonly 'reasons.resolution-unavailable': "The trust resolution service could not be reached.";
+    readonly 'reasons.no-service-credential': "No service credential was found.";
+};
+/** A text of the card with its values in place: what the renderer's translator returns. */
+export type ProofOfTrustText = (key: ProofOfTrustKey, values?: Record<string, string | number>) => string;
+/** Fills the `{{name}}` places of a text. */
+export declare function fillText(template: string, values?: Record<string, string | number>): string;
+/** The card's wording in English, for a renderer with no translation files. */
+export declare const proofOfTrustEnglish: ProofOfTrustText;
+/** One identity step as the card draws it: who the credential names, and what it says about them. */
+export interface IdentityStepView {
+    kind: 'service' | 'operator';
+    valid: boolean;
+    /** "Service · ECS-Service" */
+    kicker: string;
+    name: string;
+    logo?: string;
+    /** the icon before an operator's name */
+    nameIcon?: 'building' | 'user';
+    flag?: string;
+    countryCode?: string;
+    /** a service: its type, as a tag */
+    tag?: string;
+    description?: string;
+    /** a service: the facts on one line; an operator: one per line */
+    factsLayout: 'row' | 'column';
+    facts: {
+        label?: string;
+        value: string;
+    }[];
+    links: {
+        label: 'terms' | 'privacy';
+        url: string;
+    }[];
+    /** "Issued by … · ecosystem · since … · valid until …" */
+    provenance: string;
+}
+/**
+ * An identity credential as its step shows it (UI-TRUST-003). `t` gives the wording, `day` writes a date; the
+ * terms and privacy links carry a label the renderer words itself (they are the column's).
+ */
+export declare function identityStepOf(kind: 'service' | 'operator', card: CredentialCard, t: ProofOfTrustText, day: (iso: string) => string): IdentityStepView;
+/** The line under another credential the DID presents: its issuer, its ecosystem, its end. */
+export declare function otherCredentialLine(card: CredentialCard, t: ProofOfTrustText, when: (iso: string) => string): string;
+/**
+ * The line of an accreditation: its ecosystem, then the grantors between the ecosystem's root and this participant
+ * (none means the ecosystem accredited it directly), then its state when it is not active.
+ */
+export declare function accreditationLine(a: Accreditation, t: ProofOfTrustText): string;
+/** The claims of a non-identity credential, flat key and value, strings and numbers only. */
+export declare function claimRows(claims: Record<string, unknown>): {
+    key: string;
+    value: string;
+    link: boolean;
+}[];

package/dist/proofOfTrustDesign.js

@@ -0,0 +1,264 @@
+import { flagOf } from './flag.js';
+import { TRUST_MARK } from './homeDesign.js';
+export const PROOF_OF_TRUST_DESIGN = {
+    /** the card itself; on a phone it takes the screen, with no border and no radius */
+    card: { maxWidth: 760, radius: 18 },
+    head: {
+        gap: 6,
+        paddingY: 12,
+        paddingRight: 14,
+        paddingLeft: 18,
+        dotSize: 10,
+        didFontSize: 12,
+        toolIconSize: 15,
+        closeIconSize: 18,
+    },
+    body: { paddingTop: 18, paddingX: 22, paddingBottom: 22, gap: 18 },
+    verdict: {
+        gap: 10,
+        paddingY: 12,
+        paddingX: 16,
+        radius: 14,
+        borderWidth: 2,
+        iconSize: 22,
+        /** the share of the verdict's colour mixed into the background */
+        tint: 0.08,
+        labelFontSize: 18,
+        labelWeight: 700,
+        labelSpacing: 0.06,
+        subFontSize: 12,
+    },
+    reasons: { fontSize: 14, paddingLeft: 18 },
+    loading: { gap: 8, fontSize: 13, iconSize: 16 },
+    /** one identity step: its node on the line, then who it is */
+    step: { gap: 16, paddingBottom: 22, bodyGap: 8 },
+    /** the line that joins a step's node to the next one */
+    line: { left: 15, top: 32, width: 2, okShare: 0.4 },
+    node: { size: 32, borderWidth: 2, iconSize: 16 },
+    kicker: { fontSize: 11, fontWeight: 700, letterSpacing: 0.08, paddingTop: 7 },
+    identity: { gap: 14, avatarSize: 56, avatarRadius: 14, avatarFontSize: 18, textGap: 4 },
+    name: { fontSize: 20, fontWeight: 700, gap: 8, lineHeight: 1.2, iconSize: 18 },
+    facts: { gap: 14, columnGap: 2, fontSize: 13, linkGap: 3, linkIconSize: 11 },
+    provenance: { fontSize: 13 },
+    section: {
+        paddingTop: 12,
+        titleMarginBottom: 8,
+        titleFontSize: 12,
+        titleWeight: 700,
+        titleSpacing: 0.08,
+        titleGap: 8,
+        iconSize: 16,
+    },
+    count: { minWidth: 20, height: 20, paddingX: 6, radius: 10, fontSize: 11, tint: 0.14 },
+    row: { gap: 10, paddingY: 7, fontSize: 14, titleWeight: 600, titleGap: 6, titleIconSize: 14, linkIconSize: 12 },
+    valid: { gap: 4, fontSize: 13, fontWeight: 600, iconSize: 14 },
+    role: {
+        fontSize: 11,
+        fontWeight: 700,
+        letterSpacing: 0.05,
+        paddingY: 2,
+        paddingX: 8,
+        radius: 6,
+        tint: 0.12,
+        ecosystemTint: 0.14,
+    },
+    tag: { fontSize: 11, fontWeight: 600, radius: 6, paddingY: 1, paddingX: 6, tint: 0.12 },
+    claims: { marginTop: 2, rowGap: 2, columnGap: 12, fontSize: 13 },
+    endpoint: { fontSize: 12 },
+    actions: { gap: 10, paddingTop: 14 },
+};
+/** Which colour role paints what on the Proof of Trust. */
+export const PROOF_OF_TRUST_COLORS = {
+    view: { background: 'surface' },
+    card: { background: 'bg', border: 'border' },
+    did: { text: 'muted' },
+    verdictSub: { text: 'muted' },
+    reasons: { text: 'danger' },
+    loading: { text: 'muted' },
+    line: { ok: 'ok', rest: 'border' },
+    node: { ok: 'ok', bad: 'danger', background: 'bg' },
+    kicker: { text: 'muted' },
+    nameIcon: { color: 'muted' },
+    facts: { text: 'muted' },
+    provenance: { text: 'muted' },
+    section: { border: 'border', title: 'muted' },
+    count: { background: 'accent', text: 'accent' },
+    valid: { ok: 'ok', bad: 'danger' },
+    role: { text: 'accent', ecosystem: 'warning' },
+    tag: { text: 'accent' },
+    claims: { key: 'muted' },
+};
+/** The verdict the card shows: the registry's answer once loaded, the agent's last known result before. */
+export function verdictOf(details, fallback) {
+    if (!details)
+        return fallback;
+    return details.trusted === null ? 'unverified' : details.trusted ? 'trusted' : 'untrusted';
+}
+/** The icon and the colour of a verdict: those of the trust mark. */
+export const VERDICT_MARK = TRUST_MARK;
+/** A DID short enough for one line: its two ends. */
+export function shortDid(did) {
+    return did.length > 48 ? `${did.slice(0, 22)}…${did.slice(-20)}` : did;
+}
+/** ECS schema titles as people read them on the wallet cards. */
+const ECS_LABEL = {
+    ServiceCredential: 'ECS-Service',
+    OrganizationCredential: 'ECS-Organization',
+    PersonaCredential: 'ECS-Persona',
+    UserAgentCredential: 'ECS-UserAgent',
+};
+export function schemaLabel(title) {
+    return ECS_LABEL[title] ?? title;
+}
+/** The DID in the Verana search, from the graph's address. */
+export function didSearchUrl(graphUrl, did) {
+    return `${graphUrl.replace(/graph\./, 'search.')}/?q=${encodeURIComponent(did)}`;
+}
+/**
+ * The wording of the card, in English: the browser's translation files hold the same keys (a test compares the
+ * English one with this), and the app, which speaks English for now, reads it from here.
+ */
+export const PROOF_OF_TRUST_COPY = {
+    title: 'Proof of Trust',
+    loading: 'Checking the registry',
+    copyDid: 'Copy the DID',
+    openInGraph: 'Open in the Verana search',
+    evaluated: 'Evaluated {{time}}',
+    block: 'block {{block}}',
+    service: 'Service',
+    operatedBy: 'Operated by',
+    selfIssued: 'Self-issued',
+    issuedBy: 'Issued by {{name}}',
+    issuedByUnknown: 'Issuer accredited',
+    since: 'since {{time}}',
+    validUntil: 'valid until {{time}}',
+    minimumAge: 'Minimum age {{age}}',
+    registryId: 'Registry id',
+    jurisdiction: 'Jurisdiction',
+    alsoPresents: 'Also presents',
+    verified: 'verified',
+    invalid: 'invalid',
+    accreditations: 'Accreditations',
+    endpoints: 'Endpoints in the DID Document',
+    governance: 'Governance',
+    ecosystem: 'Ecosystem',
+    root: 'accredited by the ecosystem',
+    egf: 'Governance framework',
+    cgf: 'Corporate governance framework',
+    corporation: 'Corporation {{id}}',
+    via: 'via {{chain}}',
+    'role.ECOSYSTEM': 'Ecosystem',
+    'role.ISSUER_GRANTOR': 'Issuer grantor',
+    'role.VERIFIER_GRANTOR': 'Verifier grantor',
+    'role.ISSUER': 'Issuer',
+    'role.VERIFIER': 'Verifier',
+    'role.HOLDER': 'Holder',
+};
+/** The wording of a verdict and of the reasons behind one that is not "trusted" (the browser's `trust.*` keys). */
+export const TRUST_COPY = {
+    trusted: 'Trusted',
+    untrusted: 'Untrusted',
+    unverified: 'Could not verify',
+    'reasons.not-trusted': 'The Verana registry does not vouch for this service.',
+    'reasons.did-not-found': 'The DID is unknown to the registry.',
+    'reasons.resolution-unavailable': 'The trust resolution service could not be reached.',
+    'reasons.no-service-credential': 'No service credential was found.',
+};
+/** Fills the `{{name}}` places of a text. */
+export function fillText(template, values = {}) {
+    return template.replace(/\{\{(\w+)\}\}/g, (_, name) => String(values[name] ?? ''));
+}
+/** The card's wording in English, for a renderer with no translation files. */
+export const proofOfTrustEnglish = (key, values) => fillText(PROOF_OF_TRUST_COPY[key], values);
+const text = (v) => (typeof v === 'string' && v ? v : undefined);
+/**
+ * An identity credential as its step shows it (UI-TRUST-003). `t` gives the wording, `day` writes a date; the
+ * terms and privacy links carry a label the renderer words itself (they are the column's).
+ */
+export function identityStepOf(kind, card, t, day) {
+    const c = card.claims;
+    const facts = [];
+    const links = [];
+    if (kind === 'service') {
+        if (typeof c.minimumAgeRequired === 'number' && c.minimumAgeRequired > 0)
+            facts.push({ value: t('minimumAge', { age: c.minimumAgeRequired }) });
+        const terms = text(c.termsAndConditionsUri);
+        const privacy = text(c.privacyPolicyUri);
+        if (terms)
+            links.push({ label: 'terms', url: terms });
+        if (privacy)
+            links.push({ label: 'privacy', url: privacy });
+    }
+    else {
+        const address = text(c.address);
+        if (address)
+            facts.push({ value: address });
+        if (c.registryId)
+            facts.push({ label: t('registryId'), value: String(c.registryId) });
+        if (c.lei)
+            facts.push({ label: 'LEI', value: String(c.lei) });
+        if (c.legalJurisdiction)
+            facts.push({ label: t('jurisdiction'), value: String(c.legalJurisdiction) });
+    }
+    const provenance = [
+        card.selfIssued
+            ? t('selfIssued')
+            : card.issuer.name
+                ? t('issuedBy', { name: card.issuer.name })
+                : t('issuedByUnknown'),
+        card.ecosystem.name,
+        card.issuedAt ? t('since', { time: day(card.issuedAt) }) : undefined,
+        card.validUntil ? t('validUntil', { time: day(card.validUntil) }) : undefined,
+    ]
+        .filter(Boolean)
+        .join(' · ');
+    const countryCode = text(c.countryCode);
+    return {
+        kind,
+        valid: card.valid,
+        kicker: `${t(kind === 'service' ? 'service' : 'operatedBy')} · ${schemaLabel(card.schemaTitle)}`,
+        name: String(c.name ?? ''),
+        logo: text(c.logoUri) ?? text(c.avatarUri),
+        nameIcon: kind === 'operator' ? (card.ecsSchema === 'PersonaCredential' ? 'user' : 'building') : undefined,
+        flag: flagOf(countryCode) || undefined,
+        countryCode,
+        tag: kind === 'service' ? text(c.type) : undefined,
+        description: kind === 'service' ? text(c.description) : undefined,
+        factsLayout: kind === 'service' ? 'row' : 'column',
+        facts,
+        links,
+        provenance,
+    };
+}
+/** The line under another credential the DID presents: its issuer, its ecosystem, its end. */
+export function otherCredentialLine(card, t, when) {
+    return [
+        card.issuer.name ? t('issuedBy', { name: card.issuer.name }) : undefined,
+        card.ecosystem.name,
+        card.validUntil ? t('validUntil', { time: when(card.validUntil) }) : undefined,
+    ]
+        .filter(Boolean)
+        .join(' · ');
+}
+/**
+ * The line of an accreditation: its ecosystem, then the grantors between the ecosystem's root and this participant
+ * (none means the ecosystem accredited it directly), then its state when it is not active.
+ */
+export function accreditationLine(a, t) {
+    const grantors = a.chain.filter((c) => c.participantId !== a.participantId && c.role !== 'ECOSYSTEM');
+    return [
+        a.ecosystem.name ?? `${t('ecosystem')} ${a.ecosystem.id}`,
+        grantors.length
+            ? t('via', { chain: grantors.map((c) => c.who.name ?? t(`role.${c.role}`)).join(' → ') })
+            : t('root'),
+        a.state !== 'ACTIVE' ? a.state.toLowerCase() : undefined,
+    ]
+        .filter(Boolean)
+        .join(' · ');
+}
+/** The claims of a non-identity credential, flat key and value, strings and numbers only. */
+export function claimRows(claims) {
+    return Object.entries(claims)
+        .filter(([k, v]) => k !== 'id' && !/Sri$/.test(k) && (typeof v === 'string' || typeof v === 'number'))
+        .map(([key, v]) => ({ key, value: String(v), link: /^https?:\/\//.test(String(v)) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ayni.org/ayni-ui-core",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Framework-independent core of the Ayni UI (UI-SHELL-004): agents and controllers, trust resolution, sessions and binding, the conversation reducer, the local store and sync; shared by the browser UI and the Ayni app",
   "type": "module",
   "main": "./dist/index.js",