@joinskips/brand 6.0.0 → 7.0.0-develop.132

package/chat/attachments.d.ts

@@ -2,8 +2,10 @@ 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;
-/** Why a picked file cannot be sent, or null when it can. */
-export declare function attachmentProblem(file: {
+/** What attachmentProblem reads of a picked file. */
+export interface FileFacts {
     type: string;
     size: number;
-}): 'type' | 'size' | null;
+}
+/** Why a picked file cannot be sent, or null when it can. */
+export declare function attachmentProblem(file: FileFacts): 'type' | 'size' | null;

package/chat/components/Bubble.d.ts

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

package/chat/components/Bubble.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Text, View } from 'react-native';
 import { Markdown } from "./Markdown.js";
-// The member's line in the accent and exactly as typed, Skips' on a card with its Markdown drawn, each with its
-// tail corner tighter.
 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 }));

package/chat/components/Conversation.js

@@ -10,7 +10,6 @@ const AVATAR_SIZE = 32;
 export const PHOTO_RETRIES = 5;
 export const PHOTO_RETRY_MS = 1_500;
 const MIN_BOTTOM_SPACE = 12;
-// React Native text inherits no font from the screen, so each line carries it.
 function Line({ className, ...props }) {
     return _jsx(Text, { className: `font-ui ${className}`, ...props });
 }
@@ -71,11 +70,14 @@ function ThreadRow({ item, words, onRetry, ...props }) {
     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' } : {}), disabled: !failed, onPress: () => {
+    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' } : {}), className: `px-1 text-xs ${failed ? 'text-error-ink' : 'text-ink-secondary'}`, children: `${words.you} · ${failed ? words.notSent : words.sending}` })] }));
+        }, 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, }) {
@@ -87,12 +89,10 @@ function SenderAvatar({ sender, name, skipMark, }) {
                 setFailed(true);
             }, style: { width: AVATAR_SIZE, height: AVATAR_SIZE } })) : (_jsx(Line, { className: "text-sm font-semibold text-ink", children: name.trim().charAt(0).toUpperCase() })) }));
 }
-// Brand's attachment card, with what kind of file it is under the name.
 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 })] })] }));
 }
-// A picked file on its way: the photo itself, or a PDF's card with its size.
 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" }));

package/chat/components/Markdown.d.ts

@@ -1,3 +1,10 @@
-export declare function Markdown({ text }: {
+interface NewTab {
+    target: string;
+    rel: string;
+}
+export declare const NEW_TAB: NewTab;
+export interface MarkdownProps {
     text: string;
-}): import("react").JSX.Element;
+}
+export declare function Markdown({ text }: MarkdownProps): import("react").JSX.Element;
+export {};

package/chat/components/Markdown.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Linking, Text, View } from 'react-native';
+import { Linking, Platform, Text, View } from 'react-native';
 import { readMarkdown } from "../markdown.js";
-// A line from Skips as the care team wrote it: its Markdown drawn as text, with no HTML taken from it.
+// On the web a link opens in a new tab, as the website's own links do, telling the other site nothing.
+export const NEW_TAB = { target: '_blank', rel: 'noopener noreferrer nofollow' };
 function Inlines({ nodes }) {
     return nodes.map((node, i) => _jsx(InlineNode, { node: node }, `${String(i)}-${node.type}`));
 }
@@ -20,9 +21,10 @@ function InlineNode({ node }) {
         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 }) }));
+            return (_jsx(Text, { role: "link", className: "underline", ...Platform.select({
+                    web: { href: node.href, hrefAttrs: NEW_TAB },
+                    default: { onPress: Linking.openURL.bind(Linking, node.href) },
+                }), children: _jsx(Inlines, { nodes: node.children }) }));
     }
 }
 function Blocks({ blocks }) {

package/chat/components/Welcome.d.ts

@@ -20,14 +20,14 @@ export interface WelcomeWords {
     codeRanOut: string;
     typing: string;
 }
-/** 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, }: {
+export interface WelcomeChoiceProps {
     words: WelcomeWords;
     onLogIn: () => void;
     onContinueHere: () => void;
-}): import("react").JSX.Element;
-/** 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, }: {
+}
+/** 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;
@@ -35,24 +35,28 @@ export declare function Choices({ items, question, sending, holding, failed, wor
     failed: boolean;
     words: WelcomeWords;
     onChoose: (answer: ChoiceItem) => void;
-}): import("react").JSX.Element;
-/** The email asked for after Continue here, and again for a visitor changing it. */
-export declare function EmailStep({ words, onSubmit, initial, }: {
+}
+/** 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;
-}): import("react").JSX.Element;
-/** 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, }: {
+}
+/** 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;
-}): import("react").JSX.Element;
+}
+/** 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 declare function CodeStep({ words, length, noMatch, ranOut, resendAfterMs, onSubmit, onResend, onChangeEmail, }: {
+export interface CodeStepProps {
     words: WelcomeWords;
     length: number;
     noMatch: boolean;
@@ -61,12 +65,14 @@ export declare function CodeStep({ words, length, noMatch, ranOut, resendAfterMs
     onSubmit: (code: string) => void;
     onResend: () => void;
     onChangeEmail: () => void;
-}): import("react").JSX.Element;
+}
+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 declare function SkipTyping({ label, skipMark }: {
+export interface SkipTypingProps {
     label: string;
     skipMark: ImageSourcePropType;
-}): import("react").JSX.Element;
+}
+export declare function SkipTyping({ label, skipMark }: SkipTypingProps): import("react").JSX.Element;

package/chat/components/Welcome.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+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";
@@ -23,10 +23,16 @@ export function Choices({ items, question, sending, holding = false, failed, wor
                         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);
@@ -34,7 +40,7 @@ function StepField({ label, error, submitLabel, input, usable, onSubmit, initial
         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, 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, { 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 }) })] }));
+    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, }) {
@@ -45,7 +51,6 @@ 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;
-// Send new code, held back until the wait is over, and the wait beside it.
 function NewCode({ waitMs, words, onResend }) {
     const [secondsLeft, setSecondsLeft] = useState(Math.ceil(waitMs / 1000));
     useEffect(() => {
@@ -62,19 +67,26 @@ function NewCode({ waitMs, words, onResend }) {
     }, [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] }));
 }
-/**
- * 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 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;
-    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 ${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) => {
+    // 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);
-                        }, accessibilityLabel: words.codeLabel, "aria-invalid": error !== null, inputMode: "numeric", autoComplete: "one-time-code", textContentType: "oneTimeCode", caretHidden: true, className: "absolute inset-0 rounded-control text-transparent" })] }), error ? (_jsx(Text, { 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: () => {
+                        }, 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);
                         } })] })] }));
 }
@@ -89,7 +101,9 @@ export const DOT_STILL_OPACITY = 0.6;
 function useReducedMotion() {
     const [reduced, setReduced] = useState(null);
     useEffect(() => {
-        void AccessibilityInfo.isReduceMotionEnabled().then(setReduced);
+        void (async () => {
+            setReduced(await AccessibilityInfo.isReduceMotionEnabled());
+        })();
         const change = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduced);
         return () => {
             change.remove();
@@ -97,12 +111,12 @@ function useReducedMotion() {
     }, []);
     return reduced;
 }
-/** Skip writing a reply: three dots rising in turn in Skip's bubble beside Skip's mark, announced as a status. */
 export function SkipTyping({ label, skipMark }) {
     const dotColor = useColor('ink-secondary');
     const reduced = useReducedMotion();
     const still = reduced === true;
-    const rise = useRef(DOTS.map(() => new Animated.Value(0))).current;
+    // Made once and kept, so render reads no ref.
+    const [rise] = useState(() => DOTS.map(() => new Animated.Value(0)));
     useEffect(() => {
         if (reduced !== false)
             return undefined;

package/chat/components/parts.d.ts

@@ -1,11 +1,17 @@
 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 type ChatIcon = ComponentType<{
+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;
@@ -23,10 +29,7 @@ export interface ChatWords {
     feedDown: string;
     loading: string;
     loadFailed: string;
-    attachmentRefused: {
-        type: string;
-        size: string;
-    };
+    attachmentRefused: AttachmentRefusedWords;
     fileKind: (name: string) => string;
     fileSize: (bytes: number) => string;
     messageTime: (ms: number) => string;

package/chat/index.d.ts

@@ -1,4 +1,5 @@
 export { Conversation, type ConversationProps, type LoadState } from './components/Conversation.tsx';
+export { Bubble, type BubbleProps } from './components/Bubble.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';

package/chat/index.js

@@ -1,4 +1,5 @@
 export { Conversation } from "./components/Conversation.js";
+export { Bubble } from "./components/Bubble.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";

package/chat/thread.d.ts

@@ -25,16 +25,19 @@ export declare function withReceivedAll(thread: Thread, messages: ChatMessage[])
 export declare const CLUSTER_GAP_MS = 120000;
 /** Who a run is from: the member, Skip, or a person on the care team. */
 export type RunSender = 'mine' | 'skip' | ChatAuthor;
-export type ThreadItem = {
+export interface NoticeItem {
     kind: 'notice';
     message: ThreadMessage;
-} | {
+}
+export interface UnsentItem {
     kind: 'unsent';
     message: ThreadMessage;
-} | {
+}
+export interface RunItem {
     kind: 'run';
     sender: RunSender;
     messages: ThreadMessage[];
-};
+}
+export type ThreadItem = NoticeItem | UnsentItem | RunItem;
 /** Notices and the member's unsent lines on their own, every other line in runs by sender, in order. */
 export declare function groupThread(messages: ThreadMessage[], skipUserId: number | null): ThreadItem[];

package/chat/typing.js

@@ -15,8 +15,10 @@ export function createTypingSignal(send) {
     };
     return {
         typed(text) {
-            if (!text.trim())
-                return stop();
+            if (!text.trim()) {
+                stop();
+                return;
+            }
             if (!typing)
                 send((typing = true));
             if (idle)
@@ -29,7 +31,9 @@ export function createTypingSignal(send) {
 /** Who on the care team is typing, each cleared after TYPING_CLEAR_MS without news. */
 export function createTypingWatch(onChange) {
     const timers = new Map();
-    const publish = () => onChange([...timers.keys()]);
+    const publish = () => {
+        onChange([...timers.keys()]);
+    };
     const clear = (name) => {
         const timer = timers.get(name);
         if (!timer)
@@ -40,12 +44,16 @@ export function createTypingWatch(onChange) {
     };
     return {
         update(name, typing) {
-            if (!typing)
-                return clear(name);
+            if (!typing) {
+                clear(name);
+                return;
+            }
             const timer = timers.get(name);
             if (timer)
                 clearTimeout(timer);
-            timers.set(name, setTimeout(() => clear(name), TYPING_CLEAR_MS));
+            timers.set(name, setTimeout(() => {
+                clear(name);
+            }, TYPING_CLEAR_MS));
             if (!timer)
                 publish();
         },

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": 6,
+  "version": 7,
   "files": {
     "app-icons/adaptive-foreground-1024.png": {
       "sha256": "1cfdc826654866b7bd1e4f549417f9f1918a66d5d8a0133dafbfd3d75d5ecc5f",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joinskips/brand",
-  "version": "6.0.0",
+  "version": "7.0.0-develop.132",
   "description": "Skips design tokens, Onest, logos, favicons, interface icons, member pictures and app icons.",
   "license": "UNLICENSED",
   "homepage": "https://brand.joinskips.com",