@kesha-antonov/react-native-chat 5.0.0 → 6.0.0

package/lib/components/messageHighlight.js

@@ -0,0 +1,157 @@
+import { c as _c } from "react/compiler-runtime";
+import React, { createContext, useContext, useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
+import { createKeyedStore, useKeyedValue } from '../store';
+
+/**
+ * Which message is flashing, the highlight after jumping to a quoted message. Each row reads
+ * its own token, so a flash wakes the row it lands on and the one it leaves.
+ */
+
+/** Covers the jump to the message plus the flash itself. */
+const HIGHLIGHT_LIFETIME_MS = 2000;
+export function createMessageHighlightStore() {
+  const tokens = createKeyedStore();
+  let counter = 0;
+  let timer;
+  return {
+    subscribe: tokens.subscribe,
+    getToken: messageId => tokens.get(messageId) ?? 0,
+    highlight: messageId => {
+      counter += 1;
+      tokens.keys().forEach(id => {
+        if (id !== messageId) tokens.delete(id);
+      });
+      tokens.set(messageId, counter);
+      // Kept a while, so a row that only mounts once the list has scrolled to it still flashes.
+      clearTimeout(timer);
+      timer = setTimeout(tokens.clear, HIGHLIGHT_LIFETIME_MS);
+    },
+    dispose: () => {
+      clearTimeout(timer);
+    },
+    tokens
+  };
+}
+export const MessageHighlightContext = createContext(null);
+
+/** The flash count for this message (0 when it is not flashing, or outside a `Chat`). */
+export function useMessageHighlightToken(messageId) {
+  const store = useContext(MessageHighlightContext);
+  return useKeyedValue(store?.tokens, messageId) ?? 0;
+}
+
+// A jumped-to message stays highlighted for 1000ms, then fades out over 300ms.
+const HIGHLIGHT_HOLD_MS = 1000;
+const HIGHLIGHT_FADE_MS = 300;
+// The selected background is 0x280a90f0: the accent at 0x28 / 0xff.
+const HIGHLIGHT_OPACITY = 0x28 / 0xff;
+
+/** Shows at once, holds, then fades out - restarted by every new token. */
+const useHighlightFade = (token, peak) => {
+  const $ = _c(7);
+  const opacity = useSharedValue(peak);
+  let t0;
+  if ($[0] !== opacity || $[1] !== peak) {
+    t0 = () => {
+      opacity.value = peak;
+      opacity.value = withDelay(HIGHLIGHT_HOLD_MS, withTiming(0, {
+        duration: HIGHLIGHT_FADE_MS,
+        easing: Easing.linear
+      }));
+    };
+    $[0] = opacity;
+    $[1] = peak;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  let t1;
+  if ($[3] !== opacity || $[4] !== peak || $[5] !== token) {
+    t1 = [token, opacity, peak];
+    $[3] = opacity;
+    $[4] = peak;
+    $[5] = token;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  useEffect(t0, t1);
+  return useAnimatedStyle(() => ({
+    opacity: opacity.value
+  }));
+};
+
+/**
+ * The band across the whole row behind a highlighted message. It shows at once and
+ * fades out. Mounted only while its message is flashing, so the rest of the list carries no
+ * shared value for it. `Message` passes `colors.selectionBackground`, which carries its own
+ * alpha, at `opacity` 1; the default draws a plain accent at 0x28 alpha.
+ */
+export const HighlightOverlay = t0 => {
+  const $ = _c(5);
+  const {
+    token,
+    color,
+    opacity: t1
+  } = t0;
+  const opacity = t1 === undefined ? HIGHLIGHT_OPACITY : t1;
+  const style = useHighlightFade(token, opacity);
+  let t2;
+  if ($[0] !== color) {
+    t2 = {
+      backgroundColor: color
+    };
+    $[0] = color;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== style || $[3] !== t2) {
+    t3 = <Animated.View testID="message-highlight" pointerEvents="none" style={[StyleSheet.absoluteFill, t2, style]} />;
+    $[2] = style;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
+};
+
+/**
+ * The bubble's own part of the flash: it swaps to its selected color for as long as
+ * the row band shows.
+ */
+export const BubbleHighlightTint = t0 => {
+  const $ = _c(6);
+  const {
+    token,
+    color,
+    cornerStyle
+  } = t0;
+  const style = useHighlightFade(token, 1);
+  let t1;
+  if ($[0] !== color) {
+    t1 = {
+      backgroundColor: color
+    };
+    $[0] = color;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== cornerStyle || $[3] !== style || $[4] !== t1) {
+    t2 = <Animated.View testID="bubble-highlight" pointerEvents="none" style={[StyleSheet.absoluteFill, t1, cornerStyle, style]} />;
+    $[2] = cornerStyle;
+    $[3] = style;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+};
+//# sourceMappingURL=messageHighlight.js.map

package/lib/components/messageHighlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messageHighlight.js","names":["React","createContext","useContext","useEffect","StyleSheet","Animated","Easing","useAnimatedStyle","useSharedValue","withDelay","withTiming","createKeyedStore","useKeyedValue","HIGHLIGHT_LIFETIME_MS","createMessageHighlightStore","tokens","counter","timer","subscribe","getToken","messageId","get","highlight","keys","forEach","id","delete","set","clearTimeout","setTimeout","clear","dispose","MessageHighlightContext","useMessageHighlightToken","store","HIGHLIGHT_HOLD_MS","HIGHLIGHT_FADE_MS","HIGHLIGHT_OPACITY","useHighlightFade","token","peak","$","_c","opacity","t0","value","duration","easing","linear","t1","HighlightOverlay","color","undefined","style","t2","backgroundColor","t3","absoluteFill","BubbleHighlightTint","cornerStyle"],"sources":["../../src/components/messageHighlight.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect } from 'react'\nimport { StyleProp, StyleSheet, ViewStyle } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useSharedValue,\n  withDelay,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport { createKeyedStore, KeyedStore, useKeyedValue } from '../store'\n\n/**\n * Which message is flashing, the highlight after jumping to a quoted message. Each row reads\n * its own token, so a flash wakes the row it lands on and the one it leaves.\n */\nexport interface MessageHighlightStore {\n  subscribe: (listener: () => void) => () => void\n  /** The flash count for this message, 0 when it is not flashing. */\n  getToken: (messageId: string | number) => number\n  highlight: (messageId: string | number) => void\n  dispose: () => void\n  /** @internal The flash token by message id, read by each row. */\n  tokens: KeyedStore<string | number, number>\n}\n\n/** Covers the jump to the message plus the flash itself. */\nconst HIGHLIGHT_LIFETIME_MS = 2000\n\nexport function createMessageHighlightStore (): MessageHighlightStore {\n  const tokens = createKeyedStore<string | number, number>()\n  let counter = 0\n  let timer: ReturnType<typeof setTimeout> | undefined\n\n  return {\n    subscribe: tokens.subscribe,\n    getToken: messageId => tokens.get(messageId) ?? 0,\n    highlight: messageId => {\n      counter += 1\n      tokens.keys().forEach(id => {\n        if (id !== messageId)\n          tokens.delete(id)\n      })\n      tokens.set(messageId, counter)\n      // Kept a while, so a row that only mounts once the list has scrolled to it still flashes.\n      clearTimeout(timer)\n      timer = setTimeout(tokens.clear, HIGHLIGHT_LIFETIME_MS)\n    },\n    dispose: () => {\n      clearTimeout(timer)\n    },\n    tokens,\n  }\n}\n\nexport const MessageHighlightContext = createContext<MessageHighlightStore | null>(null)\n\n/** The flash count for this message (0 when it is not flashing, or outside a `Chat`). */\nexport function useMessageHighlightToken (messageId: string | number | undefined): number {\n  const store = useContext(MessageHighlightContext)\n  return useKeyedValue(store?.tokens, messageId) ?? 0\n}\n\n// A jumped-to message stays highlighted for 1000ms, then fades out over 300ms.\nconst HIGHLIGHT_HOLD_MS = 1000\nconst HIGHLIGHT_FADE_MS = 300\n// The selected background is 0x280a90f0: the accent at 0x28 / 0xff.\nconst HIGHLIGHT_OPACITY = 0x28 / 0xff\n\n/** Shows at once, holds, then fades out - restarted by every new token. */\nconst useHighlightFade = (token: number, peak: number) => {\n  const opacity = useSharedValue(peak)\n\n  useEffect(() => {\n    opacity.value = peak\n    opacity.value = withDelay(\n      HIGHLIGHT_HOLD_MS,\n      withTiming(0, { duration: HIGHLIGHT_FADE_MS, easing: Easing.linear })\n    )\n  }, [token, opacity, peak])\n\n  return useAnimatedStyle(() => ({ opacity: opacity.value }))\n}\n\n/**\n * The band across the whole row behind a highlighted message. It shows at once and\n * fades out. Mounted only while its message is flashing, so the rest of the list carries no\n * shared value for it. `Message` passes `colors.selectionBackground`, which carries its own\n * alpha, at `opacity` 1; the default draws a plain accent at 0x28 alpha.\n */\nexport const HighlightOverlay = ({ token, color, opacity = HIGHLIGHT_OPACITY }: { token: number, color: string, opacity?: number }) => {\n  const style = useHighlightFade(token, opacity)\n\n  return (\n    <Animated.View\n      testID='message-highlight'\n      pointerEvents='none'\n      style={[StyleSheet.absoluteFill, { backgroundColor: color }, style]}\n    />\n  )\n}\n\n/**\n * The bubble's own part of the flash: it swaps to its selected color for as long as\n * the row band shows.\n */\nexport const BubbleHighlightTint = ({ token, color, cornerStyle }: { token: number, color: string, cornerStyle: StyleProp<ViewStyle> }) => {\n  const style = useHighlightFade(token, 1)\n\n  return (\n    <Animated.View\n      testID='bubble-highlight'\n      pointerEvents='none'\n      style={[StyleSheet.absoluteFill, { backgroundColor: color }, cornerStyle, style]}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/components/messagePress.d.ts

@@ -0,0 +1,14 @@
+export declare const PRESS_HOLD_MS = 400;
+/**
+ * Spread onto a tappable inside a bubble (photo, location card, play button...).
+ * Holding it as long as the message long-press takes counts as a long-press, so
+ * letting go no longer fires its `onPress`: a long-press opens the menu, and
+ * never also opens the photo viewer or starts playback on release.
+ * `Pressable` and gesture-handler's `BaseButton` both skip `onPress` once their
+ * own `onLongPress` has fired.
+ */
+export declare const suppressPressAfterHold: {
+    readonly onLongPress: () => void;
+    readonly delayLongPress: 400;
+};
+//# sourceMappingURL=messagePress.d.ts.map

package/lib/components/messagePress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messagePress.d.ts","sourceRoot":"","sources":["../../src/components/messagePress.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,MAAM,CAAA;AAIhC;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB;;;CAGzB,CAAA"}

package/lib/components/messagePress.js

@@ -0,0 +1,18 @@
+// The long-press fires after the system long-press timeout (400ms), with no
+// shrink or lift on the way - the message stays where it is and the menu opens beside the finger.
+export const PRESS_HOLD_MS = 400;
+const noop = () => {};
+
+/**
+ * Spread onto a tappable inside a bubble (photo, location card, play button...).
+ * Holding it as long as the message long-press takes counts as a long-press, so
+ * letting go no longer fires its `onPress`: a long-press opens the menu, and
+ * never also opens the photo viewer or starts playback on release.
+ * `Pressable` and gesture-handler's `BaseButton` both skip `onPress` once their
+ * own `onLongPress` has fired.
+ */
+export const suppressPressAfterHold = {
+  onLongPress: noop,
+  delayLongPress: PRESS_HOLD_MS
+};
+//# sourceMappingURL=messagePress.js.map

package/lib/components/messagePress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messagePress.js","names":["PRESS_HOLD_MS","noop","suppressPressAfterHold","onLongPress","delayLongPress"],"sources":["../../src/components/messagePress.ts"],"sourcesContent":["// The long-press fires after the system long-press timeout (400ms), with no\n// shrink or lift on the way - the message stays where it is and the menu opens beside the finger.\nexport const PRESS_HOLD_MS = 400\n\nconst noop = () => {}\n\n/**\n * Spread onto a tappable inside a bubble (photo, location card, play button...).\n * Holding it as long as the message long-press takes counts as a long-press, so\n * letting go no longer fires its `onPress`: a long-press opens the menu, and\n * never also opens the photo viewer or starts playback on release.\n * `Pressable` and gesture-handler's `BaseButton` both skip `onPress` once their\n * own `onLongPress` has fired.\n */\nexport const suppressPressAfterHold = {\n  onLongPress: noop,\n  delayLongPress: PRESS_HOLD_MS,\n} as const\n"],"mappings":"AAAA;AACA;AACA,OAAO,MAAMA,aAAa,GAAG,GAAG;AAEhC,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;;AAErB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,sBAAsB,GAAG;EACpCC,WAAW,EAAEF,IAAI;EACjBG,cAAc,EAAEJ;AAClB,CAAU","ignoreList":[]}

package/lib/components/messageSelection.d.ts

@@ -0,0 +1,39 @@
+import { KeyedStore } from '../store';
+/**
+ * Multi-select mode: which messages are checked. A row reads the mode flag and its own checked
+ * state, so checking a message wakes that row alone, and entering or leaving the mode
+ * re-renders each row once.
+ */
+export interface MessageSelectionStore {
+    subscribe: (listener: () => void) => () => void;
+    isActive: () => boolean;
+    isSelected: (messageId: string | number) => boolean;
+    /** The checked ids, in the order they were checked. */
+    getSelectedIds: () => (string | number)[];
+    /** Enters the mode with this message checked. */
+    start: (messageId: string | number) => void;
+    /** Checks or unchecks a message; unchecking the last one leaves the mode. */
+    toggle: (messageId: string | number) => void;
+    /** Drops ids that are no longer in the chat (deleted messages). */
+    retain: (messageIds: Set<string | number>) => void;
+    clear: () => void;
+    /** @internal Per-message checked flags, read by each row. */
+    checked: KeyedStore<string | number, true>;
+}
+export declare function createMessageSelectionStore(): MessageSelectionStore;
+export declare const MessageSelectionContext: import("react").Context<MessageSelectionStore | null>;
+export interface MessageSelectionState {
+    isActive: boolean;
+    isSelected: boolean;
+    toggle: () => void;
+}
+/** Whether the chat is selecting messages and whether this one is checked. */
+export declare function useMessageSelection(messageId: string | number | undefined): MessageSelectionState;
+/** Whether the chat is selecting messages; re-renders only when that flips. */
+export declare function useIsSelectionActive(store: MessageSelectionStore | null): boolean;
+/**
+ * The checked ids; re-renders on every change. The store swaps in a new array on each change,
+ * so the array itself is the snapshot (a compiler that memoizes on inputs sees it change).
+ */
+export declare function useSelectedIds(store: MessageSelectionStore | null): (string | number)[];
+//# sourceMappingURL=messageSelection.d.ts.map

package/lib/components/messageSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messageSelection.d.ts","sourceRoot":"","sources":["../../src/components/messageSelection.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiC,UAAU,EAAiB,MAAM,UAAU,CAAA;AAEnF;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAA;IAC/C,QAAQ,EAAE,MAAM,OAAO,CAAA;IACvB,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAA;IACnD,uDAAuD;IACvD,cAAc,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IACzC,iDAAiD;IACjD,KAAK,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAC3C,6EAA6E;IAC7E,MAAM,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAC5C,mEAAmE;IACnE,MAAM,EAAE,CAAC,UAAU,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,IAAI,CAAA;IAClD,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,6DAA6D;IAC7D,OAAO,EAAE,UAAU,CAAC,MAAM,GAAG,MAAM,EAAE,IAAI,CAAC,CAAA;CAC3C;AASD,wBAAgB,2BAA2B,IAAK,qBAAqB,CAsCpE;AAED,eAAO,MAAM,uBAAuB,uDAAoD,CAAA;AAIxF,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;IACnB,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB;AAED,8EAA8E;AAC9E,wBAAgB,mBAAmB,CAAE,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,qBAAqB,CAUlG;AAED,+EAA+E;AAC/E,wBAAgB,oBAAoB,CAAE,KAAK,EAAE,qBAAqB,GAAG,IAAI,GAAG,OAAO,CAMlF;AAID;;;GAGG;AACH,wBAAgB,cAAc,CAAE,KAAK,EAAE,qBAAqB,GAAG,IAAI,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAMxF"}

package/lib/components/messageSelection.js

@@ -0,0 +1,135 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useCallback, useContext, useSyncExternalStore } from 'react';
+import { createKeyedStore, createStore, useKeyedValue } from '../store';
+
+/**
+ * Multi-select mode: which messages are checked. A row reads the mode flag and its own checked
+ * state, so checking a message wakes that row alone, and entering or leaving the mode
+ * re-renders each row once.
+ */
+
+const IDLE = {
+  active: false,
+  ids: []
+};
+export function createMessageSelectionStore() {
+  const state = createStore(IDLE);
+  const checked = createKeyedStore();
+
+  // The per-message flags change before the mode flag, so a row woken by either sees both new.
+  const apply = ids => {
+    const next = new Set(ids);
+    checked.keys().forEach(id => {
+      if (!next.has(id)) checked.delete(id);
+    });
+    ids.forEach(id => checked.set(id, true));
+    state.set(ids.length ? {
+      active: true,
+      ids
+    } : IDLE);
+  };
+  return {
+    subscribe: state.subscribe,
+    isActive: () => state.get().active,
+    isSelected: messageId => checked.has(messageId),
+    getSelectedIds: () => state.get().ids,
+    start: messageId => apply([messageId]),
+    toggle: messageId => {
+      const {
+        active,
+        ids
+      } = state.get();
+      if (!active) return;
+      apply(ids.includes(messageId) ? ids.filter(id => id !== messageId) : [...ids, messageId]);
+    },
+    retain: messageIds => {
+      const {
+        active,
+        ids
+      } = state.get();
+      if (!active) return;
+      const next = ids.filter(id => messageIds.has(id));
+      if (next.length !== ids.length) apply(next);
+    },
+    clear: () => apply([]),
+    checked
+  };
+}
+export const MessageSelectionContext = createContext(null);
+const noopSubscribe = () => () => {};
+/** Whether the chat is selecting messages and whether this one is checked. */
+export function useMessageSelection(messageId) {
+  const $ = _c(7);
+  const store = useContext(MessageSelectionContext);
+  const isActive = useIsSelectionActive(store);
+  const isChecked = useKeyedValue(store?.checked, messageId) === true;
+  let t0;
+  if ($[0] !== messageId || $[1] !== store) {
+    t0 = () => {
+      if (store && messageId != null) {
+        store.toggle(messageId);
+      }
+    };
+    $[0] = messageId;
+    $[1] = store;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const toggle = t0;
+  const t1 = isActive && isChecked;
+  let t2;
+  if ($[3] !== isActive || $[4] !== t1 || $[5] !== toggle) {
+    t2 = {
+      isActive,
+      isSelected: t1,
+      toggle
+    };
+    $[3] = isActive;
+    $[4] = t1;
+    $[5] = toggle;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+/** Whether the chat is selecting messages; re-renders only when that flips. */
+export function useIsSelectionActive(store) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== store) {
+    t0 = () => !!store?.isActive();
+    $[0] = store;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return useSyncExternalStore(store?.subscribe ?? noopSubscribe, t0, _temp);
+}
+function _temp() {
+  return false;
+}
+const NO_IDS = [];
+
+/**
+ * The checked ids; re-renders on every change. The store swaps in a new array on each change,
+ * so the array itself is the snapshot (a compiler that memoizes on inputs sees it change).
+ */
+export function useSelectedIds(store) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== store) {
+    t0 = () => store?.getSelectedIds() ?? NO_IDS;
+    $[0] = store;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return useSyncExternalStore(store?.subscribe ?? noopSubscribe, t0, _temp2);
+}
+function _temp2() {
+  return NO_IDS;
+}
+//# sourceMappingURL=messageSelection.js.map

package/lib/components/messageSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messageSelection.js","names":["createContext","useCallback","useContext","useSyncExternalStore","createKeyedStore","createStore","useKeyedValue","IDLE","active","ids","createMessageSelectionStore","state","checked","apply","next","Set","keys","forEach","id","has","delete","set","length","subscribe","isActive","get","isSelected","messageId","getSelectedIds","start","toggle","includes","filter","retain","messageIds","clear","MessageSelectionContext","noopSubscribe","useMessageSelection","$","_c","store","useIsSelectionActive","isChecked","t0","t1","t2","_temp","NO_IDS","useSelectedIds","_temp2"],"sources":["../../src/components/messageSelection.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useSyncExternalStore } from 'react'\n\nimport { createKeyedStore, createStore, KeyedStore, useKeyedValue } from '../store'\n\n/**\n * Multi-select mode: which messages are checked. A row reads the mode flag and its own checked\n * state, so checking a message wakes that row alone, and entering or leaving the mode\n * re-renders each row once.\n */\nexport interface MessageSelectionStore {\n  subscribe: (listener: () => void) => () => void\n  isActive: () => boolean\n  isSelected: (messageId: string | number) => boolean\n  /** The checked ids, in the order they were checked. */\n  getSelectedIds: () => (string | number)[]\n  /** Enters the mode with this message checked. */\n  start: (messageId: string | number) => void\n  /** Checks or unchecks a message; unchecking the last one leaves the mode. */\n  toggle: (messageId: string | number) => void\n  /** Drops ids that are no longer in the chat (deleted messages). */\n  retain: (messageIds: Set<string | number>) => void\n  clear: () => void\n  /** @internal Per-message checked flags, read by each row. */\n  checked: KeyedStore<string | number, true>\n}\n\ninterface SelectionState {\n  active: boolean\n  ids: (string | number)[]\n}\n\nconst IDLE: SelectionState = { active: false, ids: [] }\n\nexport function createMessageSelectionStore (): MessageSelectionStore {\n  const state = createStore<SelectionState>(IDLE)\n  const checked = createKeyedStore<string | number, true>()\n\n  // The per-message flags change before the mode flag, so a row woken by either sees both new.\n  const apply = (ids: (string | number)[]) => {\n    const next = new Set(ids)\n    checked.keys().forEach(id => {\n      if (!next.has(id))\n        checked.delete(id)\n    })\n    ids.forEach(id => checked.set(id, true))\n    state.set(ids.length ? { active: true, ids } : IDLE)\n  }\n\n  return {\n    subscribe: state.subscribe,\n    isActive: () => state.get().active,\n    isSelected: messageId => checked.has(messageId),\n    getSelectedIds: () => state.get().ids,\n    start: messageId => apply([messageId]),\n    toggle: messageId => {\n      const { active, ids } = state.get()\n      if (!active)\n        return\n      apply(ids.includes(messageId) ? ids.filter(id => id !== messageId) : [...ids, messageId])\n    },\n    retain: messageIds => {\n      const { active, ids } = state.get()\n      if (!active)\n        return\n      const next = ids.filter(id => messageIds.has(id))\n      if (next.length !== ids.length)\n        apply(next)\n    },\n    clear: () => apply([]),\n    checked,\n  }\n}\n\nexport const MessageSelectionContext = createContext<MessageSelectionStore | null>(null)\n\nconst noopSubscribe = () => () => {}\n\nexport interface MessageSelectionState {\n  isActive: boolean\n  isSelected: boolean\n  toggle: () => void\n}\n\n/** Whether the chat is selecting messages and whether this one is checked. */\nexport function useMessageSelection (messageId: string | number | undefined): MessageSelectionState {\n  const store = useContext(MessageSelectionContext)\n  const isActive = useIsSelectionActive(store)\n  const isChecked = useKeyedValue(store?.checked, messageId) === true\n  const toggle = useCallback(() => {\n    if (store && messageId != null)\n      store.toggle(messageId)\n  }, [store, messageId])\n\n  return { isActive, isSelected: isActive && isChecked, toggle }\n}\n\n/** Whether the chat is selecting messages; re-renders only when that flips. */\nexport function useIsSelectionActive (store: MessageSelectionStore | null): boolean {\n  return useSyncExternalStore(\n    store?.subscribe ?? noopSubscribe,\n    () => !!store?.isActive(),\n    () => false\n  )\n}\n\nconst NO_IDS: (string | number)[] = []\n\n/**\n * The checked ids; re-renders on every change. The store swaps in a new array on each change,\n * so the array itself is the snapshot (a compiler that memoizes on inputs sees it change).\n */\nexport function useSelectedIds (store: MessageSelectionStore | null): (string | number)[] {\n  return useSyncExternalStore(\n    store?.subscribe ?? noopSubscribe,\n    () => store?.getSelectedIds() ?? NO_IDS,\n    () => NO_IDS\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/components/recordingFeedback.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Recording uses a single light keyboard-tap haptic
+ * (record start and stop, lock, the tap that switches voice / video, video
+ * start and resume).
+ */
+export declare const recordingHaptic: () => void;
+export declare const shouldShowLockHint: () => boolean;
+export declare const countLockHint: () => void;
+export declare const retireLockHint: () => void;
+export declare const shouldShowPauseHint: () => boolean;
+export declare const countPauseHint: () => void;
+export declare const retirePauseHint: () => void;
+export declare const shouldConfirmTrimOnResume: () => boolean;
+export declare const confirmTrimOnResume: () => void;
+export declare const getLastRecordMode: () => "video" | "voice";
+export declare const setLastRecordMode: (mode: "voice" | "video") => void;
+/**
+ * `m:ss,t` with tenths, the recording timer - the moving decimal is what
+ * tells you the recorder is live.
+ */
+export declare const formatRecordingTime: (ms: number) => string;
+//# sourceMappingURL=recordingFeedback.d.ts.map

package/lib/components/recordingFeedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"recordingFeedback.d.ts","sourceRoot":"","sources":["../../src/components/recordingFeedback.ts"],"names":[],"mappings":"AAQA;;;;GAIG;AACH,eAAO,MAAM,eAAe,YAA8B,CAAA;AAU1D,eAAO,MAAM,kBAAkB,eAAwC,CAAA;AAEvE,eAAO,MAAM,aAAa,YAEzB,CAAA;AAED,eAAO,MAAM,cAAc,YAE1B,CAAA;AASD,eAAO,MAAM,mBAAmB,eAA0C,CAAA;AAE1E,eAAO,MAAM,cAAc,YAE1B,CAAA;AAED,eAAO,MAAM,eAAe,YAE3B,CAAA;AAQD,eAAO,MAAM,yBAAyB,eAAiC,CAAA;AAEvE,eAAO,MAAM,mBAAmB,YAE/B,CAAA;AASD,eAAO,MAAM,iBAAiB,yBAAuB,CAAA;AAErD,eAAO,MAAM,iBAAiB,GAAI,MAAM,OAAO,GAAG,OAAO,SAExD,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,IAAI,MAAM,WAS7C,CAAA"}

package/lib/components/recordingFeedback.js

@@ -0,0 +1,80 @@
+/*
+ * Small pieces of recording behavior that live outside any one
+ * component: the haptic tick, the per-session hint counters and the
+ * remembered voice / video choice.
+ */
+
+import { impactHaptic } from './haptics';
+
+/**
+ * Recording uses a single light keyboard-tap haptic
+ * (record start and stop, lock, the tap that switches voice / video, video
+ * start and resume).
+ */
+export const recordingHaptic = () => impactHaptic('Light');
+
+/**
+ * "Slide up to lock" shows for the first three takes and never again
+ * once the user has locked one. The
+ * library has no storage of its own, so the count lasts for the app session.
+ */
+const LOCK_HINT_LIMIT = 3;
+let lockHintCount = 0;
+export const shouldShowLockHint = () => lockHintCount < LOCK_HINT_LIMIT;
+export const countLockHint = () => {
+  lockHintCount++;
+};
+export const retireLockHint = () => {
+  lockHintCount = LOCK_HINT_LIMIT;
+};
+
+/**
+ * "Pause to trim or replay" by the pause button of a locked voice take, for
+ * the first few locks (`showPauseHint`, `voicepausehint`); a pause retires it.
+ */
+const PAUSE_HINT_LIMIT = 3;
+let pauseHintCount = 0;
+export const shouldShowPauseHint = () => pauseHintCount < PAUSE_HINT_LIMIT;
+export const countPauseHint = () => {
+  pauseHintCount++;
+};
+export const retirePauseHint = () => {
+  pauseHintCount = PAUSE_HINT_LIMIT;
+};
+
+/**
+ * Resuming a trimmed take throws the cut audio away, so ask first,
+ * once.
+ */
+let isTrimOnResumeConfirmed = false;
+export const shouldConfirmTrimOnResume = () => !isTrimOnResumeConfirmed;
+export const confirmTrimOnResume = () => {
+  isTrimOnResumeConfirmed = true;
+};
+
+/**
+ * The voice / video choice of the shared record button, voice by default. It
+ * lasts for
+ * the app session, so every chat opens on the mode used last.
+ */
+let lastRecordMode = 'voice';
+export const getLastRecordMode = () => lastRecordMode;
+export const setLastRecordMode = mode => {
+  lastRecordMode = mode;
+};
+
+/**
+ * `m:ss,t` with tenths, the recording timer - the moving decimal is what
+ * tells you the recorder is live.
+ */
+export const formatRecordingTime = ms => {
+  const tenthsTotal = Math.max(0, Math.floor(ms / 100));
+  const tenths = tenthsTotal % 10;
+  const totalSeconds = Math.floor(tenthsTotal / 10);
+  const secs = totalSeconds % 60;
+  const mins = Math.floor(totalSeconds / 60) % 60;
+  const hours = Math.floor(totalSeconds / 3600);
+  const mm = hours > 0 ? mins.toString().padStart(2, '0') : String(mins);
+  return `${hours > 0 ? `${hours}:` : ''}${mm}:${secs.toString().padStart(2, '0')},${tenths}`;
+};
+//# sourceMappingURL=recordingFeedback.js.map

package/lib/components/recordingFeedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recordingFeedback.js","names":["impactHaptic","recordingHaptic","LOCK_HINT_LIMIT","lockHintCount","shouldShowLockHint","countLockHint","retireLockHint","PAUSE_HINT_LIMIT","pauseHintCount","shouldShowPauseHint","countPauseHint","retirePauseHint","isTrimOnResumeConfirmed","shouldConfirmTrimOnResume","confirmTrimOnResume","lastRecordMode","getLastRecordMode","setLastRecordMode","mode","formatRecordingTime","ms","tenthsTotal","Math","max","floor","tenths","totalSeconds","secs","mins","hours","mm","toString","padStart","String"],"sources":["../../src/components/recordingFeedback.ts"],"sourcesContent":["/*\n * Small pieces of recording behavior that live outside any one\n * component: the haptic tick, the per-session hint counters and the\n * remembered voice / video choice.\n */\n\nimport { impactHaptic } from './haptics'\n\n/**\n * Recording uses a single light keyboard-tap haptic\n * (record start and stop, lock, the tap that switches voice / video, video\n * start and resume).\n */\nexport const recordingHaptic = () => impactHaptic('Light')\n\n/**\n * \"Slide up to lock\" shows for the first three takes and never again\n * once the user has locked one. The\n * library has no storage of its own, so the count lasts for the app session.\n */\nconst LOCK_HINT_LIMIT = 3\nlet lockHintCount = 0\n\nexport const shouldShowLockHint = () => lockHintCount < LOCK_HINT_LIMIT\n\nexport const countLockHint = () => {\n  lockHintCount++\n}\n\nexport const retireLockHint = () => {\n  lockHintCount = LOCK_HINT_LIMIT\n}\n\n/**\n * \"Pause to trim or replay\" by the pause button of a locked voice take, for\n * the first few locks (`showPauseHint`, `voicepausehint`); a pause retires it.\n */\nconst PAUSE_HINT_LIMIT = 3\nlet pauseHintCount = 0\n\nexport const shouldShowPauseHint = () => pauseHintCount < PAUSE_HINT_LIMIT\n\nexport const countPauseHint = () => {\n  pauseHintCount++\n}\n\nexport const retirePauseHint = () => {\n  pauseHintCount = PAUSE_HINT_LIMIT\n}\n\n/**\n * Resuming a trimmed take throws the cut audio away, so ask first,\n * once.\n */\nlet isTrimOnResumeConfirmed = false\n\nexport const shouldConfirmTrimOnResume = () => !isTrimOnResumeConfirmed\n\nexport const confirmTrimOnResume = () => {\n  isTrimOnResumeConfirmed = true\n}\n\n/**\n * The voice / video choice of the shared record button, voice by default. It\n * lasts for\n * the app session, so every chat opens on the mode used last.\n */\nlet lastRecordMode: 'voice' | 'video' = 'voice'\n\nexport const getLastRecordMode = () => lastRecordMode\n\nexport const setLastRecordMode = (mode: 'voice' | 'video') => {\n  lastRecordMode = mode\n}\n\n/**\n * `m:ss,t` with tenths, the recording timer - the moving decimal is what\n * tells you the recorder is live.\n */\nexport const formatRecordingTime = (ms: number) => {\n  const tenthsTotal = Math.max(0, Math.floor(ms / 100))\n  const tenths = tenthsTotal % 10\n  const totalSeconds = Math.floor(tenthsTotal / 10)\n  const secs = totalSeconds % 60\n  const mins = Math.floor(totalSeconds / 60) % 60\n  const hours = Math.floor(totalSeconds / 3600)\n  const mm = hours > 0 ? mins.toString().padStart(2, '0') : String(mins)\n  return `${hours > 0 ? `${hours}:` : ''}${mm}:${secs.toString().padStart(2, '0')},${tenths}`\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAEA,SAASA,YAAY,QAAQ,WAAW;;AAExC;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAMD,YAAY,CAAC,OAAO,CAAC;;AAE1D;AACA;AACA;AACA;AACA;AACA,MAAME,eAAe,GAAG,CAAC;AACzB,IAAIC,aAAa,GAAG,CAAC;AAErB,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAMD,aAAa,GAAGD,eAAe;AAEvE,OAAO,MAAMG,aAAa,GAAGA,CAAA,KAAM;EACjCF,aAAa,EAAE;AACjB,CAAC;AAED,OAAO,MAAMG,cAAc,GAAGA,CAAA,KAAM;EAClCH,aAAa,GAAGD,eAAe;AACjC,CAAC;;AAED;AACA;AACA;AACA;AACA,MAAMK,gBAAgB,GAAG,CAAC;AAC1B,IAAIC,cAAc,GAAG,CAAC;AAEtB,OAAO,MAAMC,mBAAmB,GAAGA,CAAA,KAAMD,cAAc,GAAGD,gBAAgB;AAE1E,OAAO,MAAMG,cAAc,GAAGA,CAAA,KAAM;EAClCF,cAAc,EAAE;AAClB,CAAC;AAED,OAAO,MAAMG,eAAe,GAAGA,CAAA,KAAM;EACnCH,cAAc,GAAGD,gBAAgB;AACnC,CAAC;;AAED;AACA;AACA;AACA;AACA,IAAIK,uBAAuB,GAAG,KAAK;AAEnC,OAAO,MAAMC,yBAAyB,GAAGA,CAAA,KAAM,CAACD,uBAAuB;AAEvE,OAAO,MAAME,mBAAmB,GAAGA,CAAA,KAAM;EACvCF,uBAAuB,GAAG,IAAI;AAChC,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,IAAIG,cAAiC,GAAG,OAAO;AAE/C,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAMD,cAAc;AAErD,OAAO,MAAME,iBAAiB,GAAIC,IAAuB,IAAK;EAC5DH,cAAc,GAAGG,IAAI;AACvB,CAAC;;AAED;AACA;AACA;AACA;AACA,OAAO,MAAMC,mBAAmB,GAAIC,EAAU,IAAK;EACjD,MAAMC,WAAW,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,KAAK,CAACJ,EAAE,GAAG,GAAG,CAAC,CAAC;EACrD,MAAMK,MAAM,GAAGJ,WAAW,GAAG,EAAE;EAC/B,MAAMK,YAAY,GAAGJ,IAAI,CAACE,KAAK,CAACH,WAAW,GAAG,EAAE,CAAC;EACjD,MAAMM,IAAI,GAAGD,YAAY,GAAG,EAAE;EAC9B,MAAME,IAAI,GAAGN,IAAI,CAACE,KAAK,CAACE,YAAY,GAAG,EAAE,CAAC,GAAG,EAAE;EAC/C,MAAMG,KAAK,GAAGP,IAAI,CAACE,KAAK,CAACE,YAAY,GAAG,IAAI,CAAC;EAC7C,MAAMI,EAAE,GAAGD,KAAK,GAAG,CAAC,GAAGD,IAAI,CAACG,QAAQ,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAGC,MAAM,CAACL,IAAI,CAAC;EACtE,OAAO,GAAGC,KAAK,GAAG,CAAC,GAAG,GAAGA,KAAK,GAAG,GAAG,EAAE,GAAGC,EAAE,IAAIH,IAAI,CAACI,QAAQ,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,IAAIP,MAAM,EAAE;AAC7F,CAAC","ignoreList":[]}

package/lib/components/recordingMeter.d.ts

@@ -0,0 +1,19 @@
+import { Store } from '../store';
+/**
+ * A take's running time and loudness, which tick ten times a second while recording. They live
+ * in stores rather than in component state so that a tick re-renders only the timer that shows
+ * it (and moves the record button's halo without a render), not the composer around them.
+ *
+ * `elapsed` keeps the last take's time after it ends, so the bar that lingers after a cancel
+ * still shows when the take stopped; a new take resets it.
+ */
+export interface RecordingMeter {
+    elapsed: Store<number>;
+    /** The latest metering level, 0..1. */
+    level: Store<number>;
+}
+export declare const createRecordingMeter: () => RecordingMeter;
+/** The composer's meter; a recorder outside a composer keeps its own. */
+export declare const RecordingMeterContext: import("react").Context<RecordingMeter | null>;
+export declare const sameNumber: (value: number) => number;
+//# sourceMappingURL=recordingMeter.d.ts.map

package/lib/components/recordingMeter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"recordingMeter.d.ts","sourceRoot":"","sources":["../../src/components/recordingMeter.ts"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,EAAE,MAAM,UAAU,CAAA;AAE7C;;;;;;;GAOG;AACH,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACtB,uCAAuC;IACvC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;CACrB;AAED,eAAO,MAAM,oBAAoB,QAAO,cAGtC,CAAA;AAEF,yEAAyE;AACzE,eAAO,MAAM,qBAAqB,gDAA6C,CAAA;AAE/E,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,WAAU,CAAA"}

package/lib/components/recordingMeter.js

@@ -0,0 +1,21 @@
+import { createContext } from 'react';
+import { createStore } from '../store';
+
+/**
+ * A take's running time and loudness, which tick ten times a second while recording. They live
+ * in stores rather than in component state so that a tick re-renders only the timer that shows
+ * it (and moves the record button's halo without a render), not the composer around them.
+ *
+ * `elapsed` keeps the last take's time after it ends, so the bar that lingers after a cancel
+ * still shows when the take stopped; a new take resets it.
+ */
+
+export const createRecordingMeter = () => ({
+  elapsed: createStore(0),
+  level: createStore(0)
+});
+
+/** The composer's meter; a recorder outside a composer keeps its own. */
+export const RecordingMeterContext = createContext(null);
+export const sameNumber = value => value;
+//# sourceMappingURL=recordingMeter.js.map

package/lib/components/recordingMeter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recordingMeter.js","names":["createContext","createStore","createRecordingMeter","elapsed","level","RecordingMeterContext","sameNumber","value"],"sources":["../../src/components/recordingMeter.ts"],"sourcesContent":["import { createContext } from 'react'\n\nimport { createStore, Store } from '../store'\n\n/**\n * A take's running time and loudness, which tick ten times a second while recording. They live\n * in stores rather than in component state so that a tick re-renders only the timer that shows\n * it (and moves the record button's halo without a render), not the composer around them.\n *\n * `elapsed` keeps the last take's time after it ends, so the bar that lingers after a cancel\n * still shows when the take stopped; a new take resets it.\n */\nexport interface RecordingMeter {\n  elapsed: Store<number>\n  /** The latest metering level, 0..1. */\n  level: Store<number>\n}\n\nexport const createRecordingMeter = (): RecordingMeter => ({\n  elapsed: createStore(0),\n  level: createStore(0),\n})\n\n/** The composer's meter; a recorder outside a composer keeps its own. */\nexport const RecordingMeterContext = createContext<RecordingMeter | null>(null)\n\nexport const sameNumber = (value: number) => value\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,OAAO;AAErC,SAASC,WAAW,QAAe,UAAU;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAOA,OAAO,MAAMC,oBAAoB,GAAGA,CAAA,MAAuB;EACzDC,OAAO,EAAEF,WAAW,CAAC,CAAC,CAAC;EACvBG,KAAK,EAAEH,WAAW,CAAC,CAAC;AACtB,CAAC,CAAC;;AAEF;AACA,OAAO,MAAMI,qBAAqB,GAAGL,aAAa,CAAwB,IAAI,CAAC;AAE/E,OAAO,MAAMM,UAAU,GAAIC,KAAa,IAAKA,KAAK","ignoreList":[]}