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

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/appLinks.d.ts

@@ -0,0 +1,42 @@
+/**
+ * App links (AG-UI profile 3.1 §10, UI-LINK-001..003, D38): HTTPS links on the network's app-link domain, which is
+ * the web UI's own host. Parsing reads only the profile's parameters (`q`, a DID, a segment, `to`, `amount`, `memo`,
+ * `oob`) and ignores every other one; the UI opens the matching web route in place when one exists and shows
+ * "on your phone" with the destination named otherwise. Links navigate, never act.
+ */
+export type AppLinkDestination = {
+    path: 'home';
+    controller?: string;
+} | {
+    path: 'recent';
+    segment?: 'feed';
+} | {
+    path: 'scan';
+} | {
+    path: 'explore';
+    q?: string;
+    create?: boolean;
+} | {
+    path: 'wallet';
+    segment?: 'documents' | 'history' | 'card' | 'send';
+    id?: string;
+} | {
+    path: 'service';
+    did: string;
+} | {
+    path: 'settings';
+    section?: 'backup' | 'devices';
+} | {
+    path: 'connect';
+    oob?: string;
+} | {
+    path: 'unknown';
+};
+/** Whether `href` is an app link of this UI's app-link domain (`origin` is the UI's own origin). */
+export declare function isAppLink(href: string, origin: string): boolean;
+/** The destination an app link names; `unknown` for a path outside §10. Stray parameters change nothing. */
+export declare function parseAppLink(href: string, origin: string): AppLinkDestination;
+/** The web routes of UI-LINK-001; every other destination is shown as "on your phone". */
+export declare function hasWebRoute(destination: AppLinkDestination): boolean;
+/** A stable key for the destination's label (`link.destination.<key>` in the UI's strings). */
+export declare function destinationKey(destination: AppLinkDestination): string;

package/dist/appLinks.js

@@ -0,0 +1,120 @@
+/**
+ * App links (AG-UI profile 3.1 §10, UI-LINK-001..003, D38): HTTPS links on the network's app-link domain, which is
+ * the web UI's own host. Parsing reads only the profile's parameters (`q`, a DID, a segment, `to`, `amount`, `memo`,
+ * `oob`) and ignores every other one; the UI opens the matching web route in place when one exists and shows
+ * "on your phone" with the destination named otherwise. Links navigate, never act.
+ */
+/** Whether `href` is an app link of this UI's app-link domain (`origin` is the UI's own origin). */
+export function isAppLink(href, origin) {
+    try {
+        const url = new URL(href, origin);
+        return url.origin === origin && (url.pathname === '/app' || url.pathname.startsWith('/app/'));
+    }
+    catch {
+        return false;
+    }
+}
+/** The destination an app link names; `unknown` for a path outside §10. Stray parameters change nothing. */
+export function parseAppLink(href, origin) {
+    let url;
+    try {
+        url = new URL(href, origin);
+    }
+    catch {
+        return { path: 'unknown' };
+    }
+    const parts = url.pathname
+        .replace(/\/+$/, '')
+        .split('/')
+        .filter(Boolean)
+        .map((p) => decodeURIComponent(p));
+    if (parts[0] !== 'app')
+        return { path: 'unknown' };
+    const [, head, second, third] = parts;
+    const params = url.searchParams;
+    switch (head) {
+        case 'home':
+            return parts.length <= 3 ? { path: 'home', ...(second ? { controller: second } : {}) } : { path: 'unknown' };
+        case 'recent':
+            if (parts.length === 2)
+                return { path: 'recent' };
+            return parts.length === 3 && second === 'feed' ? { path: 'recent', segment: 'feed' } : { path: 'unknown' };
+        case 'scan':
+            return parts.length === 2 ? { path: 'scan' } : { path: 'unknown' };
+        case 'explore': {
+            if (parts.length === 3 && second === 'create')
+                return { path: 'explore', create: true };
+            if (parts.length !== 2)
+                return { path: 'unknown' };
+            const q = params.get('q')?.trim();
+            return q ? { path: 'explore', q } : { path: 'explore' };
+        }
+        case 'wallet': {
+            if (parts.length === 2)
+                return { path: 'wallet' };
+            if (parts.length === 3 && (second === 'documents' || second === 'history' || second === 'send'))
+                return { path: 'wallet', segment: second };
+            if (parts.length === 4 && second === 'card' && third)
+                return { path: 'wallet', segment: 'card', id: third };
+            return { path: 'unknown' };
+        }
+        case 'service':
+            return parts.length === 3 && second?.startsWith('did:') ? { path: 'service', did: second } : { path: 'unknown' };
+        case 'settings':
+            if (parts.length === 2)
+                return { path: 'settings' };
+            return parts.length === 3 && (second === 'backup' || second === 'devices')
+                ? { path: 'settings', section: second }
+                : { path: 'unknown' };
+        case 'connect': {
+            if (parts.length !== 2)
+                return { path: 'unknown' };
+            const oob = params.get('oob')?.trim();
+            return oob ? { path: 'connect', oob } : { path: 'connect' };
+        }
+        default:
+            return { path: 'unknown' };
+    }
+}
+/** The web routes of UI-LINK-001; every other destination is shown as "on your phone". */
+export function hasWebRoute(destination) {
+    switch (destination.path) {
+        case 'home':
+        case 'service':
+        case 'connect':
+            return true;
+        case 'explore':
+            return !destination.create;
+        case 'settings':
+            return destination.section !== 'backup';
+        default:
+            return false;
+    }
+}
+/** A stable key for the destination's label (`link.destination.<key>` in the UI's strings). */
+export function destinationKey(destination) {
+    switch (destination.path) {
+        case 'recent':
+            return destination.segment === 'feed' ? 'recentFeed' : 'recent';
+        case 'wallet':
+            return destination.segment === 'documents'
+                ? 'walletDocuments'
+                : destination.segment === 'history'
+                    ? 'walletHistory'
+                    : destination.segment === 'card'
+                        ? 'walletCard'
+                        : destination.segment === 'send'
+                            ? 'walletSend'
+                            : 'wallet';
+        case 'explore':
+            return destination.create ? 'exploreCreate' : 'explore';
+        case 'settings':
+            return destination.section === 'backup'
+                ? 'settingsBackup'
+                : destination.section === 'devices'
+                    ? 'settingsDevices'
+                    : 'settings';
+        default:
+            return destination.path;
+    }
+}

package/dist/conversationDesign.d.ts

@@ -0,0 +1,167 @@
+/**
+ * The design of a conversation, written once for the two renderers of the Ayni UI: the browser (CSS) and the Ayni
+ * app (React Native styles). The numbers are CSS pixels, which React Native reads as density-independent points.
+ *
+ * The browser's stylesheet is the reference: a test in this repository compares it with these values, so the two
+ * cannot drift apart. The app builds its styles from them. A change of the conversation's look starts here.
+ */
+export declare const CONVERSATION_DESIGN: {
+    readonly transcript: {
+        readonly paddingTop: 16;
+        readonly paddingX: 20;
+        readonly paddingBottom: 20;
+        readonly gap: 18;
+    };
+    readonly bubble: {
+        /** a bubble never grows wider than this, nor than its row */
+        readonly maxWidth: 640;
+        readonly paddingTop: 9;
+        readonly paddingX: 14;
+        readonly paddingBottom: 8;
+        readonly radius: 16;
+        /** the one tighter corner: bottom right on the person's messages, top left on the agent's */
+        readonly tailRadius: 4;
+        /** between the quote, the body and the meta line */
+        readonly gap: 4;
+        /** room for the reaction pill, which overlaps the bubble's bottom edge */
+        readonly reactedPaddingBottom: 16;
+        readonly reactedMarginBottom: 12;
+    };
+    /** a system line: centred, no bubble */
+    readonly system: {
+        readonly fontSize: 13;
+    };
+    /** the time and "interrupted", at the end of the bubble */
+    readonly meta: {
+        readonly fontSize: 11;
+        readonly gap: 6;
+        readonly userTextOpacity: 0.78;
+    };
+    /** the message a reply answers, at the top of the bubble */
+    readonly quote: {
+        readonly paddingY: 5;
+        readonly paddingX: 10;
+        readonly borderWidth: 3;
+        readonly radius: 6;
+        readonly fontSize: 13;
+        readonly gap: 1;
+        readonly marginBottom: 2;
+        readonly whoWeight: 600;
+        readonly textOpacity: 0.9;
+        /** the share of the text colour mixed into a transparent background */
+        readonly tint: 0.07;
+        /** on the person's bubble: the share of the contrast colour in the background and in the border */
+        readonly userTint: 0.16;
+        readonly userBorderOpacity: 0.7;
+    };
+    /** the reactions of a message: one pill on the inner bottom corner, the same on both sides (UI-CONV-011) */
+    readonly reactionPill: {
+        readonly height: 26;
+        readonly paddingX: 8;
+        readonly radius: 13;
+        readonly borderWidth: 1;
+        readonly fontSize: 14;
+        readonly gap: 3;
+        /** how far the pill hangs below the bubble, and how far it steps out sideways */
+        readonly overlap: 13;
+        readonly outset: 6;
+        /** the share of the accent mixed into the background of a pill that holds the person's own reaction */
+        readonly mineTint: 0.12;
+    };
+    /** the button that returns to the latest message */
+    readonly latestButton: {
+        readonly size: 36;
+        readonly right: 20;
+        readonly bottom: 12;
+        readonly awayBeyond: 320;
+    };
+};
+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' | 'ok' | 'danger';
+/** Which colour role paints what in a conversation. */
+export declare const CONVERSATION_COLORS: {
+    readonly userBubble: {
+        readonly background: "accent";
+        readonly text: "accentContrast";
+    };
+    readonly assistantBubble: {
+        readonly background: "surface";
+        readonly text: "text";
+    };
+    readonly system: {
+        readonly text: "muted";
+    };
+    readonly meta: {
+        readonly text: "muted";
+    };
+    readonly interrupted: {
+        readonly text: "warning";
+    };
+    readonly quote: {
+        readonly border: "accent";
+        readonly who: "accent";
+    };
+    readonly reactionPill: {
+        readonly background: "bg";
+        readonly border: "border";
+        readonly text: "text";
+        readonly mineBorder: "accent";
+    };
+    readonly latestButton: {
+        readonly background: "bg";
+        readonly border: "border";
+        readonly icon: "text";
+    };
+};
+/** The side a message sits on, and the corner its bubble tightens. */
+export declare function bubbleSide(role: 'user' | 'assistant' | 'system'): 'mine' | 'theirs' | 'system';
+/** The quick row of the reaction picker (UI-CONV-017): the first six, with their English names. */
+export declare const QUICK_REACTIONS: readonly [{
+    readonly e: "❤️";
+    readonly name: "heart";
+}, {
+    readonly e: "👍";
+    readonly name: "thumbs up";
+}, {
+    readonly e: "👎";
+    readonly name: "thumbs down";
+}, {
+    readonly e: "😂";
+    readonly name: "laughing";
+}, {
+    readonly e: "😮";
+    readonly name: "surprised";
+}, {
+    readonly e: "😢";
+    readonly name: "sad";
+}];
+/** Markdown markers stripped: for the clipboard and for the quote of a reply. */
+export declare function plainText(markdown: string): string;
+/** The longest quote a reply carries. */
+export declare const REPLY_QUOTE_LENGTH = 200;
+/** The quote a reply carries (PROF-RUN-009): the message as plain text, shortened. */
+export declare function replyQuoteOf(message: {
+    id: string;
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+}): {
+    id: string;
+    text: string;
+    role: 'user' | 'assistant';
+};
+/**
+ * The reactions of a message as its one pill shows them (UI-CONV-011): the person's own first, then the others in
+ * the order they came. `mine` is the person's emoji, when they reacted: the pill is then a control that changes it.
+ */
+export declare function reactionPillOf(reactions: readonly {
+    emoji: string;
+    by: string;
+}[] | undefined, me: string | undefined): {
+    emojis: {
+        emoji: string;
+        by: string;
+        own: boolean;
+    }[];
+    mine?: string;
+} | null;

package/dist/conversationDesign.js

@@ -0,0 +1,125 @@
+/**
+ * The design of a conversation, written once for the two renderers of the Ayni UI: the browser (CSS) and the Ayni
+ * app (React Native styles). The numbers are CSS pixels, which React Native reads as density-independent points.
+ *
+ * The browser's stylesheet is the reference: a test in this repository compares it with these values, so the two
+ * cannot drift apart. The app builds its styles from them. A change of the conversation's look starts here.
+ */
+export const CONVERSATION_DESIGN = {
+    transcript: { paddingTop: 16, paddingX: 20, paddingBottom: 20, gap: 18 },
+    bubble: {
+        /** a bubble never grows wider than this, nor than its row */
+        maxWidth: 640,
+        paddingTop: 9,
+        paddingX: 14,
+        paddingBottom: 8,
+        radius: 16,
+        /** the one tighter corner: bottom right on the person's messages, top left on the agent's */
+        tailRadius: 4,
+        /** between the quote, the body and the meta line */
+        gap: 4,
+        /** room for the reaction pill, which overlaps the bubble's bottom edge */
+        reactedPaddingBottom: 16,
+        reactedMarginBottom: 12,
+    },
+    /** a system line: centred, no bubble */
+    system: { fontSize: 13 },
+    /** the time and "interrupted", at the end of the bubble */
+    meta: { fontSize: 11, gap: 6, userTextOpacity: 0.78 },
+    /** the message a reply answers, at the top of the bubble */
+    quote: {
+        paddingY: 5,
+        paddingX: 10,
+        borderWidth: 3,
+        radius: 6,
+        fontSize: 13,
+        gap: 1,
+        marginBottom: 2,
+        whoWeight: 600,
+        textOpacity: 0.9,
+        /** the share of the text colour mixed into a transparent background */
+        tint: 0.07,
+        /** on the person's bubble: the share of the contrast colour in the background and in the border */
+        userTint: 0.16,
+        userBorderOpacity: 0.7,
+    },
+    /** the reactions of a message: one pill on the inner bottom corner, the same on both sides (UI-CONV-011) */
+    reactionPill: {
+        height: 26,
+        paddingX: 8,
+        radius: 13,
+        borderWidth: 1,
+        fontSize: 14,
+        gap: 3,
+        /** how far the pill hangs below the bubble, and how far it steps out sideways */
+        overlap: 13,
+        outset: 6,
+        /** the share of the accent mixed into the background of a pill that holds the person's own reaction */
+        mineTint: 0.12,
+    },
+    /** the button that returns to the latest message */
+    latestButton: { size: 36, right: 20, bottom: 12, awayBeyond: 320 },
+};
+/** Which colour role paints what in a conversation. */
+export const CONVERSATION_COLORS = {
+    userBubble: { background: 'accent', text: 'accentContrast' },
+    assistantBubble: { background: 'surface', text: 'text' },
+    system: { text: 'muted' },
+    meta: { text: 'muted' },
+    interrupted: { text: 'warning' },
+    quote: { border: 'accent', who: 'accent' },
+    reactionPill: { background: 'bg', border: 'border', text: 'text', mineBorder: 'accent' },
+    latestButton: { background: 'bg', border: 'border', icon: 'text' },
+};
+/** The side a message sits on, and the corner its bubble tightens. */
+export function bubbleSide(role) {
+    return role === 'user' ? 'mine' : role === 'assistant' ? 'theirs' : 'system';
+}
+/** The quick row of the reaction picker (UI-CONV-017): the first six, with their English names. */
+export const QUICK_REACTIONS = [
+    { e: '❤️', name: 'heart' },
+    { e: '👍', name: 'thumbs up' },
+    { e: '👎', name: 'thumbs down' },
+    { e: '😂', name: 'laughing' },
+    { e: '😮', name: 'surprised' },
+    { e: '😢', name: 'sad' },
+];
+/** Markdown markers stripped: for the clipboard and for the quote of a reply. */
+export function plainText(markdown) {
+    return markdown
+        .replace(/<\/?(u|b|i|em|strong|s)>/g, '')
+        .replace(/\*\*\*([^*]+)\*\*\*/g, '$1')
+        .replace(/\*\*([^*]+)\*\*/g, '$1')
+        .replace(/\*([^*\n]+)\*/g, '$1')
+        .replace(/~~([^~]+)~~/g, '$1')
+        .replace(/`([^`]+)`/g, '$1')
+        .replace(/\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g, '$1 ($2)')
+        .replace(/^#{1,6}\s+/gm, '')
+        .replace(/^>\s?/gm, '')
+        .replace(/^\s*([-*_])\s*\1\s*\1[\s\-*_]*$/gm, '')
+        .replace(/^[-*+]\s+/gm, '• ');
+}
+/** The longest quote a reply carries. */
+export const REPLY_QUOTE_LENGTH = 200;
+/** The quote a reply carries (PROF-RUN-009): the message as plain text, shortened. */
+export function replyQuoteOf(message) {
+    return {
+        id: message.id,
+        text: plainText(message.content).slice(0, REPLY_QUOTE_LENGTH),
+        role: message.role === 'user' ? 'user' : 'assistant',
+    };
+}
+/**
+ * The reactions of a message as its one pill shows them (UI-CONV-011): the person's own first, then the others in
+ * the order they came. `mine` is the person's emoji, when they reacted: the pill is then a control that changes it.
+ */
+export function reactionPillOf(reactions, me) {
+    if (!reactions?.length)
+        return null;
+    const own = reactions.find((r) => r.by === me);
+    const others = reactions.filter((r) => r.by !== me);
+    return {
+        emojis: [...(own ? [{ ...own, own: true }] : []), ...others.map((r) => ({ ...r, own: false }))],
+        mine: own?.emoji,
+    };
+}

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));
+}