@joinskips/brand 5.0.0 → 6.0.0-develop.126

package/README.md

@@ -13,4 +13,11 @@ import tokens from '@joinskips/brand/tokens/skips-design-tokens.json' with { typ
 @import '@joinskips/brand/fonts/onest/onest.css';
 ```
 
+A Tailwind 4 app imports the tokens as its theme. The colours sit under `@variant light` and `@variant dark`, the way
+Uniwind reads them.
+
+```css
+@import '@joinskips/brand/tokens/skips-tailwind-theme.css';
+```
+
 `manifest.json` lists every file with its hash and size. Onest's licence is `fonts/onest/OFL.txt`.

package/chat/attachments.d.ts

@@ -0,0 +1,11 @@
+export declare const ATTACHMENT_TYPES: string[];
+export declare const MAX_ATTACHMENT_BYTES: number;
+/** A picked file's type: the picker's own, else the one its name says, else none. */
+export declare function attachmentType(name: string, given?: string | null): string;
+/** What attachmentProblem reads of a picked file. */
+export interface FileFacts {
+    type: string;
+    size: number;
+}
+/** Why a picked file cannot be sent, or null when it can. */
+export declare function attachmentProblem(file: FileFacts): 'type' | 'size' | null;

package/chat/attachments.js

@@ -0,0 +1,34 @@
+export const ATTACHMENT_TYPES = [
+    'image/jpeg',
+    'image/png',
+    'image/gif',
+    'image/webp',
+    'image/heic',
+    'image/heif',
+    'application/pdf',
+];
+export const MAX_ATTACHMENT_BYTES = 40 * 1024 * 1024;
+// Pickers can leave the type out, so it comes from the name.
+const TYPE_BY_EXTENSION = new Map([
+    ['jpg', 'image/jpeg'],
+    ['jpeg', 'image/jpeg'],
+    ['png', 'image/png'],
+    ['gif', 'image/gif'],
+    ['webp', 'image/webp'],
+    ['heic', 'image/heic'],
+    ['heif', 'image/heif'],
+    ['pdf', 'application/pdf'],
+]);
+/** A picked file's type: the picker's own, else the one its name says, else none. */
+export function attachmentType(name, given) {
+    if (given)
+        return given;
+    const dot = name.lastIndexOf('.');
+    return dot === -1 ? '' : (TYPE_BY_EXTENSION.get(name.slice(dot + 1).toLowerCase()) ?? '');
+}
+/** Why a picked file cannot be sent, or null when it can. */
+export function attachmentProblem(file) {
+    if (!ATTACHMENT_TYPES.includes(file.type))
+        return 'type';
+    return file.size > MAX_ATTACHMENT_BYTES ? 'size' : null;
+}

package/chat/components/Bubble.d.ts

@@ -0,0 +1,5 @@
+export interface BubbleProps {
+    mine?: boolean;
+    text: string;
+}
+export declare function Bubble({ mine, text }: BubbleProps): import("react").JSX.Element;

package/chat/components/Bubble.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text, View } from 'react-native';
+import { Markdown } from "./Markdown.js";
+export function Bubble({ mine = false, text }) {
+    if (mine) {
+        return (_jsx(Text, { className: "rounded-[20px] rounded-br-[7px] bg-accent px-4 py-2.5 font-ui text-md text-accent-ink", children: text }));
+    }
+    return (_jsx(View, { className: "shrink rounded-[20px] rounded-bl-[7px] border border-line-subtle bg-surface px-4 py-2.5", children: _jsx(Markdown, { text: text }) }));
+}

package/chat/components/Conversation.d.ts

@@ -0,0 +1,28 @@
+import { type ImageSourcePropType } from 'react-native';
+import type { PickedFile } from '../message.ts';
+import { type Thread } from '../thread.ts';
+import { type ChatIcon, type ChatWords } from './parts.ts';
+export type LoadState = 'loading' | 'ready' | 'failed';
+export interface ConversationProps {
+    thread: Thread;
+    load: LoadState;
+    feedDown: boolean;
+    typists: string[];
+    skipUserId: number | null;
+    onSend: (text: string, file: PickedFile | null) => void;
+    onRetry: (id: number) => void;
+    onTyped: (text: string) => void;
+    onLoadOlder: () => void;
+    onReload: () => void;
+    pickFile?: () => Promise<PickedFile | null>;
+    initialText?: string;
+    keyboardOffset?: number;
+    bottomInset?: number;
+    words: ChatWords;
+    Icon: ChatIcon;
+    skipMark: ImageSourcePropType;
+}
+export declare const PHOTO_RETRIES = 5;
+export declare const PHOTO_RETRY_MS = 1500;
+/** One conversation: its messages oldest at the top, the care team's typing, and the box to write in. */
+export declare function Conversation(props: ConversationProps): import("react").JSX.Element;

package/chat/components/Conversation.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ActivityIndicator, FlatList, Image, KeyboardAvoidingView, Linking, Platform, Pressable, Text, TextInput, View, } from 'react-native';
+import { attachmentProblem } from "../attachments.js";
+import { groupThread } from "../thread.js";
+import { Bubble } from "./Bubble.js";
+import { useColor } from "./parts.js";
+// An image from require needs its size in style: the web draws it at its own size otherwise.
+const AVATAR_SIZE = 32;
+export const PHOTO_RETRIES = 5;
+export const PHOTO_RETRY_MS = 1_500;
+const MIN_BOTTOM_SPACE = 12;
+function Line({ className, ...props }) {
+    return _jsx(Text, { className: `font-ui ${className}`, ...props });
+}
+const isPhoto = (file) => file.type.startsWith('image/');
+/** One conversation: its messages oldest at the top, the care team's typing, and the box to write in. */
+export function Conversation(props) {
+    const { thread, load, feedDown, typists, words, onReload, onLoadOlder } = props;
+    const secondary = useColor('ink-secondary');
+    // The list is inverted so it rests at the newest message and stays put while the member reads older ones.
+    const items = groupThread(thread.messages, props.skipUserId).reverse();
+    return (_jsxs(KeyboardAvoidingView, { behavior: "padding", keyboardVerticalOffset: props.keyboardOffset ?? 0, className: "flex-1", children: [feedDown ? (_jsx(Line, { role: "status", className: "bg-muted px-gutter-phone py-2 text-center text-sm text-ink-secondary", children: words.feedDown })) : null, load === 'loading' ? (_jsx(ActivityIndicator, { accessibilityLabel: words.loading, className: "flex-1", color: secondary })) : load === 'failed' ? (_jsxs(View, { role: "alert", className: "flex-1 items-center justify-center gap-3 px-gutter-phone", children: [_jsx(Line, { className: "text-center text-base text-ink-secondary", children: words.loadFailed }), _jsx(Pressable, { role: "button", onPress: onReload, className: "h-control items-center justify-center rounded-pill border border-line-control px-6 active:opacity-80", children: _jsx(Line, { className: "text-md font-semibold text-ink", children: words.retry }) })] })) : (_jsx(FlatList, { inverted: true, data: items, keyExtractor: itemKey, onEndReached: onLoadOlder, contentContainerClassName: "gap-4 px-gutter-phone py-4 md:mx-auto md:w-full md:max-w-reading", ListHeaderComponent: typists.length ? _jsx(Line, { className: "text-sm text-ink-secondary", children: words.typingLine(typists) }) : undefined, renderItem: ({ item }) => _jsx(ThreadRow, { item: item, ...props }) })), _jsx(Composer, { ...props })] }));
+}
+function itemKey(item) {
+    if (item.kind === 'run')
+        return `r${String(item.messages[0]?.id)}`;
+    return `${item.kind === 'notice' ? 'n' : 'u'}${String(item.message.id)}`;
+}
+function Composer({ onSend, onTyped, pickFile, initialText, bottomInset, words, Icon }) {
+    const secondary = useColor('ink-secondary');
+    const placeholder = useColor('ink-placeholder');
+    const actionInk = useColor('action-ink');
+    const [text, setText] = useState(initialText ?? '');
+    const [picked, setPicked] = useState(null);
+    const [refused, setRefused] = useState(null);
+    const canSend = Boolean(text.trim() || picked);
+    const attach = async (pick) => {
+        const file = await pick();
+        if (!file)
+            return;
+        const problem = attachmentProblem(file);
+        setRefused(problem ? words.attachmentRefused[problem] : null);
+        if (!problem)
+            setPicked(file);
+    };
+    const submit = () => {
+        onSend(text, picked);
+        setText('');
+        setPicked(null);
+        setRefused(null);
+    };
+    return (_jsxs(View, { style: { paddingBottom: Math.max(bottomInset ?? 0, MIN_BOTTOM_SPACE) }, className: "gap-2 px-gutter-phone pt-2 md:mx-auto md:w-full md:max-w-reading", children: [refused ? (_jsx(Line, { role: "alert", className: "text-sm text-error-ink", children: refused })) : null, picked ? (_jsxs(View, { className: "flex-row items-center gap-3 self-start rounded-control border border-line-subtle bg-surface p-2 pr-3", children: [isPhoto(picked) ? (_jsx(Image, { source: { uri: picked.uri }, resizeMode: "cover", className: "h-10 w-10 rounded-control bg-muted" })) : (_jsx(View, { className: "h-10 w-10 items-center justify-center", children: _jsx(Icon, { name: "file", color: secondary, size: 20 }) })), _jsxs(View, { className: "max-w-56", children: [_jsx(Line, { className: "text-sm text-ink", numberOfLines: 1, children: picked.name }), _jsx(Line, { className: "text-xs text-ink-secondary", children: `${isPhoto(picked) ? words.photo : words.pdf} · ${words.fileSize(picked.size)}` })] }), _jsx(Pressable, { role: "button", accessibilityLabel: `${words.remove} ${picked.name}`, hitSlop: 8, onPress: () => {
+                            setPicked(null);
+                        }, children: _jsx(Icon, { name: "close", color: secondary, size: 18 }) })] })) : null, _jsxs(View, { className: "flex-row items-end gap-1 rounded-[24px] border border-line-subtle bg-surface p-1.5 shadow-card", children: [pickFile ? (_jsx(Pressable, { role: "button", accessibilityLabel: words.attach, onPress: () => void attach(pickFile), className: "h-[42px] w-[42px] items-center justify-center rounded-pill active:bg-muted", children: _jsx(Icon, { name: "attach", color: secondary, size: 18 }) })) : null, _jsx(TextInput, { value: text, onChangeText: (value) => {
+                            setText(value);
+                            onTyped(value);
+                        }, placeholder: words.composerPlaceholder, placeholderTextColor: placeholder, accessibilityLabel: words.composerPlaceholder, multiline: true, ...Platform.select({ web: { rows: 1 }, default: {} }), className: "max-h-40 flex-1 self-center px-1 py-2 font-ui text-md leading-6 text-ink" }), _jsx(Pressable, { role: "button", accessibilityLabel: words.send, disabled: !canSend, onPress: submit, className: `h-[42px] w-[42px] items-center justify-center rounded-pill bg-action active:bg-action-pressed ${canSend ? '' : 'opacity-40'}`, children: _jsx(View, { style: { transform: [{ rotate: '-90deg' }] }, children: _jsx(Icon, { name: "arrow-right", color: actionInk, size: 18 }) }) })] }), _jsx(Line, { className: "text-center text-xs text-ink-secondary", children: words.emergencyNote })] }));
+}
+function ThreadRow({ item, words, onRetry, ...props }) {
+    if (item.kind === 'notice') {
+        return (_jsx(Line, { className: "self-center rounded-control border border-line-subtle px-3 py-2 text-sm text-ink-secondary", children: item.message.text }));
+    }
+    if (item.kind === 'unsent')
+        return _jsx(Unsent, { message: item.message, words: words, onRetry: onRetry, Icon: props.Icon });
+    const { sender, messages } = item;
+    const mine = sender === 'mine';
+    const name = mine ? words.you : sender === 'skip' ? words.skip : sender.name;
+    // The run is in time order, so its time is its last line's.
+    const sentAt = Math.max(...messages.map((m) => m.sentAt));
+    return (_jsxs(View, { className: `max-w-[82%] gap-1 ${mine ? 'items-end self-end' : 'items-start self-start'}`, children: [messages.map((message, index) => (_jsxs(View, { className: "flex-row items-end gap-2", children: [mine ? null : index === messages.length - 1 ? (_jsx(SenderAvatar, { sender: sender, name: name, skipMark: props.skipMark })) : (_jsx(View, { className: "w-8" })), _jsxs(View, { className: `shrink gap-2 ${mine ? 'items-end' : 'items-start'}`, children: [message.attachments.map((attachment) => (_jsx(Attachment, { attachment: attachment, words: words, Icon: props.Icon }, attachment.url))), message.text ? _jsx(Bubble, { mine: mine, text: message.text }) : null] })] }, message.id))), _jsx(Line, { className: `px-1 text-xs text-ink-secondary ${mine ? '' : 'ml-10'}`, children: `${name} · ${words.messageTime(sentAt)}` })] }));
+}
+// A failed line is a button to send it again, and its note is announced.
+const BUTTON_ROLE = 'button';
+const ALERT_ROLE = 'alert';
+function Unsent({ message, words, onRetry, Icon, }) {
+    const failed = message.delivery === 'failed';
+    return (_jsxs(Pressable, { ...(failed ? { role: BUTTON_ROLE } : {}), disabled: !failed, onPress: () => {
+            onRetry(message.id);
+        }, className: `max-w-[82%] items-end gap-1 self-end ${failed ? '' : 'opacity-70'}`, children: [message.file ? _jsx(PickedPreview, { picked: message.file, words: words, Icon: Icon }) : null, message.text ? _jsx(Bubble, { mine: true, text: message.text }) : null, _jsx(Line, { ...(failed ? { role: ALERT_ROLE } : {}), className: `px-1 text-xs ${failed ? 'text-error-ink' : 'text-ink-secondary'}`, children: `${words.you} · ${failed ? words.notSent : words.sending}` })] }));
+}
+// Skip's mark, or a care team member's photo, or their initial when they have none or it does not load.
+function SenderAvatar({ sender, name, skipMark, }) {
+    const [failed, setFailed] = useState(false);
+    if (sender === 'skip') {
+        return (_jsx(Image, { source: skipMark, accessibilityElementsHidden: true, style: { width: AVATAR_SIZE, height: AVATAR_SIZE }, className: "rounded-control" }));
+    }
+    return (_jsx(View, { accessibilityElementsHidden: true, className: "h-8 w-8 items-center justify-center overflow-hidden rounded-pill bg-muted", children: sender.avatarUrl && !failed ? (_jsx(Image, { source: { uri: sender.avatarUrl }, onError: () => {
+                setFailed(true);
+            }, style: { width: AVATAR_SIZE, height: AVATAR_SIZE } })) : (_jsx(Line, { className: "text-sm font-semibold text-ink", children: name.trim().charAt(0).toUpperCase() })) }));
+}
+function FileCard({ name, detail, Icon }) {
+    const secondary = useColor('ink-secondary');
+    return (_jsxs(View, { className: "w-80 max-w-full flex-row items-center gap-3 rounded-control border border-line-subtle bg-surface p-3", children: [_jsx(Icon, { name: "file", color: secondary, size: 20 }), _jsxs(View, { className: "flex-1", children: [_jsx(Line, { className: "text-sm text-ink", numberOfLines: 1, children: name }), _jsx(Line, { className: "text-xs text-ink-secondary", children: detail })] })] }));
+}
+function PickedPreview({ picked, words, Icon }) {
+    if (isPhoto(picked)) {
+        return (_jsx(Image, { source: { uri: picked.uri }, accessibilityLabel: `${words.photo} ${picked.name}`, resizeMode: "cover", className: "h-48 w-48 rounded-control bg-muted" }));
+    }
+    return _jsx(FileCard, { name: picked.name, detail: `${words.pdf} · ${words.fileSize(picked.size)}`, Icon: Icon });
+}
+// A photo shows in the conversation and a PDF as its card. Either opens in full.
+function Attachment({ attachment, words, Icon, }) {
+    // The Skips App stores a photo a moment after its upload answers, so a fresh one loads again until it is there.
+    const [attempt, setAttempt] = useState(0);
+    const open = () => void Linking.openURL(attachment.url);
+    if (attachment.kind === 'file') {
+        return (_jsx(Pressable, { role: "link", onPress: open, className: "active:opacity-80", children: _jsx(FileCard, { name: attachment.name, detail: words.fileKind(attachment.name), Icon: Icon }) }));
+    }
+    return (_jsx(Pressable, { role: "link", accessibilityLabel: `${words.photo} ${attachment.name}`, onPress: open, className: "active:opacity-80", children: _jsx(Image, { source: { uri: attachment.thumbUrl ?? attachment.url }, 
+            // Past the last attempt the key stays the same, so the photo is not asked for again.
+            onError: () => {
+                setTimeout(() => {
+                    setAttempt((last) => Math.min(last + 1, PHOTO_RETRIES));
+                }, PHOTO_RETRY_MS);
+            }, resizeMode: "cover", className: "h-48 w-48 rounded-control bg-muted" }, attempt) }));
+}

package/chat/components/Markdown.d.ts

@@ -0,0 +1,4 @@
+export interface MarkdownProps {
+    text: string;
+}
+export declare function Markdown({ text }: MarkdownProps): import("react").JSX.Element;

package/chat/components/Markdown.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Linking, Text, View } from 'react-native';
+import { readMarkdown } from "../markdown.js";
+function Inlines({ nodes }) {
+    return nodes.map((node, i) => _jsx(InlineNode, { node: node }, `${String(i)}-${node.type}`));
+}
+function InlineNode({ node }) {
+    switch (node.type) {
+        case 'text':
+            return node.text;
+        case 'break':
+            return '\n';
+        case 'code':
+            return _jsx(Text, { className: "bg-muted font-mono text-sm", children: node.text });
+        case 'strong':
+            return (_jsx(Text, { className: "font-semibold", children: _jsx(Inlines, { nodes: node.children }) }));
+        case 'em':
+            return (_jsx(Text, { className: "italic", children: _jsx(Inlines, { nodes: node.children }) }));
+        case 'del':
+            return (_jsx(Text, { className: "line-through", children: _jsx(Inlines, { nodes: node.children }) }));
+        case 'link':
+            return (_jsx(Text, { role: "link", className: "underline", onPress: () => {
+                    void Linking.openURL(node.href);
+                }, children: _jsx(Inlines, { nodes: node.children }) }));
+    }
+}
+function Blocks({ blocks }) {
+    return blocks.map((block, i) => _jsx(BlockNode, { block: block }, `${String(i)}-${block.type}`));
+}
+function BlockNode({ block }) {
+    switch (block.type) {
+        case 'paragraph':
+            return (_jsx(Text, { className: "font-ui text-md text-ink", children: _jsx(Inlines, { nodes: block.children }) }));
+        case 'list':
+            return (_jsx(View, { role: "list", className: "gap-1", children: block.items.map((item, i) => (_jsxs(View, { role: "listitem", className: "flex-row gap-2", children: [_jsx(Text, { className: "font-ui text-md text-ink", children: block.ordered ? `${String(block.start + i)}.` : '•' }), _jsx(View, { className: "shrink gap-1", children: _jsx(Blocks, { blocks: item }) })] }, String(i)))) }));
+        case 'quote':
+            return (_jsx(View, { className: "gap-1 border-l-2 border-line-control pl-3", children: _jsx(Blocks, { blocks: block.children }) }));
+        case 'code':
+            return _jsx(Text, { className: "bg-muted p-2 font-mono text-sm text-ink", children: block.text });
+        case 'rule':
+            return _jsx(View, { className: "h-px bg-line-control" });
+    }
+}
+export function Markdown({ text }) {
+    return (_jsx(View, { className: "gap-2", children: _jsx(Blocks, { blocks: readMarkdown(text) }) }));
+}

package/chat/components/Welcome.d.ts

@@ -0,0 +1,78 @@
+import { type ImageSourcePropType } from 'react-native';
+import type { ChoiceItem } from '../message.ts';
+/** Every word the website's welcome shows, which the website passes in. */
+export interface WelcomeWords {
+    logIn: string;
+    continueHere: string;
+    choiceNotSent: string;
+    emailLabel: string;
+    emailSubmit: string;
+    emailError: string;
+    changeEmail: string;
+    nameLabel: string;
+    nameSubmit: string;
+    nameError: string;
+    codeLabel: string;
+    codeSubmit: string;
+    resend: string;
+    resendWait: string;
+    codeNoMatch: string;
+    codeRanOut: string;
+    typing: string;
+}
+export interface WelcomeChoiceProps {
+    words: WelcomeWords;
+    onLogIn: () => void;
+    onContinueHere: () => void;
+}
+/** The choice under Skip's welcome: log in as a member, or go on here as someone new. */
+export declare function WelcomeChoice({ words, onLogIn, onContinueHere, }: WelcomeChoiceProps): import("react").JSX.Element;
+export interface ChoicesProps {
+    items: ChoiceItem[];
+    question: string;
+    sending: string | null;
+    holding?: boolean;
+    failed: boolean;
+    words: WelcomeWords;
+    onChoose: (answer: ChoiceItem) => void;
+}
+/** The answers to Skip's question, all drawn alike. One answer only: while one is on its way, none can be pressed. */
+export declare function Choices({ items, question, sending, holding, failed, words, onChoose, }: ChoicesProps): import("react").JSX.Element;
+export interface EmailStepProps {
+    words: WelcomeWords;
+    onSubmit: (email: string) => void;
+    initial?: string;
+}
+/** The email asked for after Continue here, and again for a visitor changing it. */
+export declare function EmailStep({ words, onSubmit, initial, }: EmailStepProps): import("react").JSX.Element;
+export interface NameStepProps {
+    words: WelcomeWords;
+    onSubmit: (name: string) => void;
+    onChangeEmail: () => void;
+}
+/** The name asked of a visitor the Skips App does not know, with the way back to change a mistyped email. */
+export declare function NameStep({ words, onSubmit, onChangeEmail, }: NameStepProps): import("react").JSX.Element;
+/**
+ * The code emailed to the visitor, one digit to a box over one real field, so typing, deleting, a paste and the
+ * phone's own code suggestion work as in any field. The chat mounts it afresh for each code that goes out.
+ */
+export interface CodeStepProps {
+    words: WelcomeWords;
+    length: number;
+    noMatch: boolean;
+    ranOut: boolean;
+    resendAfterMs?: number;
+    onSubmit: (code: string) => void;
+    onResend: () => void;
+    onChangeEmail: () => void;
+}
+export declare function CodeStep({ words, length, noMatch, ranOut, resendAfterMs, onSubmit, onResend, onChangeEmail, }: CodeStepProps): import("react").JSX.Element;
+export declare const DOT_REST_OPACITY = 0.35;
+export declare const DOT_RISE = 3;
+export declare const DOT_STILL_OPACITY = 0.6;
+/** Skip writing a reply: three dots rising in turn in Skip's bubble beside Skip's mark, announced as a status. */
+export interface SkipTypingProps {
+    label: string;
+    skipMark: ImageSourcePropType;
+}
+export declare function SkipTyping({ label, skipMark }: SkipTypingProps): import("react").JSX.Element;

package/chat/components/Welcome.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useState } from 'react';
+import { AccessibilityInfo, ActivityIndicator, Animated, Image, Pressable, Text, TextInput, View } from 'react-native';
+import { DOT_CYCLE_MS } from "../skipTyping.js";
+import { codeDigits, completesCode, EMAIL_MAX_LENGTH, givenEmail, givenName, NAME_MAX_LENGTH, RESEND_AFTER_MS, resendClock, } from "../welcome.js";
+import { useColor } from "./parts.js";
+const PILL_LOOK = {
+    solid: { box: 'bg-action active:bg-action-pressed', text: 'text-action-ink' },
+    stroked: { box: 'border border-line-control active:bg-muted', text: 'text-ink' },
+    flat: { box: 'active:bg-muted', text: 'text-ink' },
+};
+function Pill({ label, look = 'solid', disabled = false, loading = false, onPress, }) {
+    const ink = useColor(look === 'solid' ? 'action-ink' : 'ink');
+    return (_jsxs(Pressable, { role: "button", accessibilityLabel: label, disabled: disabled || loading, "aria-busy": loading, onPress: onPress, className: `h-control-compact flex-row items-center justify-center gap-2 rounded-pill px-5 ${PILL_LOOK[look].box} ${disabled ? 'opacity-40' : ''}`, children: [loading ? _jsx(ActivityIndicator, { "aria-hidden": true, size: "small", color: ink }) : null, _jsx(Text, { className: `font-ui text-sm font-semibold ${PILL_LOOK[look].text}`, children: label })] }));
+}
+/** The choice under Skip's welcome: log in as a member, or go on here as someone new. */
+export function WelcomeChoice({ words, onLogIn, onContinueHere, }) {
+    return (_jsxs(View, { className: "flex-row flex-wrap items-center justify-center gap-2 self-stretch py-1", children: [_jsx(Pill, { label: words.logIn, look: "stroked", onPress: onLogIn }), _jsx(Pill, { label: words.continueHere, onPress: onContinueHere })] }));
+}
+/** The answers to Skip's question, all drawn alike. One answer only: while one is on its way, none can be pressed. */
+export function Choices({ items, question, sending, holding = false, failed, words, onChoose, }) {
+    return (_jsxs(View, { className: "items-center gap-1 self-stretch py-1", children: [_jsx(View, { role: "group", accessibilityLabel: question, className: "flex-row flex-wrap items-center justify-center gap-2", children: items.map((item) => (_jsx(Pill, { label: item.title, look: "stroked", disabled: holding || sending !== null, loading: sending === item.value, onPress: () => {
+                        onChoose(item);
+                    } }, item.value))) }), failed ? (_jsx(Text, { role: "alert", className: "font-ui text-sm text-error-ink", children: words.choiceNotSent })) : null] }));
+}
+// The error under a field, as the field's description. React Native's types leave aria-describedby out, and
+// react-native-web reads it.
+function describedBy(errorId) {
+    return errorId === undefined ? {} : { 'aria-describedby': errorId };
+}
+// One thing asked of a new visitor: a field in focus and its button. What is typed is checked here and handed on.
+function StepField({ label, error, submitLabel, input, usable, onSubmit, initial = '', aside }) {
+    const [typed, setTyped] = useState(initial);
+    const [refused, setRefused] = useState(false);
+    const errorId = useId();
+    const placeholder = useColor('ink-placeholder');
+    const submit = () => {
+        const value = usable(typed);
+        setRefused(value === null);
+        if (value !== null)
+            onSubmit(value);
+    };
+    return (_jsxs(View, { className: "w-full max-w-[360px] gap-2 self-center", children: [aside ? (_jsx(View, { className: "self-center", children: _jsx(Pill, { label: aside.label, look: "flat", onPress: aside.onPress }) })) : null, _jsx(Text, { className: "font-ui text-sm font-medium text-ink", children: label }), _jsx(TextInput, { autoFocus: true, value: typed, onChangeText: setTyped, onSubmitEditing: submit, accessibilityLabel: label, "aria-invalid": refused, ...describedBy(refused ? errorId : undefined), placeholderTextColor: placeholder, className: `h-control rounded-control border bg-surface px-3 font-ui text-md text-ink ${refused ? 'border-error-ink' : 'border-line-control'}`, ...input }), refused ? (_jsx(Text, { nativeID: errorId, role: "alert", className: "font-ui text-sm text-error-ink", children: error })) : null, _jsx(View, { className: "self-center", children: _jsx(Pill, { label: submitLabel, onPress: submit }) })] }));
+}
+/** The email asked for after Continue here, and again for a visitor changing it. */
+export function EmailStep({ words, onSubmit, initial, }) {
+    return (_jsx(StepField, { label: words.emailLabel, error: words.emailError, submitLabel: words.emailSubmit, input: { autoComplete: 'email', inputMode: 'email', maxLength: EMAIL_MAX_LENGTH, autoCapitalize: 'none' }, usable: givenEmail, onSubmit: onSubmit, ...(initial === undefined ? {} : { initial }) }));
+}
+/** The name asked of a visitor the Skips App does not know, with the way back to change a mistyped email. */
+export function NameStep({ words, onSubmit, onChangeEmail, }) {
+    return (_jsx(StepField, { label: words.nameLabel, error: words.nameError, submitLabel: words.nameSubmit, input: { autoComplete: 'name', maxLength: NAME_MAX_LENGTH, autoCapitalize: 'words' }, usable: givenName, onSubmit: onSubmit, aside: { label: words.changeEmail, onPress: onChangeEmail } }));
+}
+const TICK_MS = 250;
+function NewCode({ waitMs, words, onResend }) {
+    const [secondsLeft, setSecondsLeft] = useState(Math.ceil(waitMs / 1000));
+    useEffect(() => {
+        const end = Date.now() + waitMs;
+        const timer = setInterval(() => {
+            const left = Math.max(0, Math.ceil((end - Date.now()) / 1000));
+            setSecondsLeft(left);
+            if (left === 0)
+                clearInterval(timer);
+        }, TICK_MS);
+        return () => {
+            clearInterval(timer);
+        };
+    }, [waitMs]);
+    return (_jsxs(_Fragment, { children: [_jsx(Pill, { label: words.resend, look: "flat", disabled: secondsLeft > 0, onPress: onResend }), secondsLeft > 0 ? (_jsx(Text, { role: "timer", accessibilityLabel: words.resendWait, className: "font-ui text-sm text-ink-secondary", children: resendClock(secondsLeft) })) : null] }));
+}
+export function CodeStep({ words, length, noMatch, ranOut, resendAfterMs = RESEND_AFTER_MS, onSubmit, onResend, onChangeEmail, }) {
+    const [code, setCode] = useState('');
+    const [focused, setFocused] = useState(false);
+    const errorId = useId();
+    const error = ranOut ? words.codeRanOut : noMatch ? words.codeNoMatch : null;
+    // The box the next digit goes in, or the last once the code is whole.
+    const nextBox = Math.min(code.length, length - 1);
+    return (_jsxs(View, { className: "w-full max-w-[360px] items-center gap-3 self-center", children: [_jsx(Text, { className: "font-ui text-sm font-medium text-ink", children: words.codeLabel }), _jsxs(View, { className: "relative", children: [_jsx(View, { "aria-hidden": true, className: "flex-row gap-2", children: Array.from({ length }, (_, box) => (_jsx(View, { className: `h-control w-11 items-center justify-center rounded-control border ${focused && box === nextBox ? 'border-focus' : error ? 'border-error-ink' : 'border-line-control'}`, children: _jsx(Text, { className: "font-ui text-xl font-medium text-ink", children: code[box] ?? '' }) }, box))) }), _jsx(TextInput, { autoFocus: true, value: code, onChangeText: (typed) => {
+                            const digits = codeDigits(typed, length);
+                            setCode(digits);
+                            if (completesCode(digits, code, length))
+                                onSubmit(digits);
+                        }, onFocus: () => {
+                            setFocused(true);
+                        }, onBlur: () => {
+                            setFocused(false);
+                        }, accessibilityLabel: words.codeLabel, "aria-invalid": error !== null, ...describedBy(error === null ? undefined : errorId), inputMode: "numeric", autoComplete: "one-time-code", textContentType: "oneTimeCode", caretHidden: true, 
+                        // Unseen, not just clear: the boxes draw the digits and the focus, and a checker would read clear text as
+                        // text with no contrast.
+                        className: "absolute inset-0 opacity-0" })] }), error ? (_jsx(Text, { nativeID: errorId, role: "alert", className: "text-center font-ui text-sm text-error-ink", children: error })) : null, _jsxs(View, { className: "flex-row flex-wrap items-center justify-center gap-2", children: [_jsx(Pill, { label: words.changeEmail, look: "flat", onPress: onChangeEmail }), _jsx(NewCode, { waitMs: resendAfterMs, words: words, onResend: onResend }), _jsx(Pill, { label: words.codeSubmit, disabled: code.length < length, onPress: () => {
+                            onSubmit(code);
+                        } })] })] }));
+}
+const DOTS = [0, 1, 2];
+const DOT_SIZE = 6;
+// A dot at rest is faint, rises this far at the top of its turn, and holds at the still strength for a visitor who
+// asks for less motion.
+export const DOT_REST_OPACITY = 0.35;
+export const DOT_RISE = 3;
+export const DOT_STILL_OPACITY = 0.6;
+// Null until the device has answered, so the dots never start before a visitor who wants them still is known.
+function useReducedMotion() {
+    const [reduced, setReduced] = useState(null);
+    useEffect(() => {
+        void (async () => {
+            setReduced(await AccessibilityInfo.isReduceMotionEnabled());
+        })();
+        const change = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduced);
+        return () => {
+            change.remove();
+        };
+    }, []);
+    return reduced;
+}
+export function SkipTyping({ label, skipMark }) {
+    const dotColor = useColor('ink-secondary');
+    const reduced = useReducedMotion();
+    const still = reduced === true;
+    // Made once and kept, so render reads no ref.
+    const [rise] = useState(() => DOTS.map(() => new Animated.Value(0)));
+    useEffect(() => {
+        if (reduced !== false)
+            return undefined;
+        const step = DOT_CYCLE_MS / (2 * DOTS.length);
+        const loop = Animated.loop(Animated.stagger(step, rise.map((value) => Animated.sequence([
+            Animated.timing(value, { toValue: 1, duration: step, useNativeDriver: true }),
+            Animated.timing(value, { toValue: 0, duration: step, useNativeDriver: true }),
+        ]))));
+        loop.start();
+        return () => {
+            loop.stop();
+        };
+    }, [rise, reduced]);
+    return (_jsxs(View, { className: "mt-3 flex-row items-end gap-2", children: [_jsx(Image, { source: skipMark, "aria-hidden": true, style: { width: 32, height: 32 }, className: "rounded-control" }), _jsx(View, { role: "status", accessibilityLabel: label, className: "flex-row items-center gap-1 rounded-[20px] rounded-bl-[7px] border border-line-subtle bg-surface px-4 py-4", children: rise.map((value, dot) => (_jsx(Animated.View, { style: {
+                        width: DOT_SIZE,
+                        height: DOT_SIZE,
+                        borderRadius: DOT_SIZE / 2,
+                        backgroundColor: dotColor,
+                        ...(still
+                            ? { opacity: DOT_STILL_OPACITY }
+                            : {
+                                opacity: value.interpolate({ inputRange: [0, 1], outputRange: [DOT_REST_OPACITY, 1] }),
+                                transform: [{ translateY: value.interpolate({ inputRange: [0, 1], outputRange: [0, -DOT_RISE] }) }],
+                            }),
+                    } }, DOTS[dot]))) })] }));
+}

package/chat/components/parts.d.ts

@@ -0,0 +1,38 @@
+import type { ComponentType } from 'react';
+/** The icons the chat draws, from the brand's interface icons, which each app already draws. */
+export type ChatIconName = 'attach' | 'arrow-right' | 'file' | 'close';
+export interface ChatIconProps {
+    name: ChatIconName;
+    color: string;
+    size: number;
+}
+export type ChatIcon = ComponentType<ChatIconProps>;
+/** The two reasons an attachment is refused, in the chat's words. */
+export interface AttachmentRefusedWords {
+    type: string;
+    size: string;
+}
+/** Every word the chat shows, which each app passes in. */
+export interface ChatWords {
+    composerPlaceholder: string;
+    send: string;
+    attach: string;
+    remove: string;
+    photo: string;
+    pdf: string;
+    sending: string;
+    notSent: string;
+    retry: string;
+    you: string;
+    skip: string;
+    emergencyNote: string;
+    feedDown: string;
+    loading: string;
+    loadFailed: string;
+    attachmentRefused: AttachmentRefusedWords;
+    fileKind: (name: string) => string;
+    fileSize: (bytes: number) => string;
+    messageTime: (ms: number) => string;
+    typingLine: (names: string[]) => string;
+}
+export declare function useColor(token: string): string;

package/chat/components/parts.js

@@ -0,0 +1,6 @@
+import { useCSSVariable } from 'uniwind';
+// A colour token for props a class cannot reach, such as an icon's colour.
+export function useColor(token) {
+    const value = useCSSVariable(`--color-${token}`);
+    return value === undefined ? '' : String(value);
+}

package/chat/index.d.ts

@@ -0,0 +1,10 @@
+export { Conversation, type ConversationProps, type LoadState } from './components/Conversation.tsx';
+export type { ChatIcon, ChatIconName, ChatWords } from './components/parts.ts';
+export { ATTACHMENT_TYPES, MAX_ATTACHMENT_BYTES, attachmentProblem, attachmentType } from './attachments.ts';
+export { isSkip, type ChatAttachment, type ChatAuthor, type ChatMessage, type ChoiceItem, type MessageChoice, type PickedFile, } from './message.ts';
+export { CLUSTER_GAP_MS, EMPTY_THREAD, groupThread, pendingId, withFailed, withoutMessage, withPending, withReceived, withReceivedAll, withSent, type Delivery, type RunSender, type Thread, type ThreadItem, type ThreadMessage, } from './thread.ts';
+export { TYPING_CLEAR_MS, TYPING_IDLE_MS, createTypingSignal, createTypingWatch } from './typing.ts';
+export { TYPING_IDLE, TYPING_TIMES, heldFrom, typingReducer, type TypingEvent, type TypingSignal, type TypingStarted, type TypingState, type TypingTimes, } from './skipTyping.ts';
+export { fitVisibleArea, type Fit, type VisualViewportBox } from './visibleArea.ts';
+export { EMAIL_MAX_LENGTH, NAME_MAX_LENGTH, RESEND_AFTER_MS, WELCOME_TYPING_TIMES, givenEmail, givenName, isEmail, isName, typesBefore, typingMs, type WelcomeStep, type WelcomeTypingTimes, } from './welcome.ts';
+export { Choices, CodeStep, EmailStep, NameStep, SkipTyping, WelcomeChoice, type WelcomeWords, } from './components/Welcome.tsx';

package/chat/index.js

@@ -0,0 +1,9 @@
+export { Conversation } from "./components/Conversation.js";
+export { ATTACHMENT_TYPES, MAX_ATTACHMENT_BYTES, attachmentProblem, attachmentType } from "./attachments.js";
+export { isSkip, } from "./message.js";
+export { CLUSTER_GAP_MS, EMPTY_THREAD, groupThread, pendingId, withFailed, withoutMessage, withPending, withReceived, withReceivedAll, withSent, } from "./thread.js";
+export { TYPING_CLEAR_MS, TYPING_IDLE_MS, createTypingSignal, createTypingWatch } from "./typing.js";
+export { TYPING_IDLE, TYPING_TIMES, heldFrom, typingReducer, } from "./skipTyping.js";
+export { fitVisibleArea } from "./visibleArea.js";
+export { EMAIL_MAX_LENGTH, NAME_MAX_LENGTH, RESEND_AFTER_MS, WELCOME_TYPING_TIMES, givenEmail, givenName, isEmail, isName, typesBefore, typingMs, } from "./welcome.js";
+export { Choices, CodeStep, EmailStep, NameStep, SkipTyping, WelcomeChoice, } from "./components/Welcome.js";

package/chat/markdown.d.ts

@@ -0,0 +1,47 @@
+import type { Token } from 'markdown-it';
+export interface TextInline {
+    type: 'text';
+    text: string;
+}
+export interface BreakInline {
+    type: 'break';
+}
+export interface CodeInline {
+    type: 'code';
+    text: string;
+}
+export interface MarkInline {
+    type: 'strong' | 'em' | 'del';
+    children: Inline[];
+}
+export interface LinkInline {
+    type: 'link';
+    href: string;
+    children: Inline[];
+}
+export type Inline = TextInline | BreakInline | CodeInline | MarkInline | LinkInline;
+export interface ParagraphBlock {
+    type: 'paragraph';
+    children: Inline[];
+}
+export interface ListBlock {
+    type: 'list';
+    ordered: boolean;
+    start: number;
+    items: Block[][];
+}
+export interface QuoteBlock {
+    type: 'quote';
+    children: Block[];
+}
+export interface CodeBlock {
+    type: 'code';
+    text: string;
+}
+export interface RuleBlock {
+    type: 'rule';
+}
+export type Block = ParagraphBlock | ListBlock | QuoteBlock | CodeBlock | RuleBlock;
+export declare const LINK_PROTOCOLS: readonly string[];
+export declare function inlinesOf(token: Token): Inline[];
+export declare function readMarkdown(source: string): Block[];