@weft-js/warp 0.0.0-stage → 0.1.0

package/src/collab/ShareDialog.tsx

@@ -0,0 +1,118 @@
+import { CopyIcon, LinkIcon } from '@weft-js/warp-icons'
+import { announce, arrivalTracker, installSweep, type Peer } from '@weft-js/warp-core'
+import { derived, state, untrack, type State } from '@weft-js/core'
+import { Button } from '../Button'
+import { ComboField } from '../Combobox'
+import { Modal } from '../Modal'
+import { CompactSelect } from '../Select'
+import { Tag } from '../Tag'
+import { PeerAvatar, read, type Live } from './peer'
+import '../styles'
+import '@weft-js/warp-core/styles/app/tokens.css'
+import '@weft-js/warp-core/styles/app/base.css'
+import '@weft-js/warp-core/styles/app/share.css'
+import '@weft-js/warp-core/styles/components/share.css'
+
+
+/** What someone may do with the document. */
+export type ShareRole = 'viewer' | 'commenter' | 'editor' | 'owner'
+const ROLES: [ShareRole, string][] = [['viewer', 'Viewer'], ['commenter', 'Commenter'], ['editor', 'Editor']]
+/** Someone the document is shared with. */
+export type ShareMember = Peer & { email: string; role: ShareRole }
+/** Someone it could be shared with. */
+export type ShareContact = Peer & { email: string }
+/** Who a link lets in, and as what. */
+export interface ShareLink { access: 'restricted' | 'anyone'; role: ShareRole }
+
+/** Props for ShareDialog. */
+export interface ShareDialogProps {
+  open: State<boolean>
+  /** The object's title: "Q4 brief". */
+  title: string
+  members: Live<ShareMember[]>
+  /** People the invite field suggests; any email address works too. */
+  people?: ShareContact[]
+  link: Live<ShareLink>
+  /** The URL Copy link writes. */
+  url: string
+  onInvite: (emails: string[], role: ShareRole) => void
+  /** A role, or null to remove the person. */
+  onRoleChange: (m: ShareMember, role: ShareRole | null) => void
+  onLinkAccess: (link: ShareLink) => void
+}
+
+const ROLE_OPTIONS = ROLES.map(([value, label]) => ({ value, label }))
+const MEMBER_OPTIONS = [...ROLE_OPTIONS, { value: 'remove', label: 'Remove' }]
+const ACCESS_OPTIONS = [{ value: 'restricted', label: 'Restricted' }, { value: 'anyone', label: 'Anyone with link' }]
+
+/**
+ * The share dialog (07 §6.2): the invite combobox with chips, a role per person, link access, Copy link with one
+ * confirm sweep, and invited rows arriving.
+ */
+export function ShareDialog({ open, title, members, people, link, url, onInvite, onRoleChange, onLinkAccess }: ShareDialogProps) {
+  const list = derived(() => read(members))
+  const access = derived(() => read(link))
+  const mark = arrivalTracker()
+  const fresh = derived(() => mark(list.value.map(m => m.id)))
+  const typed = state('')
+  const chips = state<string[]>([])
+  const role = state<ShareRole>('editor')
+  const copied = state(false)
+  let copy: HTMLElement | undefined
+  const add = (email: string) => {
+    const e = email.trim()
+    if (e && !chips.value.includes(e)) chips.value = [...chips.value, e]
+    typed.value = ''
+  }
+  // oxlint-disable-next-line typescript/require-await -- `find` is typed to return a promise, and Promise.resolve costs bytes for nothing
+  const find = async (q: string) => untrack(() => (people ?? []).filter(p => `${p.name} ${p.email}`.toLowerCase().includes(q.toLowerCase())))
+  const invite = () => {
+    const all = typed.value.includes('@') ? [...new Set([...chips.value, typed.value.trim()])] : chips.value
+    if (!all.length) return
+    onInvite(all, role.value)
+    announce(copy!.ownerDocument, `Invited ${all.length === 1 ? all[0] : `${all.length} people`}`)
+    chips.value = []
+    typed.value = ''
+  }
+  return (
+    <Modal open={open} title={`Share “${title}”`} footer={<Button onClick={() => (open.value = false)}>Done</Button>}>
+      <div data-scope="share">
+        <form style="display:flex;gap:8px;align-items:center" onSubmit={(e: Event) => { e.preventDefault(); if (typed.value.includes('@')) add(typed.value); else invite() }}>
+          <div style="flex:1;min-inline-size:0">
+            <ComboField label="Add people or email" minChars={1} text={() => typed.value} onText={t => (typed.value = t)} find={find} row={(p: ShareContact) => ({ main: p.name, sub: p.email })} onPick={(p: ShareContact) => add(p.email)} />
+          </div>
+          <CompactSelect label="Role for new people" value={role.value} options={ROLE_OPTIONS} onValueChange={v => (role.value = v as ShareRole)} />
+          <Button onClick={invite}>Invite</Button>
+        </form>
+        {chips.value.length > 0 && <div style="display:flex;flex-wrap:wrap;gap:6px;margin-block-start:8px">{chips.value.map(c => <Tag key={c} onRemove={() => (chips.value = chips.value.filter(x => x !== c))}>{c}</Tag>)}</div>}
+        <div>
+          {list.value.map(m => (
+            <div key={m.id} data-part="person" data-arrive={fresh.value.includes(m.id) ? '' : undefined}>
+              <PeerAvatar peer={m} size="sm" />
+              <span>{m.name}<small>{m.email}</small></span>
+              {m.role === 'owner'
+                ? <span>Owner</span>
+                : <>
+                    <CompactSelect label={`Role for ${m.name}`} value={m.role} options={MEMBER_OPTIONS} onValueChange={v => onRoleChange(m, v === 'remove' ? null : (v as ShareRole))} />
+                  </>}
+            </div>
+          ))}
+        </div>
+        <div data-part="link">
+          <LinkIcon />
+          <CompactSelect label="Link access" value={access.value.access} options={ACCESS_OPTIONS} onValueChange={v => onLinkAccess({ ...access.value, access: v as ShareLink['access'] })} />
+          {access.value.access === 'anyone' && <CompactSelect label="Link role" value={access.value.role} options={ROLE_OPTIONS} onValueChange={v => onLinkAccess({ ...access.value, role: v as ShareRole })} />}
+          <span data-part="spacer" style="flex:1"></span>
+          <span ref={n => (copy = n)} style="display:contents">
+            <Button emphasis="outline" tone="neutral" size="sm" onClick={(e: MouseEvent) => {
+              void navigator.clipboard?.writeText(url).catch(() => {})
+              copied.value = true
+              installSweep().confirm(e.currentTarget as Element)
+              announce((e.currentTarget as Element).ownerDocument, 'Link copied')
+            }}><CopyIcon /> {copied.value ? 'Copied' : 'Copy link'}</Button>
+          </span>
+        </div>
+      </div>
+    </Modal>
+  )
+}

package/src/collab/Status.tsx

@@ -0,0 +1,42 @@
+import { AlertIcon, CheckIcon, ClockIcon } from '@weft-js/warp-icons'
+import { announce, firstName, type Peer } from '@weft-js/warp-core'
+import { derived } from '@weft-js/core'
+import { Alert } from '../Alert'
+import { Button } from '../Button'
+import '../styles'
+import '@weft-js/warp-core/styles/app/tokens.css'
+import '@weft-js/warp-core/styles/app/sync.css'
+import '@weft-js/warp-core/styles/app/conflict.css'
+
+/** Where a document's saving stands. */
+export type SyncState = 'saved' | 'saving' | 'offline'
+const SYNC = { saved: 'Saved', saving: 'Saving…', offline: 'Offline · changes kept' } as const
+
+/** Next to the title (07 §6.1): "Saved", "Saving…", "Offline · changes kept"; map `channel.status` onto it. */
+export function SyncIndicator({ state }: { state: SyncState }) {
+  const icon = derived(() => (state === 'saved' ? 'check' : state === 'saving' ? 'clock' : 'alert'))
+  return <span data-scope="sync" data-state={state} role="status">{icon.value === 'check' ? <CheckIcon /> : icon.value === 'clock' ? <ClockIcon /> : <AlertIcon />} {SYNC[state]}</span>
+}
+
+/**
+ * A conflict (07 §6.1): a caution alert with both versions side by side, and Use theirs, Keep mine, Compare. Nothing
+ * is discarded silently: the caller holds both values until one of these fires.
+ */
+export function ConflictAlert({ field, peer, time, theirs, yours, onUseTheirs, onKeepMine, onCompare }: { field: string; peer: Peer; time: string; theirs: unknown; yours: unknown; onUseTheirs: () => void; onKeepMine: () => void; onCompare?: () => void }) {
+  let box: HTMLDivElement | undefined
+  const settle = (fn: () => void) => () => { fn(); if (box) announce(box.ownerDocument, 'Conflict resolved') }
+  const compare = derived(() => onCompare !== undefined)
+  const first = () => firstName(peer.name)
+  const actions = derived(() => <><Button size="sm" onClick={settle(onUseTheirs)}>Use theirs</Button><Button size="sm" emphasis="outline" tone="neutral" onClick={settle(onKeepMine)}>Keep mine</Button>{compare.value && <Button size="sm" emphasis="ghost" tone="neutral" onClick={() => onCompare!()}>Compare</Button>}</>)
+  return (
+    <div ref={n => (box = n)}>
+      <Alert tone="caution" live title={`${first()} changed “${field}” while you were editing`} actions={actions.value}>
+        Pick a version. Nothing is lost either way.
+        <div data-scope="conflict">
+          <div><small>Theirs · {first()} · {time}</small><ins>{theirs}</ins></div>
+          <div><small>Yours · unsaved</small><del>{yours}</del></div>
+        </div>
+      </Alert>
+    </div>
+  )
+}

package/src/collab/SyncedForm.tsx

@@ -0,0 +1,19 @@
+import { syncedForm, type FormOp } from '@weft-js/warp-core'
+import { derived } from '@weft-js/core'
+import { use } from '@weft-js/warp-core/weft'
+import { read, type Live } from './peer'
+import '../styles'
+import '@weft-js/warp-core/styles/app/tokens.css'
+import '@weft-js/warp-core/styles/app/base.css'
+import '@weft-js/warp-core/styles/app/synced-form.css'
+
+/**
+ * All-inputs sync (07 §6.4): every named control inside is shared. `ops` are the channel's remote edits, oldest first;
+ * `onSend` hears each local one. A remote edit rings the field and names the peer for 1.4 s; a focused field queues it.
+ */
+export function SyncedForm({ ops, onSend, label, children }: { ops: Live<FormOp[]>; onSend?: ((name: string, value: string | boolean) => void) | undefined; label: string; children?: unknown }) {
+  const list = derived(() => read(ops))
+  let form: HTMLFormElement | undefined
+  use(syncedForm, () => form, () => ({ ops: list.value, onSend }))
+  return <form ref={n => (form = n)} data-scope="synced-form" aria-label={label} onSubmit={(e: Event) => e.preventDefault()}>{children}</form>
+}

package/src/collab/Thread.tsx

@@ -0,0 +1,273 @@
+import { AlertIcon, CheckIcon, ChecksIcon, ClockIcon, CopyIcon, QuoteIcon, SmileIcon } from '@weft-js/warp-icons'
+import { announce, arrivalTracker, burst, firstName, joinNames, messageLog, quoteText, reactionName, STICK_PX, textParts, threadRows, typingLine, uid, type ChatMessage, type MessageReaction, type ThreadRow } from '@weft-js/warp-core'
+import { derived, onCleanup, onMount, state, untrack, watch } from '@weft-js/core'
+import { Text } from '@weft-js/core/text'
+import { Button } from '../Button'
+import { use } from '@weft-js/warp-core/weft'
+import { VirtualList, type VirtualControl } from '../VirtualList'
+import { Composer, TypingIndicator, type ComposerProps, type ComposerSend, type QuoteDraftValue } from './Composer'
+import { PeerAvatar, read, SWEEP, type Live } from './peer'
+import '../styles'
+import '@weft-js/warp-core/styles/components/button.css'
+import '@weft-js/warp-core/styles/app/tokens.css'
+import '@weft-js/warp-core/styles/app/base.css'
+import '@weft-js/warp-core/styles/app/thread.css'
+import '@weft-js/warp-core/styles/app/message.css'
+import '@weft-js/warp-core/styles/app/reactions.css'
+import '@weft-js/warp-core/styles/app/thread-replies.css'
+import '@weft-js/warp-core/styles/app/avatar-stack.css'
+
+
+/** Props for Message. */
+export interface MessageProps {
+  message: ChatMessage
+  continued?: boolean
+  /** The last of mine: only it carries Sent or Read. */
+  last?: boolean
+  arrive?: boolean
+  /** The quoted source, read live. */
+  source?: ChatMessage | undefined
+  onRetry?: ((m: ChatMessage) => void) | undefined
+  onReact?: (m: ChatMessage, r: MessageReaction | null) => void
+  onReplies?: (m: ChatMessage) => void
+}
+
+/**
+ * One message (07 §5.1, §5.2): avatar, author, Actions toolbar, bubble (quote, text with mention chips), Jump to
+ * original, attachment, reactions, thread replies, delivery. Continued messages hide avatar and author.
+ */
+export function Message({ message, continued, last, arrive, source, onRetry, onReact, onReplies }: MessageProps) {
+  const who = () => (message.mine ? 'You' : message.author.name)
+  const quoted = derived(() => {
+    const q = message.quote
+    if (!q) return null
+    const src = source
+    const author = src ? (src.mine ? 'You' : src.author.name) : q.author
+    const deleted = q.deleted || (!src && !q.author && !q.channel)
+    return { text: q.text, author, by: deleted ? 'Original message deleted' : q.channel ? `In ${q.channel}${author ? ` · ${author}` : ''}` : `${author} · ${src?.time ?? q.time ?? ''}`, ref: src ? q.ref : undefined, deleted }
+  })
+  const parts = derived(() => textParts(message.text, message.mentions))
+  const state_ = derived(() => message.state)
+  const delivery = derived(() => {
+    const s = state_.value
+    return !message.mine ? null : s === 'failed' || s === 'sending' ? s : last ? (s === 'read' ? 'read' : 'sent') : null
+  })
+  return (
+    <div
+      data-scope="message"
+      data-focus=""
+      role="article"
+      tabindex="-1"
+      data-mid={message.id}
+      aria-label={`${who()}, ${message.time}${quoted.value?.author ? `, quoting ${quoted.value.author}` : ''}`}
+      data-mine={message.mine ? '' : undefined}
+      data-continued={continued ? '' : undefined}
+      data-state={state_.value}
+      data-arrive={arrive ? '' : undefined}
+      data-mentions-me={message.mentions?.includes('you') ? '' : undefined}
+    >
+      {!message.mine && <PeerAvatar peer={message.author} />}
+      <div data-part="body">
+        {!continued && !message.mine && <div data-part="by"><b>{message.author.name}</b><time>{message.time}</time></div>}
+        <div data-part="actions" role="toolbar" aria-label="Message actions">
+          <Button emphasis="ghost" tone="neutral" size="sm" label="Quote reply" data-icon-only="" data-quote="" tabindex="-1" aria-keyshortcuts="Q"><QuoteIcon /></Button>
+          <Button emphasis="ghost" tone="neutral" size="sm" label="Copy text" data-icon-only="" data-copytext="" tabindex="-1"><CopyIcon /></Button>
+        </div>
+        <div data-part="bubble" data-sweep="">
+          <SWEEP />
+          {quoted.value && (
+            <blockquote data-part="quote">
+              <span data-part="quote-by"><span data-part="sr-only">Quoting </span>{quoted.value.by}</span>
+              {!quoted.value.deleted && <span data-part="quote-text">{quoted.value.text}</span>}
+            </blockquote>
+          )}
+          {message.streaming
+            ? <Text stream as="div">{message.text}</Text>
+            : <span data-part="text" data-measure="">{parts.value.map(p => p.mention ? <span key={p.at} data-part="mention">{p.text}</span> : <span key={p.at}>{p.text}</span>)}</span>}
+        </div>
+        {quoted.value?.ref && <Button emphasis="link" tone="neutral" data-part="quote-jump" data-jump={quoted.value.ref}>Jump to original</Button>}
+        {message.attachment && <div data-part="attachment"><i>{message.attachment.kind}</i><b>{message.attachment.name}</b><small>{message.attachment.meta}</small></div>}
+        {(message.reactions?.length ?? 0) > 0 && (
+          <div data-scope="reactions">
+            {message.reactions!.map(r => (
+              <button key={r.emoji} type="button" aria-pressed={r.mine ? 'true' : 'false'} aria-label={reactionName(r)} onClick={() => onReact?.(message, r)}>{r.emoji} <span>{r.count}</span></button>
+            ))}
+            <button type="button" aria-label="Add reaction" onClick={() => onReact?.(message, null)}><SmileIcon /></button>
+          </div>
+        )}
+        {message.replies && (
+          <button data-scope="thread-replies" type="button" onClick={() => onReplies?.(message)}>
+            <span data-scope="avatar-stack">{(message.replies.people ?? []).map(p => <PeerAvatar key={p.id} peer={p} />)}</span>
+            {message.replies.count} {message.replies.count === 1 ? 'reply' : 'replies'}{message.replies.last ? ` · last ${message.replies.last}` : ''}
+          </button>
+        )}
+        {delivery.value === 'failed' && <span data-part="status"><AlertIcon /> Not sent. <Button emphasis="link" tone="critical" onClick={() => onRetry?.(message)}>Retry</Button></span>}
+        {delivery.value === 'sending' && <span data-part="status"><ClockIcon /> Sending…</span>}
+        {delivery.value === 'sent' && <span data-part="status"><CheckIcon /> Sent {message.time}</span>}
+        {delivery.value === 'read' && <span data-part="status"><ChecksIcon /> Read {message.readAt ?? message.time}</span>}
+      </div>
+    </div>
+  )
+}
+
+type MessageRow = Extract<ThreadRow, { kind: 'message' }>
+/** One row of the window: a message, and the divider above it if it has one. */
+type Entry = { id: string; row: MessageRow; divider?: Exclude<ThreadRow, MessageRow> | undefined }
+
+function entries(rows: readonly ThreadRow[]) {
+  const out: Entry[] = []
+  let divider: Entry['divider']
+  for (const r of rows) {
+    if (r.kind !== 'message') { divider = r; continue }
+    out.push({ id: r.id, row: r, divider })
+    divider = undefined
+  }
+  return out
+}
+
+const plain = (m: ChatMessage) => !m.quote && !m.attachment && !m.reactions?.length && !m.replies && !m.mentions?.length && !m.streaming
+/** Rows that look the same around their text share one measurement. Anything richer is measured when it renders. */
+function shape({ row: { message: m, continued, last }, divider }: Entry) {
+  if (!plain(m)) return 'rich'
+  const status = !m.mine ? '' : m.state === 'failed' || m.state === 'sending' ? m.state : last ? 'last' : ''
+  return `${m.mine ? 'm' : continued ? 'c' : 'h'}${divider?.unread ? 'u' : divider ? 'd' : ''}${status}`
+}
+
+function Divider({ d }: { d: NonNullable<Entry['divider']> }) {
+  return <div data-part="divider" data-unread={d.unread ? '' : undefined} role="separator" aria-label={d.unread ? 'New messages' : d.label}>{d.label}</div>
+}
+
+/** Props for Thread. */
+export interface ThreadProps {
+  /** Names the region: "calendar-engine channel". */
+  label: string
+  messages: Live<ChatMessage[]>
+  /** The first unread message: opening lands on the divider before it. */
+  unreadFrom?: string | null
+  /** Names typing now. */
+  typing?: Live<string[]>
+  /** The header's content (`data-part="app-bar"`): channel, members, stack, call, search. */
+  header?: unknown
+  /** A log height, if the parent doesn't size the thread. */
+  height?: string
+  /** No `onSend`, no composer: a read-only log. */
+  onSend?: ((m: ComposerSend) => void) | undefined
+  onRetry?: ((m: ChatMessage) => void) | undefined
+  onReact?: (m: ChatMessage, r: MessageReaction | null) => void
+  onReplies?: (m: ChatMessage) => void
+  /** Near the top: load older messages, and prepend them to `messages`. */
+  onOlder?: () => void
+  onDrift?: ((index: number, predicted: number, actual: number) => void) | undefined
+  control?: ((c: VirtualControl) => void) | undefined
+  composer?: Omit<ComposerProps, 'onSend' | 'quote' | 'input'>
+}
+
+/**
+ * A conversation (07 §5, §5.5): the log, a window of rows, so 100,000 messages cost what 20 do (role=log; day and unread
+ * dividers, grouping, stick to bottom, Jump to latest with the new count, roving messages and Q), typing line, composer
+ * with the quote draft. New messages are announced as one summary after 1 s of quiet, a failed send assertively once.
+ * Plain messages have exact heights from `text.measure`; rows are keyed, so live updates patch in place.
+ */
+export function Thread({ label, messages, unreadFrom, typing, header, height, onSend, onRetry, onReact, onReplies, onOlder, onDrift, control, composer }: ThreadProps) {
+  const id = uid('thread')
+  const list = derived(() => read(messages))
+  const rows = derived(() => entries(threadRows(list.value, unreadFrom)))
+  const ids = derived(() => list.value.map(m => m.id))
+  const mark = arrivalTracker()
+  const fresh = derived(() => mark(ids.value))
+  const stuck = state(true)
+  const unseen = state(0)
+  const draft = state<QuoteDraftValue | null>(null)
+  const typingNames = derived(() => read(typing) ?? [])
+  const head = derived(() => header)
+  let root: HTMLElement | undefined
+  let box: HTMLTextAreaElement | undefined
+  let win: VirtualControl | undefined
+  const doc = () => root!.ownerDocument
+  const find = (mid?: string) => (mid ? list.value.find(m => m.id === mid) : undefined)
+
+  onMount(() => {
+    const told = burst<string>(names => {
+      const who = [...new Set(names)]
+      announce(doc(), names.length === 1 ? `New message from ${who[0]}` : who.length === 1 ? `${names.length} new messages from ${who[0]}` : `${names.length} new messages from ${joinNames(who)}`)
+    })
+    const failed = new Set(untrack(() => list.value.filter(m => m.state === 'failed').map(m => m.id)))
+    let seen = new Set(untrack(() => ids.value))
+    onCleanup(told.cancel)
+    watch(() => list.value, l => {
+      for (const m of l) {
+        if (!seen.has(m.id) && !m.mine) told.push(firstName(m.author.name))
+        if (m.state === 'failed' && !failed.has(m.id)) { failed.add(m.id); announce(doc(), 'Message not sent', true) }
+        if (m.state !== 'failed') failed.delete(m.id)
+      }
+      const last = l.at(-1)
+      if (last && !seen.has(last.id)) { // a prepend of older messages isn't an arrival
+        const known = l.findIndex(m => seen.has(m.id))
+        const arrived = l.slice(l.findLastIndex(m => seen.has(m.id)) + 1)
+        if (arrived.some(m => m.mine)) queueMicrotask(() => win?.scrollToEnd())
+        else if (known >= 0 && !stuck.value) unseen.value += arrived.length
+      }
+      seen = new Set(l.map(m => m.id))
+    })
+  })
+  use(messageLog, () => root?.querySelector<HTMLElement>('[data-part="log"]') ?? undefined, () => ({
+    onQuote(mid: string, selection: string) {
+      const m = find(mid)
+      if (!m) return
+      const author = m.mine ? 'You' : m.author.name
+      draft.value = { ref: m.id, author, time: m.time, text: quoteText(m, selection) }
+      box?.focus()
+      announce(doc(), `Quoting ${author}. Escape removes the quote.`)
+    },
+    ids: () => untrack(() => ids.value),
+    reveal: (mid: string) => win?.focus(mid),
+  }))
+  const latest = () => {
+    win?.scrollToEnd()
+    const last = ids.value.at(-1)
+    if (last !== undefined) win?.focus(last)
+  }
+  const take = (c: VirtualControl) => {
+    win = c
+    control?.(c)
+    const open = untrack(() => unreadFrom)
+    if (open) queueMicrotask(() => c.scrollTo(open))
+  }
+  const row = (e: () => Entry) => {
+    const source = derived(() => find(e().row.message.quote?.ref))
+    return <>
+      {e().divider && <Divider d={e().divider!} />}
+      <Message message={e().row.message} continued={e().row.continued} last={e().row.last} arrive={fresh.value.includes(e().id)} source={source.value} onRetry={m => onRetry?.(m)} onReact={(m, r) => onReact?.(m, r)} onReplies={m => onReplies?.(m)} />
+    </>
+  }
+  return (
+    <section ref={n => (root = n)} data-scope="thread" data-part="root" aria-label={label} id={id} style={height ? `block-size:${height}` : undefined}>
+      {head.value !== undefined ? <div data-part="app-bar">{head.value}</div> : <span></span>}
+      <VirtualList
+        part="log"
+        role="log"
+        bareRows
+        open
+        tabindex={-1}
+        label="Messages"
+        items={rows.value}
+        rowKey={e => e.id}
+        text={e => (plain(e.row.message) ? e.row.message.text : null)}
+        variant={shape}
+        estimate={64}
+        gap={2}
+        stick={STICK_PX}
+        from={untrack(() => (unreadFrom ? 'start' : 'end'))}
+        onStart={onOlder}
+        onStick={s => { stuck.value = s; if (s) unseen.value = 0 }}
+        onDrift={onDrift}
+        control={take}
+      >{row}</VirtualList>
+      {!stuck.value && <Button size="sm" data-part="jump" onClick={latest}>Jump to latest{unseen.value > 0 ? ` · ${unseen.value} new` : ''}</Button>}
+      <div>
+        <TypingIndicator text={typingLine(typingNames.value)} />
+        {onSend && <Composer {...(composer ?? { label: `Message ${label}` })} quote={draft} onSend={m => onSend(m)} input={el => (box = el)} />}
+      </div>
+    </section>
+  )
+}

package/src/collab/VersionHistory.tsx

@@ -0,0 +1,49 @@
+import { announce } from '@weft-js/warp-core'
+import { derived, state } from '@weft-js/core'
+import { Button } from '../Button'
+import { Modal } from '../Modal'
+import { read, type Live } from './peer'
+import '../styles'
+import '@weft-js/warp-core/styles/app/tokens.css'
+import '@weft-js/warp-core/styles/app/versions.css'
+
+/** One saved version of a document. */
+export interface Version { id: string; title: string; /** "Mei · 10:02" */ meta: string; named?: boolean | undefined; current?: boolean | undefined }
+
+/**
+ * Version history (07 §6.2): named versions carry the accent dot. A version previews read-only (`preview` draws it,
+ * with its diff tint), then Restore asks in a dialog; restoring makes a new version, so `onRestore` loses nothing.
+ */
+export function VersionHistory({ versions, preview, onPreview, onRestore, label = 'Version history' }: { versions: Live<Version[]>; preview?: (v: Version) => unknown; onPreview?: (v: Version) => void; onRestore: (v: Version) => void; label?: string | undefined }) {
+  const list = derived(() => read(versions))
+  const shown = state<Version | null>(null)
+  const asking = state<Version | null>(null)
+  const viewOpen = state(false)
+  const askOpen = state(false)
+  let root: HTMLElement | undefined
+  const look = (v: Version) => { if (v.current) return; shown.value = v; viewOpen.value = true; onPreview?.(v) }
+  const ask = (v: Version) => { asking.value = v; viewOpen.value = false; askOpen.value = true }
+  const restore = () => {
+    const v = asking.value!
+    askOpen.value = false
+    onRestore(v)
+    if (root) announce(root.ownerDocument, `Restored ${v.title} as a new version`)
+  }
+  return (
+    <>
+      <ul ref={n => (root = n)} data-scope="versions" aria-label={label}>
+        {list.value.map(v => (
+          <li key={v.id} aria-current={v.current ? 'true' : undefined} data-named={v.named ? '' : undefined} onClick={() => look(v)}>
+            <i></i>
+            <span>{v.title}<small>{v.meta}</small></span>
+            {!v.current && <span><Button emphasis="ghost" tone="neutral" size="sm" aria-label={`Preview ${v.title}`} onClick={(e: MouseEvent) => { e.stopPropagation(); look(v) }}>Preview</Button><Button emphasis="ghost" tone="neutral" size="sm" aria-label={`Restore ${v.title}`} onClick={(e: MouseEvent) => { e.stopPropagation(); ask(v) }}>Restore</Button></span>}
+          </li>
+        ))}
+      </ul>
+      <Modal open={viewOpen} title={`Preview · ${shown.value?.title ?? ''}`} size="lg" footer={<Button onClick={() => ask(shown.value!)}>Restore</Button>}>
+        {shown.value && preview ? <div inert>{preview(shown.value)}</div> : <p>{shown.value?.meta}</p>}
+      </Modal>
+      <Modal open={askOpen} alert title={`Restore “${asking.value?.title ?? ''}”?`} description="Restoring creates a new version. Nothing is lost." footer={<><Button emphasis="outline" tone="neutral" autofocus onClick={() => (askOpen.value = false)}>Cancel</Button><Button onClick={restore}>Restore</Button></>} />
+    </>
+  )
+}

package/src/collab/ViewportRail.tsx

@@ -0,0 +1,49 @@
+import { firstName, joinNames, peerColor, type Peer } from '@weft-js/warp-core'
+import { derived } from '@weft-js/core'
+import { PeerAvatar, read, type Live } from './peer'
+import '../styles'
+import '@weft-js/warp-core/styles/app/tokens.css'
+import '@weft-js/warp-core/styles/app/base.css'
+import '@weft-js/warp-core/styles/app/avatar.css'
+import '@weft-js/warp-core/styles/app/viewport-rail.css'
+import '@weft-js/warp-core/styles/app/section-peers.css'
+
+/** A peer's place in the document. */
+export type ViewportPeer = Peer & { /** Viewport top and height, 0–1 of the document. */ top: number; height: number }
+
+/**
+ * LiveViewport (07 §6.1): a rail of the document with a box per viewport in the peer's colour. A picture, unless
+ * `onJump` makes each box a button.
+ */
+export function ViewportRail({ peers, self, onJump, label = 'Where people are looking' }: { peers: Live<ViewportPeer[]>; self?: { top: number; height: number }; onJump?: (p: ViewportPeer) => void; label?: string | undefined }) {
+  const list = derived(() => read(peers))
+  const canJump = derived(() => onJump !== undefined)
+  return (
+    <div data-scope="viewport-rail" role={canJump.value ? 'group' : 'img'} aria-label={label}>
+      {self && <i data-self="" style={`--_t:${self.top};--_h:${self.height}`}></i>}
+      {list.value.map(p => (
+        <i
+          key={p.id}
+          data-presence-color={peerColor(p)}
+          style={`--_t:${p.top};--_h:${p.height}`}
+          role={canJump.value ? 'button' : undefined}
+          tabindex={canJump.value ? 0 : undefined}
+          aria-label={canJump.value ? `Jump to ${p.name}` : undefined}
+          onClick={() => onJump?.(p)}
+          onKeyDown={(e: KeyboardEvent) => { if (canJump.value && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); onJump?.(p) } }}
+        ></i>
+      ))}
+    </div>
+  )
+}
+
+/** LiveSection (07 §6.1): who is reading this section, beside its heading. */
+export function SectionPeers({ peers }: { peers: Live<Peer[]> }) {
+  const list = derived(() => read(peers))
+  const names = derived(() => list.value.map(p => firstName(p.name)))
+  return (
+    <span data-scope="section-peers" role="img" aria-label={`${joinNames(names.value)} ${names.value.length === 1 ? 'is' : 'are'} here`}>
+      {list.value.map(p => <PeerAvatar key={p.id} peer={p} />)}
+    </span>
+  )
+}

package/src/collab/index.ts

@@ -0,0 +1,16 @@
+// The collab pack: see docs/design/warp. One file per component family; each imports only its own CSS.
+export { AutoTrack } from './AutoTrack'
+export { CommentAnchor, CommentRail, CommentThread, type Comment, type CommentThreadData } from './Comments'
+export { Composer, TypingIndicator, type ComposerFile, type ComposerProps, type ComposerSend, type Mentionable, type QuoteDraftValue } from './Composer'
+export { ConversationList, type ChatConversation } from './ConversationList'
+export { Cursors, PeerMark, PeerSelection } from './Cursors'
+export { DataIntegrity, type IntegrityEvent } from './DataIntegrity'
+export { Kanban, type KanbanCardData, type KanbanColumn } from './Kanban'
+export { LockedField, LockIndicator } from './Lock'
+export { Following, PresenceStack } from './PresenceStack'
+export { ShareDialog, type ShareContact, type ShareDialogProps, type ShareLink, type ShareMember, type ShareRole } from './ShareDialog'
+export { ConflictAlert, SyncIndicator, type SyncState } from './Status'
+export { SyncedForm } from './SyncedForm'
+export { Message, Thread, type MessageProps, type ThreadProps } from './Thread'
+export { SectionPeers, ViewportRail, type ViewportPeer } from './ViewportRail'
+export { VersionHistory, type Version } from './VersionHistory'

package/src/collab/peer.tsx

@@ -0,0 +1,16 @@
+// What the collab pack shares: a peer's avatar in their presence colour, and the props that may be a State or a value.
+import { peerColor, type Peer } from '@weft-js/warp-core'
+import { Box, type State } from '@weft-js/core'
+import { Avatar } from '../parts'
+
+export type Live<T> = State<T> | T
+export const read = <T,>(v: Live<T>): T => (v instanceof Box ? v.value : (v as T))
+
+export const tint = (n: number) => `--_bg:color-mix(in oklab,var(--warp-color-data-${n}) 26%,var(--warp-color-surface-raised))`
+
+/** A peer's Avatar: the tint and, with `ring`, the presence colour ring. */
+export function PeerAvatar({ peer, size, ring, ...rest }: { peer: Peer; size?: 'sm' | 'md' | 'lg' | undefined; ring?: boolean; [attr: string]: unknown }) {
+  return <Avatar name={peer.name} size={size} presence={ring ? peerColor(peer) : undefined} data-presence-color={peerColor(peer)} style={tint(peerColor(peer))} {...rest} />
+}
+
+export const SWEEP = () => <><span data-part="sweep-base" aria-hidden="true"></span><span data-part="sweep" aria-hidden="true"></span></>

package/src/fields.ts

@@ -0,0 +1,5 @@
+// The input family's shared CSS: its plumbing and the field shell (warp-inputs.css §0–1).
+import './styles'
+import '@weft-js/warp-core/styles/inputs/base.css'
+import '@weft-js/warp-core/styles/inputs/field.css'
+import '@weft-js/warp-core/styles/inputs/keyframes.css'

package/src/flow/AuthScreen.tsx

@@ -0,0 +1,40 @@
+import { WeaveIcon } from '@weft-js/warp-icons'
+import '../styles'
+import '@weft-js/warp-core/styles/flows/tokens.css'
+import '@weft-js/warp-core/styles/flows/base.css'
+import '@weft-js/warp-core/styles/flows/auth.css'
+
+const THREADS = Array.from({ length: 24 }, (_, i) => ({ x: 12 + i * 26 }))
+const WEFT = [[180, 0.15, 0.75], [300, 0.35, 0.95], [420, 0.05, 0.55], [560, 0.25, 0.85]].map(([y, a, b], i) => ({ i, d: `M${a! * 640} ${y} H${b! * 640}` }))
+
+/** The woven lines of the brand panel: warp threads, and weft that draws once. */
+const WeaveArt = () => (
+  <svg data-part="weave" viewBox="0 0 640 800" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
+    {THREADS.map(t => <line key={t.x} x1={t.x} y1="0" x2={t.x} y2="800" />)}
+    {WEFT.map(w => <path key={w.i} pathLength="1" style={`--i:${w.i}`} d={w.d} />)}
+  </svg>
+)
+
+
+/** The product's mark: a logo of the app's, or warp's woven square. */
+export const AuthLogo = ({ logo, name }: { logo?: unknown; name?: unknown }) => <span data-part="logo">{logo ?? <WeaveIcon />}{name}</span>
+
+/**
+ * The auth layout (09 §2.2), by its own width: full-bleed under 600, a 420 card on the page at 600–999, split with the
+ * brand panel from 1000. The panel is decorative, so it is hidden from assistive tech; quiet flattens it by token.
+ */
+export function AuthScreen({ logo, name, quote, cite, brand, children, ...rest }: { logo?: unknown; name?: unknown; quote?: unknown; cite?: unknown; brand?: unknown; children?: unknown; [attr: string]: unknown }) {
+  return (
+    <div data-scope="auth" {...rest}>
+      <div data-part="layout">
+        <aside data-part="brand" aria-hidden="true">
+          <AuthLogo logo={logo} name={name} />
+          <WeaveArt />
+          {brand}
+          {quote !== undefined && <blockquote>{quote}{cite !== undefined && <cite>{cite}</cite>}</blockquote>}
+        </aside>
+        <div data-part="main"><div data-part="panel">{children}</div></div>
+      </div>
+    </div>
+  )
+}