@ayni.org/ayni-ui-core 0.1.0 → 0.3.0

package/dist/homeDesign.d.ts

@@ -0,0 +1,242 @@
+/** 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;
+        };
+    };
+    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 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,99 @@
+/** 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 },
+    },
+    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' },
+    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

@@ -1,6 +1,11 @@
 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';
@@ -9,7 +14,17 @@ export * from './trust.js';
 export * from './types.js';
 export declare const CLIENT: {
     readonly name: "ayni-ui";
-    readonly version: "3.0.0";
+    readonly version: "3.1.0";
+};
+/**
+ * The client description sent at session creation (PROF-SESS-014): a 3.1 agent gets `platform: web` and the
+ * browser as `description`; a 3.0 agent gets the browser as the free-text platform it expects.
+ */
+export declare function clientDescription(profileVersion: string | undefined, browser: string): {
+    name: string;
+    version: string;
+    platform: string;
+    description?: string;
 };
 export declare const CLOSURE_REASON_KEYS: Record<string, string>;
 /** Rail order (UI-SHELL-011): pinned in the person's order, then by most recent message, then not linked. */
@@ -47,13 +62,23 @@ 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
+ * agent of theirs issued the person a credential), then the others, both in connection order, then the unverified
+ * tiles. Nothing here depends on activity: a message never moves a tile.
+ */
 export declare function orderControllers<T extends {
     did: string;
     kind: string;
     pinned: boolean;
     pinOrder: number;
-}>(controllers: T[], lastMessageAt: (c: T) => string): T[];
+    identifiedAt?: string;
+}>(controllers: T[], connectedAt: (c: T) => string): T[];
+/** Whether a transcript records a credential issued to the person: a completed `issue` flow card (D37). */
+export declare function hasIssuedCredential(messages: {
+    role: string;
+    activityType?: string;
+    content?: unknown;
+}[]): boolean;
 export * from './trustDetails.js';

package/dist/index.js

@@ -1,13 +1,27 @@
 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';
 export * from './sync.js';
 export * from './trust.js';
 export * from './types.js';
-export const CLIENT = { name: 'ayni-ui', version: '3.0.0' };
+export const CLIENT = { name: 'ayni-ui', version: '3.1.0' };
+/**
+ * The client description sent at session creation (PROF-SESS-014): a 3.1 agent gets `platform: web` and the
+ * browser as `description`; a 3.0 agent gets the browser as the free-text platform it expects.
+ */
+export function clientDescription(profileVersion, browser) {
+    const [major, minor] = (profileVersion ?? '3.0').split('.').map(Number);
+    const supportsDescription = major > 3 || (major === 3 && (minor ?? 0) >= 1);
+    return supportsDescription ? { ...CLIENT, platform: 'web', description: browser } : { ...CLIENT, platform: browser };
+}
 export const CLOSURE_REASON_KEYS = {
     user: 'closure.user',
     supersede: 'closure.supersede',
@@ -49,23 +63,28 @@ 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. */
-export function orderControllers(controllers, lastMessageAt) {
+/**
+ * The stable rail (UI-SHELL-011, D37): pinned controllers in the person's order, then the identified ones (an
+ * agent of theirs issued the person a credential), then the others, both in connection order, then the unverified
+ * tiles. Nothing here depends on activity: a message never moves a tile.
+ */
+export function orderControllers(controllers, connectedAt) {
+    const byConnection = (a, b) => connectedAt(a).localeCompare(connectedAt(b)) || a.did.localeCompare(b.did);
     const pinned = controllers.filter((c) => c.pinned).sort((a, b) => a.pinOrder - b.pinOrder);
     const rest = controllers.filter((c) => !c.pinned);
-    const verified = rest
-        .filter((c) => c.kind !== 'unverified')
-        .sort((a, b) => lastMessageAt(b).localeCompare(lastMessageAt(a)));
-    const unverified = rest
-        .filter((c) => c.kind === 'unverified')
-        .sort((a, b) => lastMessageAt(b).localeCompare(lastMessageAt(a)));
-    return [...pinned, ...verified, ...unverified];
+    const identified = rest.filter((c) => c.kind !== 'unverified' && c.identifiedAt).sort(byConnection);
+    const others = rest.filter((c) => c.kind !== 'unverified' && !c.identifiedAt).sort(byConnection);
+    const unverified = rest.filter((c) => c.kind === 'unverified').sort(byConnection);
+    return [...pinned, ...identified, ...others, ...unverified];
+}
+/** Whether a transcript records a credential issued to the person: a completed `issue` flow card (D37). */
+export function hasIssuedCredential(messages) {
+    return messages.some((m) => {
+        if (m.role !== 'activity' || m.activityType !== 'ayni.flow')
+            return false;
+        const c = (m.content ?? {});
+        return c.kind === 'issue' && c.state === 'completed';
+    });
 }
 export * from './trustDetails.js';