cursedbelt 4.7.0 → 5.0.1

package/src/react/chat/usePresence.spec.tsx

@@ -0,0 +1,138 @@
+import { describe, expect, test } from 'bun:test';
+import { act, render } from '@testing-library/react';
+import { PresenceRoster } from './PresenceRoster.js';
+import { presenceUsers, usePresence } from './usePresence.js';
+
+/** A socket the test drives by hand: `open()`, `snapshot(rows)`, `drop()`. */
+class FakeSocket extends EventTarget {
+  static made: FakeSocket[] = [];
+  closed = false;
+  constructor(readonly url: string) {
+    super();
+    FakeSocket.made.push(this);
+  }
+  open() {
+    this.dispatchEvent(new Event('open'));
+  }
+  snapshot(rows: unknown, event = 'presence') {
+    const message = new MessageEvent('message', { data: JSON.stringify({ event, data: rows }) });
+    this.dispatchEvent(message);
+  }
+  drop() {
+    this.dispatchEvent(new Event('close'));
+  }
+  close() {
+    if (this.closed) return;
+    this.closed = true;
+    this.dispatchEvent(new Event('close'));
+  }
+}
+
+const NAMES: Record<string, string> = { u1: 'Ada', u2: 'Brian', me: 'Me' };
+
+function Harness({ enabled = true }: { enabled?: boolean }) {
+  const { users, connected } = usePresence({
+    channel: 'rooms',
+    enabled,
+    selfId: 'me',
+    resolveUser: (id) => ({ name: NAMES[id] }),
+    retryMs: [5],
+    location: { protocol: 'https:', host: 'roms.example' },
+    createSocket: (url) => new FakeSocket(url) as unknown as WebSocket,
+  });
+  return (
+    <div>
+      <span data-testid='state'>{connected ? 'on' : 'off'}</span>
+      <span data-testid='names'>{users.map((u) => u.name).join(',')}</span>
+      <PresenceRoster users={users} />
+    </div>
+  );
+}
+
+const last = () => FakeSocket.made[FakeSocket.made.length - 1] as FakeSocket;
+
+describe('presenceUsers', () => {
+  test('one row per user (the earliest tab), arrival order, without the viewer', () => {
+    const users = presenceUsers(
+      [
+        { userId: 'u2', connectedAt: 30 },
+        { userId: 'me', connectedAt: 1 },
+        { userId: 'u1', connectedAt: 20 },
+        { userId: 'u2', connectedAt: 10 },
+      ],
+      'me',
+      (id) => ({ name: NAMES[id] }),
+    );
+    expect(users).toEqual([
+      { id: 'u2', isOnline: true, name: 'Brian' },
+      { id: 'u1', isOnline: true, name: 'Ada' },
+    ]);
+  });
+
+  test("a row's own name wins over the resolver, and a malformed row is skipped", () => {
+    const users = presenceUsers([{ userId: 'u1', name: 'Ada L.' }, { userId: '' } as never, null as never], null, () => ({ name: 'x' }));
+    expect(users).toEqual([{ id: 'u1', isOnline: true, name: 'Ada L.' }]);
+  });
+});
+
+describe('usePresence', () => {
+  test('connects to /ws/<channel> over wss, and a join and a leave redraw the roster', () => {
+    FakeSocket.made = [];
+    const { getByTestId } = render(<Harness />);
+    expect(last().url).toBe('wss://roms.example/ws/rooms');
+    expect(getByTestId('state').textContent).toBe('off');
+
+    act(() => last().open());
+    expect(getByTestId('state').textContent).toBe('on');
+
+    act(() => last().snapshot([{ userId: 'me', connectedAt: 1 }, { userId: 'u1', connectedAt: 2 }]));
+    expect(getByTestId('names').textContent).toBe('Ada');
+
+    act(() => last().snapshot([{ userId: 'me', connectedAt: 1 }, { userId: 'u1', connectedAt: 2 }, { userId: 'u2', connectedAt: 3 }]));
+    expect(getByTestId('names').textContent).toBe('Ada,Brian');
+
+    act(() => last().snapshot([{ userId: 'me', connectedAt: 1 }, { userId: 'u2', connectedAt: 3 }]));
+    expect(getByTestId('names').textContent).toBe('Brian');
+
+    // Another channel's frame is not a presence snapshot.
+    act(() => last().snapshot([{ userId: 'u9' }], 'chat:message'));
+    expect(getByTestId('names').textContent).toBe('Brian');
+  });
+
+  test('🔴 a dropped socket empties the roster, then reconnects and refills it', async () => {
+    FakeSocket.made = [];
+    const { getByTestId } = render(<Harness />);
+    act(() => last().open());
+    act(() => last().snapshot([{ userId: 'u1', connectedAt: 2 }]));
+    expect(getByTestId('names').textContent).toBe('Ada');
+
+    const first = last();
+    act(() => first.drop());
+    expect(getByTestId('state').textContent).toBe('off');
+    expect(getByTestId('names').textContent).toBe('');
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 30));
+    });
+    expect(FakeSocket.made.length).toBe(2);
+    expect(last()).not.toBe(first);
+    act(() => last().open());
+    act(() => last().snapshot([{ userId: 'u2', connectedAt: 5 }]));
+    expect(getByTestId('state').textContent).toBe('on');
+    expect(getByTestId('names').textContent).toBe('Brian');
+  });
+
+  test('disabled opens no socket; unmount closes it and does not reconnect', async () => {
+    FakeSocket.made = [];
+    const off = render(<Harness enabled={false} />);
+    expect(FakeSocket.made.length).toBe(0);
+    off.unmount();
+
+    const on = render(<Harness />);
+    act(() => last().open());
+    on.unmount();
+    expect(last().closed).toBe(true);
+    await new Promise((r) => setTimeout(r, 30));
+    expect(FakeSocket.made.length).toBe(1);
+  });
+});

package/src/react/chat/usePresence.ts

@@ -0,0 +1,185 @@
+import { buildChannelSocketUrl, parseWsMessage, type WsLocation } from 'cursedbelt-core/ws-wire';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { PresenceUser } from './types.js';
+
+/**
+ * Who else is here — the CLIENT half of presence, so `PresenceRoster` has something to render.
+ *
+ * Task 078 (owner, 2026-09-19: *"show which other users are on apps"*). The library shipped the
+ * view (`PresenceRoster`) and the server (`cursedbelt-server`'s `createWsHub` with
+ * `presence: true`, whose `getPresence(channel)` is one `{ userId, connectedAt }` row per live
+ * client) and nothing in between — so the roster sat exported with zero consumers, and the one
+ * app that shows presence (`apps/family`, `src/live.ts`) hand-rolled its own socket. This is that
+ * socket, generalised: open `/ws/<channel>`, take every `presence` snapshot the channel
+ * broadcasts, and reconnect with a capped backoff when the socket drops.
+ *
+ * The server side a channel needs is one line in its lifecycle hooks:
+ *
+ *     onConnect: (_c, hub) => hub.broadcast('rooms', 'presence', hub.getPresence('rooms')),
+ *     onDisconnect: (_c, hub) => hub.broadcast('rooms', 'presence', hub.getPresence('rooms')),
+ *
+ * ── What it does with a snapshot ─────────────────────────────────────────────────────────
+ *  · ONE row per user, not per tab — the same person in three tabs is one avatar — keeping the
+ *    earliest `connectedAt`, so the roster's order is "who arrived first" and stable.
+ *  · `selfId` drops the viewer: the roster is who ELSE is here.
+ *  · `resolveUser` turns an id into a name/avatar; the hub deliberately ships only the id (its
+ *    `PresenceEntry` is the "business-safe view" of a client). A row may also carry `name` /
+ *    `avatarUrl` itself, for a channel that broadcasts richer rows.
+ *
+ * ── A dropped socket is an EMPTY roster, not a stale one ─────────────────────────────────
+ * On close the users go to `[]` and `connected` to false until the next snapshot. Showing the
+ * last list while disconnected would tell the viewer someone is here who may have left an hour
+ * ago; an empty strip is merely less informative. Same choice as family's `useLiveTree`.
+ */
+
+/** One presence row as a hub channel broadcasts it (`cursedbelt-server`'s `PresenceEntry`). */
+export interface PresenceEntryLike {
+  userId: string;
+  connectedAt?: number;
+  name?: string;
+  avatarUrl?: string;
+}
+
+export interface UsePresenceOptions {
+  /** The hub channel (`/ws/<channel>`) whose snapshots to follow. */
+  channel: string;
+  /** Room within the channel (`?room=`), when the channel is roomed. */
+  roomId?: string;
+  /** Off ⇒ no socket at all (e.g. signed out). Default true. */
+  enabled?: boolean;
+  /** The viewer's own id — left out of the roster. */
+  selfId?: string | null;
+  /** Name and avatar for an id the snapshot does not carry them for. */
+  resolveUser?: (userId: string) => { name?: string; avatarUrl?: string } | undefined;
+  /** The frame event carrying the snapshot. Default `'presence'`. */
+  event?: string;
+  /** Reconnect backoff, capped at its last entry. */
+  retryMs?: readonly number[];
+  /** Test/SSR seams. Default `window.location` and the global `WebSocket`. */
+  location?: WsLocation;
+  createSocket?: (url: string) => WebSocket;
+}
+
+export interface PresenceSubscription {
+  /** Everybody else on the channel now — pass straight to `<PresenceRoster users={…}>`. */
+  users: PresenceUser[];
+  /** Is the socket open? A closed one also means `users` is `[]`. */
+  connected: boolean;
+}
+
+/** Backoff, capped. A tab left open overnight must not hammer the box. */
+export const PRESENCE_RETRY_MS = [500, 1_000, 2_000, 5_000, 10_000, 30_000] as const;
+
+/**
+ * Collapse a snapshot to one {@link PresenceUser} per user, earliest arrival first, without
+ * `selfId`. Pure — the hook's whole judgement, exported so it is tested without a socket.
+ */
+export function presenceUsers(
+  rows: readonly PresenceEntryLike[],
+  selfId?: string | null,
+  resolveUser?: UsePresenceOptions['resolveUser'],
+): PresenceUser[] {
+  const byUser = new Map<string, PresenceEntryLike>();
+  for (const row of rows) {
+    if (!row || typeof row.userId !== 'string' || row.userId === '') continue;
+    if (selfId != null && row.userId === selfId) continue;
+    const seen = byUser.get(row.userId);
+    if (!seen || (row.connectedAt ?? Infinity) < (seen.connectedAt ?? Infinity)) byUser.set(row.userId, row);
+  }
+  return [...byUser.values()]
+    .sort((a, b) => (a.connectedAt ?? Infinity) - (b.connectedAt ?? Infinity))
+    .map((row) => {
+      const resolved = resolveUser?.(row.userId);
+      const name = row.name ?? resolved?.name;
+      const avatarUrl = row.avatarUrl ?? resolved?.avatarUrl;
+      return {
+        id: row.userId,
+        isOnline: true,
+        ...(name !== undefined ? { name } : {}),
+        ...(avatarUrl !== undefined ? { avatarUrl } : {}),
+      };
+    });
+}
+
+/** The rows in a snapshot frame: the hub's bare array, or `{ users }` / `{ peers }` / `{ presence }`. */
+function rowsOf(data: unknown): PresenceEntryLike[] | null {
+  if (Array.isArray(data)) return data as PresenceEntryLike[];
+  if (data && typeof data === 'object') {
+    for (const key of ['users', 'peers', 'presence'] as const) {
+      const value = (data as Record<string, unknown>)[key];
+      if (Array.isArray(value)) return value as PresenceEntryLike[];
+    }
+  }
+  return null;
+}
+
+export function usePresence(options: UsePresenceOptions): PresenceSubscription {
+  const {
+    channel,
+    roomId,
+    enabled = true,
+    selfId = null,
+    resolveUser,
+    event = 'presence',
+    retryMs = PRESENCE_RETRY_MS,
+    location,
+    createSocket,
+  } = options;
+  const [rows, setRows] = useState<PresenceEntryLike[]>([]);
+  const [connected, setConnected] = useState(false);
+  // The seams and backoff are read through a ref so an inline lambda or array literal in the
+  // caller does not tear the socket down on every render.
+  const seams = useRef({ location, createSocket, retryMs });
+  seams.current = { location, createSocket, retryMs };
+
+  useEffect(() => {
+    const loc = seams.current.location ?? (typeof window !== 'undefined' ? window.location : undefined);
+    if (!enabled || !loc) return;
+    let closed = false;
+    let attempt = 0;
+    let retry: ReturnType<typeof setTimeout> | null = null;
+    let socket: WebSocket | null = null;
+
+    const open = () => {
+      if (closed) return;
+      const url = buildChannelSocketUrl(channel, roomId, loc);
+      const make = seams.current.createSocket ?? ((u: string) => new WebSocket(u));
+      const ws = make(url);
+      socket = ws;
+      ws.addEventListener('open', () => {
+        attempt = 0;
+        setConnected(true);
+      });
+      ws.addEventListener('message', (message) => {
+        const frame = parseWsMessage(String((message as MessageEvent).data));
+        if (!frame || frame.event !== event) return;
+        const next = rowsOf(frame.data);
+        if (next) setRows(next);
+      });
+      ws.addEventListener('close', () => {
+        setConnected(false);
+        setRows([]);
+        if (closed) return;
+        const steps = seams.current.retryMs;
+        const wait = steps[Math.min(attempt, steps.length - 1)] ?? 30_000;
+        attempt += 1;
+        retry = setTimeout(open, wait);
+      });
+      // An `error` is always followed by a `close`; reconnecting from both would schedule two.
+      ws.addEventListener('error', () => ws.close());
+    };
+
+    open();
+    return () => {
+      closed = true;
+      if (retry) clearTimeout(retry);
+      socket?.close();
+      socket = null;
+      setConnected(false);
+      setRows([]);
+    };
+  }, [enabled, channel, roomId, event]);
+
+  const users = useMemo(() => presenceUsers(rows, selfId, resolveUser), [rows, selfId, resolveUser]);
+  return { users, connected };
+}

package/src/react/components/SecretInput.tsx

@@ -1,4 +1,4 @@
-import { type CSSProperties, type ReactNode, useState } from 'react';
+import { type CSSProperties, type KeyboardEvent, type ReactNode, useState } from 'react';
 import { useCopyToClipboard } from '../hooks/useCopyToClipboard.js';
 import { CONTROL_HEIGHT_CLASS, type ControlSize } from '../lib/field.js';
 import { resolveClass, resolveStyle, type StyleableProps } from '../styling.js';
@@ -118,6 +118,11 @@ export interface SecretInputProps extends StyleableProps<SecretInputSlot> {
   'aria-invalid'?: boolean | 'true' | 'false';
   'aria-describedby'?: string;
   autoFocus?: boolean;
+  /** Disable typing while a form submits (the eye stays usable — seeing what you typed is
+   *  harmless while it is in flight). */
+  disabled?: boolean;
+  /** Fires on Enter in THIS field — the login/rotation forms submit from their last field. */
+  onEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
   className?: string;
   style?: CSSProperties;
   /** Container height on the shared control-height scale (`--control-h-*`, task
@@ -149,6 +154,8 @@ export const SecretInput = ({
   'aria-invalid': ariaInvalid,
   'aria-describedby': ariaDescribedBy,
   autoFocus = false,
+  disabled,
+  onEnter,
   className,
   style,
   classNames,
@@ -199,6 +206,10 @@ export const SecretInput = ({
         value={value}
         readOnly={readOnly}
         onChange={onChange ? (e) => onChange(e.target.value) : undefined}
+        onKeyDown={onEnter ? (e) => {
+          if (e.key === 'Enter') onEnter(e);
+        } : undefined}
+        disabled={disabled}
         placeholder={placeholder}
         aria-label={label}
         aria-invalid={ariaInvalid}

package/src/react/components/TooltipImpl.tsx

@@ -44,6 +44,10 @@ export default function TooltipImpl({
   const resolvedSide = placement ?? side ?? 'top';
   const triggerRef = useRef<HTMLElement | null>(null);
   const wasFocusedRef = useRef(false);
+  /** The node a TOUCH disclosure's taps land on — the ⓘ, or the `tap` branch's span. */
+  const touchTriggerRef = useRef<HTMLButtonElement | null>(null);
+  /** True while one of that trigger's own events is being dispatched — see `onTouchOpenChange`. */
+  const inTriggerEventRef = useRef(false);
 
   // Replay the arming gesture. Radix opens on `pointermove` over the trigger and on
   // focus; both already happened before this module existed, so re-dispatch one on
@@ -215,7 +219,16 @@ export default function TooltipImpl({
         sideOffset={6}
         collisionPadding={FLOATING_COLLISION_PADDING}
         style={maxWidth != null ? { maxWidth } : undefined}
-        onPointerDownOutside={() => setOpen(false)}
+        onPointerDownOutside={(e) => {
+          // A touch disclosure's OWN trigger is outside the bubble, but a tap on it is the
+          // toggle's business (it closes an open bubble on its click). Letting the layer
+          // dismiss here as well would close on this pointerdown and re-open on the click.
+          if (!hasHover && touchTriggerRef.current?.contains(e.target as Node)) {
+            e.preventDefault();
+            return;
+          }
+          setOpen(false);
+        }}
         className={cn(
           // NOTE: the bubble is a transient hint and must NEVER be a click target —
           // a focus-opened tooltip (e.g. a prompt auto-focusing its safe default
@@ -276,6 +289,42 @@ export default function TooltipImpl({
 
   const toggle = () => setOpen((o) => !o);
 
+  /*
+   * 🔴 On touch, the TAP owns `open`, and Radix's trigger handlers are told nothing they say.
+   *
+   * Tasks 2082 + 2093, measured in a Pixel 7 context on station's Console: the first tap on
+   * every ⓘ did nothing and the second opened it. A real tap fires `pointerdown → pointerup →
+   * focus → click`. Radix's Trigger clears its pointer-down flag on `pointerup`, so the
+   * `focus` that follows reads as KEYBOARD focus and opens; then this branch's click `toggle`
+   * flips that fresh `true` back to `false`. (Radix also composes `onClose` onto every click
+   * and every `pointerdown` on an open trigger, which is the half the tasks first suspected.)
+   *
+   * So while one of the trigger's own events is being dispatched, `onOpenChange` from Radix
+   * is ignored — the flag is set by the handlers below, which `composeEventHandlers` runs
+   * BEFORE Radix's, and cleared in a microtask, which runs once the whole dispatch returns.
+   * Nothing is `preventDefault`ed, so a `mobile="tap"` trigger that is a link still
+   * navigates. Every OTHER close Radix makes still lands: Escape, scroll, and another
+   * tooltip opening. `e2e/tooltip-tap.spec.ts` is the proof, in the `touch` project — it
+   * cannot be a happy-dom case, because happy-dom fires whatever order a spec writes.
+   */
+  const markTriggerEvent = () => {
+    inTriggerEventRef.current = true;
+    queueMicrotask(() => {
+      inTriggerEventRef.current = false;
+    });
+  };
+  const onTouchOpenChange = (next: boolean) => {
+    if (inTriggerEventRef.current) return;
+    setOpen(next);
+  };
+  const touchTriggerProps = {
+    ref: touchTriggerRef,
+    onPointerDown: markTriggerEvent,
+    onFocus: markTriggerEvent,
+    onBlur: markTriggerEvent,
+    onClick: markTriggerEvent,
+  };
+
   // `icon`: render the trigger as-is plus a tappable ⓘ disclosure that owns the
   // tooltip (so a tap on the trigger still does its own action).
   if (mobile === 'icon') {
@@ -287,8 +336,8 @@ export default function TooltipImpl({
             accidental hover to protect against on a touch device — see
             `lib/hoverIntent.ts`, "delay the accident, never the request". */}
         <RTooltip.Provider delayDuration={HOVER_HINT_INSTANT_MS}>
-          <RTooltip.Root open={open} onOpenChange={setOpen}>
-            <RTooltip.Trigger asChild>
+          <RTooltip.Root open={open} onOpenChange={onTouchOpenChange}>
+            <RTooltip.Trigger asChild {...touchTriggerProps}>
               <button
                 // guardrails-ignore no-raw-action-button: this IS the Tooltip primitive's
                 // own mobile disclosure trigger — Button/IconButton wrap every button in a
@@ -321,8 +370,8 @@ export default function TooltipImpl({
   // as the `icon` branch above — the tap IS the request.
   return (
     <RTooltip.Provider delayDuration={HOVER_HINT_INSTANT_MS}>
-      <RTooltip.Root open={open} onOpenChange={setOpen}>
-        <RTooltip.Trigger asChild>
+      <RTooltip.Root open={open} onOpenChange={onTouchOpenChange}>
+        <RTooltip.Trigger asChild {...touchTriggerProps}>
           {/* On touch, tapping the trigger toggles the tooltip. Radix's Trigger
               (asChild) merges the real keyboard + ARIA interaction onto this element;
               the bare onClick here is only the tap affordance. */}

package/src/react/emoji/EmojiPicker.tsx

@@ -1,15 +1,68 @@
-import { lazy, type ReactNode, Suspense, useMemo } from 'react';
+import { type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { IconButton } from '../components/IconButton.js';
 import { Popover } from '../components/Popover.js';
 import { Skeleton } from '../components/Skeleton.js';
 import { resolveEmojiTheme } from './emojiSearch.js';
 
-// The emoji-mart React picker + its data are BOTH lazy: the component code-splits
-// (only loaded when the panel first mounts) and the ~300 KB data is fetched via the
-// async `data` loader (never statically imported — that would tax every page).
-const Picker = lazy(() => import('@emoji-mart/react'));
+// The emoji-mart engine and its ~300 KB data are BOTH lazy: nothing loads until the panel
+// first mounts, and the data is fetched through emoji-mart's async `data` loader.
 const loadEmojiData = () => import('@emoji-mart/data').then((m) => m.default);
 
+/**
+ * 🔴 emoji-mart's `Picker` custom element, mounted directly — NOT through `@emoji-mart/react`
+ * (cursedbelt 5.0.1). That wrapper is twenty lines (`new Picker({ ...props, ref })` into a div),
+ * and depending on it cost every consumer something either way: as an optional peer it made
+ * `npm install cursedbelt` fail ERESOLVE (it peers `react <=18`; task 2087), and as `unpeered`
+ * (5.0.0) a literal `import('@emoji-mart/react')` broke every clean-install `vite build` that
+ * imports `cursedbelt/react`, because Vite stubs a missing import only for a DECLARED optional
+ * peer. `emoji-mart` itself IS a declared optional peer, so a consumer that never renders this
+ * builds green with it absent, and one that does gets a named error rather than a blank panel.
+ */
+function EmojiMartPanel(props: Record<string, unknown>) {
+  const host = useRef<HTMLDivElement>(null);
+  const picker = useRef<{ update?: (props: object) => void } | null>(null);
+  const latest = useRef(props);
+  latest.current = props;
+  const [ready, setReady] = useState(false);
+  const [failed, setFailed] = useState<Error | null>(null);
+
+  useEffect(() => {
+    let live = true;
+    import('emoji-mart').then(
+      ({ Picker }) => {
+        if (!live || !host.current) return;
+        picker.current = new Picker({ ...latest.current, ref: host }) as { update?: (props: object) => void };
+        setReady(true);
+      },
+      (cause: unknown) => {
+        if (live) {
+          setFailed(
+            new Error("cursedbelt: EmojiPicker needs the optional peer 'emoji-mart' (and '@emoji-mart/data') — run `bun add emoji-mart @emoji-mart/data` in the app that renders it.", { cause }),
+          );
+        }
+      },
+    );
+    return () => {
+      live = false;
+      picker.current = null;
+      host.current?.replaceChildren();
+    };
+  }, []);
+
+  // The wrapper's contract: every render pushes the current props into the live element.
+  useEffect(() => {
+    picker.current?.update?.(props);
+  });
+
+  if (failed) throw failed;
+  return (
+    <>
+      {!ready && <Skeleton className='h-[420px] w-[352px]' />}
+      <div ref={host} />
+    </>
+  );
+}
+
 interface EmojiMartSelectEvent {
   native: string;
   id: string;
@@ -37,7 +90,7 @@ export interface EmojiPickerProps {
   onOpenChange?: (open: boolean) => void;
 }
 
-/** The emoji-mart grid itself, themed + lazy, behind a Suspense skeleton. */
+/** The emoji-mart grid itself, themed + lazy, behind a skeleton until the engine has loaded. */
 function EmojiPanel({
   onSelect,
   theme = 'auto',
@@ -47,19 +100,17 @@ function EmojiPanel({
 }: Pick<EmojiPickerProps, 'onSelect' | 'theme' | 'locale' | 'previewPosition' | 'set'>) {
   const resolvedTheme = useMemo(() => resolveEmojiTheme(theme), [theme]);
   return (
-    <Suspense fallback={<Skeleton className='h-[420px] w-[352px]' />}>
-      <Picker
-        data={loadEmojiData}
-        onEmojiSelect={(e: EmojiMartSelectEvent) => onSelect(e.native)}
-        theme={resolvedTheme}
-        locale={locale}
-        previewPosition={previewPosition}
-        set={set}
-        navPosition='top'
-        skinTonePosition='search'
-        dynamicWidth={false}
-      />
-    </Suspense>
+    <EmojiMartPanel
+      data={loadEmojiData}
+      onEmojiSelect={(e: EmojiMartSelectEvent) => onSelect(e.native)}
+      theme={resolvedTheme}
+      locale={locale}
+      previewPosition={previewPosition}
+      set={set}
+      navPosition='top'
+      skinTonePosition='search'
+      dynamicWidth={false}
+    />
   );
 }
 

package/src/react/index.ts

@@ -47,6 +47,14 @@ export { MessageScroller, type MessageScrollerProps } from './chat/MessageScroll
 export { MessageThread, type MessageThreadProps } from './chat/MessageThread.js';
 export { PresenceRoster, type PresenceRosterProps } from './chat/PresenceRoster.js';
 export { StatusMarker, type StatusMarkerProps } from './chat/StatusMarker.js';
+export {
+  PRESENCE_RETRY_MS,
+  type PresenceEntryLike,
+  type PresenceSubscription,
+  presenceUsers,
+  type UsePresenceOptions,
+  usePresence,
+} from './chat/usePresence.js';
 export { Markdown, type MarkdownProps } from './markdown/Markdown.js';
 export type {
   ChatAttachment,

package/src/react/lib/form.ts

@@ -1,36 +1,6 @@
-import type { DefaultValues, FieldValues, Resolver, UseFormProps } from 'react-hook-form';
+import type { DefaultValues, FieldValues, UseFormProps } from 'react-hook-form';
 import type { z } from 'zod';
-
-/**
- * 🔴 `@hookform/resolvers` is an OPTIONAL peer, and this dynamic import is what makes it
- * one (task 149). `cursedbelt/react` is the barrel all eight apps import; a static
- * `import { zodResolver } from '@hookform/resolvers/zod'` at the top of this file put the
- * package — and its own dependency tree — into every one of those installs, to serve the
- * one function below. `src/barrelsReachNoOptionalPeer.spec.ts` is the check that keeps it
- * out, and a `await import(...)` inside the function that needs it is the shape that spec
- * blesses.
- *
- * Resolved once per process and memoized: RHF calls the resolver on every validation
- * pass, and `zodResolver(schema)` is cheap but the module load is not.
- */
-let zodResolverModule: Promise<typeof import('@hookform/resolvers/zod')> | undefined;
-
-const loadZodResolver = async (): Promise<typeof import('@hookform/resolvers/zod')> => {
-  zodResolverModule ??= import('@hookform/resolvers/zod');
-  try {
-    return await zodResolverModule;
-  } catch (cause) {
-    // 🔴 Loud and actionable, not an unhandled rejection three frames into RHF. A missing
-    // optional peer surfaces here as "the form never validates", which is the worst
-    // possible thing to debug without the package name in the message.
-    zodResolverModule = undefined;
-    throw new Error(
-      "cursedbelt: makeFormConfig() needs the optional peer '@hookform/resolvers' — " +
-        'run `bun add @hookform/resolvers` in the app that renders this form.',
-      { cause },
-    );
-  }
-};
+import { zodResolver } from './zodResolver.js';
 
 /**
  * The canonical react-hook-form config for every cursedbelt form (Wizard,
@@ -53,27 +23,14 @@ const loadZodResolver = async (): Promise<typeof import('@hookform/resolvers/zod
  * const form = useForm<Values>(makeFormConfig(schema, { name: '', tags: [] }));
  * ```
  *
- * 🔴 Needs the optional peer `@hookform/resolvers` installed in the app — RHF resolvers
- * are already async, so the load happens on the first validation rather than at import.
+ * The resolver is this package's own (`./zodResolver.ts`, 5.0.1) — there is nothing for the
+ * app to install, and nothing for a bundler to fail to resolve.
  */
 export function makeFormConfig<TFieldValues extends FieldValues>(
   schema: z.ZodType,
   defaults: TFieldValues,
 ): UseFormProps<TFieldValues> {
-  // Built once per form, then reused across every validation pass.
-  let resolved: Resolver<TFieldValues> | undefined;
-  const resolver: Resolver<TFieldValues> = async (values, context, options) => {
-    if (!resolved) {
-      const { zodResolver } = await loadZodResolver();
-      // zodResolver's generics don't line up with the caller's value type (the schema
-      // input/output may differ from TFieldValues); the runtime resolver is correct, so
-      // cast through the overload's param/return types rather than over-genericize.
-      resolved = zodResolver(
-        schema as Parameters<typeof zodResolver>[0],
-      ) as unknown as Resolver<TFieldValues>;
-    }
-    return resolved(values, context, options);
-  };
+  const resolver = zodResolver<TFieldValues>(schema);
 
   return {
     resolver,