@weft-js/warp 0.0.0-stage → 0.1.0

package/src/RichSelect.tsx

@@ -0,0 +1,243 @@
+import { DownIcon, GlobeIcon, SearchIcon } from '@weft-js/warp-icons'
+import { caretAfter, currencyCodes, currencySymbol, digitsOf, displayName, formatPhone, inferCountry, languageCodes, listKey, localZone, matchZone, nationalLength, PHONE_COUNTRIES, regionCodes, regionOf, uid, zoneCity, zoneRows, type ChangeReason, type CountryCode, type E164, type IsoDate, type PhoneCountry, type TimeZoneId } from '@weft-js/warp-core'
+import { derived, flush, onMount, state, untrack } from '@weft-js/core'
+import { Field } from './Field'
+import type { IconRef } from './Icon'
+import { bindable, Composite, Hidden, Panel, useOpen, usePickerEnv, type Bindable, type Openable, type RichFieldProps } from './Picker'
+import { use } from '@weft-js/warp-core/weft'
+import '@weft-js/warp-core/styles/rich/listbox.css'
+import '@weft-js/warp-core/styles/rich/timezone.css'
+import '@weft-js/warp-core/styles/rich/phone.css'
+
+export type Row = { key: string; main: string; sub?: string | undefined; meta?: string | undefined; code?: string; pin?: string | undefined; search: string }
+
+const SHOWN = 80
+
+/**
+ * The search list in a picker's panel (APG Combobox with a listbox popup): focus stays in the input, ↑/↓ move the
+ * active option, Enter picks. Long lists render their first rows; typing narrows them.
+ */
+function SearchList({ label, placeholder, rows, value, match, onPick, count }: { label: string; placeholder: string; rows: () => Row[]; value: string | null; match?: ((r: Row, q: string) => boolean) | undefined; onPick: (key: string, r: ChangeReason) => void; count?: ((n: number, q: string) => string) | undefined }) {
+  const id = uid('list')
+  const q = state('')
+  const all = derived(() => rows())
+  const hits = derived(() => {
+    const s = q.value.trim().toLowerCase()
+    return s ? all.value.filter(r => (match ? match(r, s) : r.search.includes(s))) : all.value
+  })
+  const shown = derived(() => hits.value.slice(0, SHOWN))
+  const active = state(untrack(() => Math.max(0, all.value.slice(0, SHOWN).findIndex(r => r.key === value))))
+  let list: HTMLUListElement | undefined
+  const show = () => list?.querySelector('[data-active]')?.scrollIntoView?.({ block: 'nearest' })
+  const onKey = (e: KeyboardEvent) => {
+    const n = shown.value.length
+    if (!n) return
+    const m = listKey(e.key, active.value, n, { page: 8, wrap: true, typing: true })
+    if (!m.handled) return
+    e.preventDefault()
+    if (m.pick) return onPick(shown.value[active.value]!.key, 'keyboard')
+    active.value = m.to
+    flush()
+    show()
+  }
+  onMount(show)
+  return (
+    <div class="tz-pop">
+      <label data-part="search">
+        <SearchIcon />
+        <span class="sr">{label}</span>
+        <input type="search" role="combobox" data-initial="" aria-expanded="true" aria-controls={id} aria-autocomplete="list" aria-activedescendant={shown.value.length ? `${id}-${active.value}` : undefined} placeholder={placeholder} onInput={e => { q.value = (e.currentTarget).value; active.value = 0 }} onKeyDown={onKey} />
+      </label>
+      <ul ref={n => (list = n)} data-part="listbox" role="listbox" id={id} aria-label={label}>
+        {shown.value.map((r, n) => <Option key={r.key} id={`${id}-${n}`} row={r} selected={r.key === value} active={n === active.value} onPick={onPick} />)}
+      </ul>
+      {!shown.value.length && <p class="tz-empty">No match for “{q.value}”.</p>}
+      {count && <p class="tz-count" aria-live="polite">{count(hits.value.length, q.value)}</p>}
+    </div>
+  )
+}
+
+const Option = ({ id, row, selected, active, onPick }: { id: string; row: Row; selected: boolean; active: boolean; onPick: (k: string, r: ChangeReason) => void }) => (
+  <li role="option" id={id} aria-selected={selected ? 'true' : 'false'} data-active={active ? '' : undefined} onClick={() => onPick(row.key, 'pointer')}>
+    {row.pin && <span class="tz-pin">{row.pin}</span>}
+    {row.code && <span data-part="code">{row.code}</span>}
+    <span>{row.main}{row.sub && <small> {row.sub}</small>}</span>
+    {row.meta && <span data-part="opt-meta">{row.meta}</span>}
+  </li>
+)
+
+/** A field whose control is one value button over a search list: the frame of TimeZoneSelect and the Intl selects. */
+function ListField({ value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, icon, text, title, search, rows, match, count, hint, label, name, presentation, disabled, readonly, locale, today, ...rest }: RichFieldProps & Bindable<string | null> & Openable & { icon?: IconRef | undefined; text: (v: string, locale: string) => string; title: string; search: string; rows: (locale: string, today: string) => Row[]; match?: ((r: Row, q: string) => boolean) | undefined; count?: ((n: number, q: string) => string) | undefined; hint?: unknown }) {
+  const env = usePickerEnv(() => locale, () => today)
+  const v = bindable<string | null>(() => value, () => defaultValue, null, () => onValueChange)
+  const pop = useOpen(() => open, () => defaultOpen, () => onOpenChange)
+  const shown = derived(() => (v.value ? text(v.value, env.locale.value) : ''))
+  let trigger: HTMLButtonElement | undefined
+  return (
+    <Composite
+      {...rest}
+      icon={icon}
+      label={label}
+      hint={hint}
+      disabled={disabled}
+      readonly={readonly}
+      bound={v}
+      filled={!!v.value}
+      hold={pop.value}
+      control={() => (
+        <>
+          <button ref={n => (trigger = n)} type="button" data-part="pick" aria-haspopup="dialog" aria-expanded={pop.value ? 'true' : 'false'} aria-label={`${label}, ${shown.value || 'none'}`} aria-disabled={readonly ? 'true' : undefined} disabled={disabled} onClick={() => { if (!readonly) pop.set(!pop.value) }}>
+            <span>{shown.value}</span><DownIcon />
+          </button>
+          <Hidden name={name} value={() => v.value ?? ''} />
+        </>
+      )}
+      end={
+        <Panel label={title} open={pop} trigger={() => trigger!} presentation={presentation}>
+          {() => <SearchList label={search} placeholder={search} rows={() => rows(env.locale.value, env.today.value)} match={match} value={v.value} count={count} onPick={(k, r) => { v.set(k, r); pop.set(false) }} />}
+        </Panel>
+      }
+    />
+  )
+}
+
+/** Props for TimeZoneSelect. */
+export type TimeZoneSelectProps = RichFieldProps & Bindable<TimeZoneId | null> & Openable & { referenceDate?: string | undefined; zones?: TimeZoneId[]; showOffset?: boolean }
+
+/** TimeZoneSelect (04 §2): every IANA zone with its offset at `referenceDate`; Local is pinned first. */
+export function TimeZoneSelect({ referenceDate, zones, showOffset = true, ...props }: TimeZoneSelectProps) {
+  const local = untrack(localZone)
+  const matches = new Map<string, ReturnType<typeof zoneRows>[number]>()
+  const rows = (locale: string, today: string): Row[] => {
+    const list = zoneRows(locale, (referenceDate ?? today) as IsoDate, zones)
+    for (const z of list) matches.set(z.zone, z)
+    const row = (z: (typeof list)[number]): Row => ({ key: z.zone, main: z.city, sub: z.region, meta: showOffset ? z.offset : undefined, pin: z.zone === local ? 'Local' : undefined, search: z.search })
+    return [...list.filter(z => z.zone === local), ...list.filter(z => z.zone !== local)].map(row)
+  }
+  return <ListField icon={GlobeIcon} title="Choose a time zone" search="City, zone or +5:30" text={v => zoneCity(v)} rows={rows} match={(r, q) => matchZone(matches.get(r.key)!, q)} count={(n, q) => (q ? `${n} zone${n === 1 ? '' : 's'}` : `${n} zones · offsets for today`)} {...props} />
+}
+
+export type CodeSelectProps = RichFieldProps & Bindable<string | null> & Openable & { options?: string[] | undefined; preferred?: string[] }
+const pinned = (list: string[], first?: string[]) => (first ? [...first, ...list.filter(c => !first.includes(c))] : list)
+
+/** CountrySelect (04 §3): names from Intl.DisplayNames in the UI locale; `preferred` pins items. */
+export function CountrySelect({ options, preferred, ...props }: CodeSelectProps) {
+  const rows = (locale: string): Row[] => pinned(options ?? regionCodes(), preferred).map(c => { const main = displayName('region', c, locale); return { key: c, code: c, main, search: `${main} ${c}`.toLowerCase() } })
+  return <ListField icon={GlobeIcon} title="Choose a country" search="Search countries" text={(v, l) => displayName('region', v, l)} rows={rows} {...props} />
+}
+
+/** LanguageSelect (04 §3): each language with its endonym, because people look for their own language in their own script. */
+export function LanguageSelect({ options, preferred, endonyms = true, ...props }: CodeSelectProps & { endonyms?: boolean }) {
+  const rows = (locale: string): Row[] => pinned(options ?? languageCodes(), preferred).map(c => { const main = displayName('language', c, locale), own = displayName('language', c, c); return { key: c, main, sub: endonyms && own !== main ? `· ${own}` : undefined, search: `${main} ${own} ${c}`.toLowerCase() } })
+  return <ListField icon={GlobeIcon} title="Choose a language" search="Search languages" text={(v, l) => displayName('language', v, l)} rows={rows} {...props} />
+}
+
+/** CurrencySelect (04 §3): "Euro · EUR · €". */
+export function CurrencySelect({ options, preferred, ...props }: CodeSelectProps) {
+  const rows = (locale: string): Row[] => pinned(options ?? currencyCodes(), preferred).map(c => { const main = displayName('currency', c, locale); return { key: c, main, sub: `· ${c}`, meta: currencySymbol(c, locale), search: `${main} ${c}`.toLowerCase() } })
+  return <ListField title="Choose a currency" search="Search currencies" text={(v, l) => `${displayName('currency', v, l)} · ${v}`} rows={rows} {...props} />
+}
+
+/** A prefix moves where the label rests: onto the input, past the country button (specimen, `restOn`). */
+function restOnInput(el: HTMLInputElement) {
+  const control = el.closest<HTMLElement>('[data-part="control"]')!
+  const measure = () => {
+    if (!control.style.getPropertyValue('--_inset')) control.style.setProperty('--_inset', getComputedStyle(el.parentElement!).paddingInlineStart)
+    control.style.setProperty('--_lead', `${Math.round(el.getBoundingClientRect().left - control.getBoundingClientRect().left)}px`)
+  }
+  measure()
+  const size = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure)
+  size?.observe(control)
+  return { update() {}, destroy() { size?.disconnect() } }
+}
+
+/** Props for PhoneField. */
+export type PhoneFieldProps = RichFieldProps & Bindable<E164 | null> & {
+  country?: CountryCode
+  defaultCountry?: CountryCode
+  countries?: CountryCode[] | undefined
+  onCountryChange?: (c: CountryCode) => void
+}
+
+/**
+ * PhoneField (04 §3): a country button, then a native tel input (the OS keypad and SMS autofill beat anything custom).
+ * Digits format as you type and the caret stays behind the same digit; a pasted `+…` infers the country. The value is
+ * E.164, and only once the number is the country's length. The country list is a search list.
+ */
+export function PhoneField({ value, defaultValue, onValueChange, country, defaultCountry, countries, onCountryChange, locale, today, name, presentation, label, hint, error, disabled, readonly, ...rest }: PhoneFieldProps) {
+  const env = usePickerEnv(() => locale, () => today)
+  const v = bindable<E164 | null>(() => value, () => defaultValue, null, () => onValueChange)
+  const list = untrack(() => (countries ? PHONE_COUNTRIES.filter(c => countries.includes(c.code)) : PHONE_COUNTRIES))
+  const find = (code?: string) => list.find(c => c.code === code)
+  const code = state<PhoneCountry>(untrack(() => find(country) ?? find(defaultCountry) ?? find(regionOf(env.locale.value)) ?? list[0]!))
+  const text = state(untrack(() => {
+    const e = v.value
+    if (!e) return ''
+    const c = inferCountry(e, code.value, list) ?? code.value
+    code.value = c
+    return formatPhone(e.slice(c.dial.length + 1), c).shown
+  }))
+  const pop = useOpen(() => undefined, () => false, () => undefined)
+  const own = state<string | undefined>(undefined)
+  const name_ = derived(() => displayName('region', code.value.code, env.locale.value))
+  const placeholder = derived(() => { const c = code.value; return c.pattern.replace(/#/g, '0').replace(/^0/, c.trunk ? '0' : '5') })
+  let button: HTMLButtonElement | undefined
+  let input: HTMLInputElement | undefined
+  const sync = (raw: string, caret: number | null) => {
+    const c = code.value
+    const before = digitsOf(raw.slice(0, caret ?? raw.length)).length
+    const { shown, national } = formatPhone(raw, c)
+    text.value = shown
+    if (input) { input.value = shown; if (input === input.ownerDocument.activeElement) { const at = caretAfter(shown, before); input.setSelectionRange(at, at) } }
+    const need = nationalLength(c)
+    own.value = national.length > need ? `${name_.value} numbers have ${need} digits after the country code.` : undefined
+    const e = national.length === need ? `+${c.dial}${national}` as E164 : null
+    if (e !== untrack(() => v.value)) v.set(e, 'keyboard')
+  }
+  const choose = (c: PhoneCountry) => { code.value = c; untrack(() => onCountryChange)?.(c.code); pop.set(false); input?.focus(); sync(text.value, null) }
+  const onBlur = () => {
+    const c = code.value
+    const n = formatPhone(text.value, c).national.length, need = nationalLength(c)
+    if (n && n < need) own.value = `That's ${n} digits. ${name_.value} numbers have ${need}.`
+  }
+  use(restOnInput, () => input)
+  const onPaste = (e: ClipboardEvent) => {
+    if (readonly) return
+    const t = e.clipboardData?.getData('text').trim() ?? ''
+    if (!t.startsWith('+')) return
+    const m = inferCountry(t, code.value, list)
+    if (!m) return
+    e.preventDefault()
+    code.value = m
+    sync((m.trunk ?? '') + digitsOf(t).slice(m.dial.length), null)
+  }
+  return (
+    <Field
+      {...rest}
+      label={label}
+      hint={hint}
+      error={error ?? own.value}
+      disabled={disabled}
+      readonly={readonly}
+      filled={text.value.length > 0}
+      hold={pop.value}
+      attrs={{ 'data-phone': '' }}
+      reset={() => { v.reset(); own.value = undefined; code.value = inferCountry(v.value ?? '', code.value, list) ?? code.value; text.value = v.value ? formatPhone(v.value.slice(code.value.dial.length + 1), code.value).shown : ''; if (input) input.value = text.value }}
+      control={p => (
+        <div data-part="body">
+          <button ref={n => (button = n)} type="button" data-part="country" aria-haspopup="dialog" aria-expanded={pop.value ? 'true' : 'false'} aria-disabled={readonly ? 'true' : undefined} disabled={disabled} onClick={() => { if (!readonly) pop.set(!pop.value) }}>
+            <span aria-hidden="true"><b>{code.value.code}</b>+{code.value.dial}</span><span class="sr">Country: {name_.value}, +{code.value.dial}</span><DownIcon />
+          </button>
+          <input ref={n => (input = n)} data-part="input" id={p.id} type="tel" inputmode="tel" autocomplete="tel-national" placeholder={placeholder.value} aria-describedby={p.describedby} value={text.value} required={p.rest.required} disabled={disabled} readonly={readonly} onInput={e => { const el = e.currentTarget; sync(el.value, el.selectionStart) }} onBlur={onBlur} onPaste={onPaste} />
+          <Hidden name={name} value={() => v.value ?? ''} />
+        </div>
+      )}
+      end={
+        <Panel label="Country" open={pop} trigger={() => button!} presentation={presentation}>
+          {() => <SearchList label="Search countries" placeholder="Country or code" value={code.value.code} rows={() => list.map(c => { const main = displayName('region', c.code, env.locale.value); return { key: c.code, code: c.code, main, meta: `+${c.dial}`, search: `${main} ${c.code} ${c.dial}`.toLowerCase() } })} match={(r, q) => r.search.includes(q.replace(/^\+/, ''))} onPick={k => choose(find(k)!)} />}
+        </Panel>
+      }
+    />
+  )
+}
+

package/src/RichTextEditor.tsx

@@ -0,0 +1,207 @@
+import { CodeIcon, CodeBlockIcon, LinkIcon, ListIcon, ListOrderedIcon, QuoteIcon, UndoIcon } from '@weft-js/warp-icons'
+import { comboPopup, htmlToMarkdown, keyboardDock, markdownToHtml, nextIndex, richText, sanitizeHtml, uid, type MentionItem, type RichTextHandle, type RichTextOptions } from '@weft-js/warp-core'
+import { derived, flush, onCleanup, state, untrack, watch } from '@weft-js/core'
+import { bindable, type Bindable } from './bind'
+import { Button } from './Button'
+import { Field, type FieldShell } from './Field'
+import { Tooltip } from './Tooltip'
+import { use } from '@weft-js/warp-core/weft'
+import '@weft-js/warp-core/styles/rich/body.css'
+import '@weft-js/warp-core/styles/rich/rich-text.css'
+import '@weft-js/warp-core/styles/rich/listbox.css'
+import '@weft-js/warp-core/styles/rich/popover.css'
+import '@weft-js/warp-core/styles/rich/helpers.css'
+
+/** An entry in the editor's slash menu. */
+export type SlashCommand = { id: string; label: string; hint?: string; shortcut?: string; run: (editor: RichTextHandle) => void }
+type Mark = 'bold' | 'italic' | 'strike' | 'code' | 'link'
+type Block = 'h2' | 'h3' | 'ul' | 'ol' | 'quote' | 'codeblock'
+
+/** Props for RichTextEditor. */
+export type RichTextEditorProps = FieldShell & Bindable<string> & {
+  format?: 'html' | 'markdown' | undefined
+  /** fixed (default) in the frame, bubble over a selection, or none. A phone docks either above the keyboard. */
+  toolbar?: 'fixed' | 'bubble' | 'none'
+  marks?: Mark[]
+  blocks?: Block[]
+  commands?: SlashCommand[]
+  mentions?: { search: (q: string, signal: AbortSignal) => Promise<MentionItem[]> }
+  placeholder?: string
+  minRows?: number
+  maxRows?: number
+  name?: string | undefined
+}
+
+type Tool = { cmd: string; label: string; tip: string; glyph: () => unknown; style?: string; toggles?: boolean }
+const TOOLS: Record<Mark | Block, Tool> = {
+  h2: { cmd: 'h2', label: 'H2 heading', tip: 'Heading · # ', glyph: () => 'H2', toggles: true },
+  h3: { cmd: 'h3', label: 'H3 subheading', tip: 'Subheading · ### ', glyph: () => 'H3', toggles: true },
+  bold: { cmd: 'bold', label: 'Bold', tip: 'Bold · ⌘B', glyph: () => 'B', style: 'font-weight:700', toggles: true },
+  italic: { cmd: 'italic', label: 'Italic', tip: 'Italic · ⌘I', glyph: () => 'I', style: 'font-style:italic;font-family:Georgia,serif;font-weight:400;font-size:16px', toggles: true },
+  strike: { cmd: 'strikeThrough', label: 'Strikethrough', tip: 'Strikethrough', glyph: () => 'S', style: 'text-decoration:line-through;font-weight:500', toggles: true },
+  code: { cmd: 'code', label: 'Inline code', tip: 'Code · `text`', glyph: () => <CodeIcon />, toggles: true },
+  link: { cmd: 'link', label: 'Link', tip: 'Link · ⌘K', glyph: () => <LinkIcon />, toggles: true },
+  ul: { cmd: 'insertUnorderedList', label: 'Bulleted list', tip: 'Bullets · - ', glyph: () => <ListIcon />, toggles: true },
+  ol: { cmd: 'insertOrderedList', label: 'Numbered list', tip: 'Numbers · 1. ', glyph: () => <ListOrderedIcon />, toggles: true },
+  quote: { cmd: 'blockquote', label: 'Quote', tip: 'Quote · > ', glyph: () => <QuoteIcon />, toggles: true },
+  codeblock: { cmd: 'pre', label: 'Code block', tip: 'Code block · ```', glyph: () => <CodeBlockIcon />, toggles: true },
+}
+const SLASH: SlashCommand[] = [
+  { id: 'h2', label: 'Heading', hint: '#', run: e => e.run('h2') },
+  { id: 'h3', label: 'Subheading', hint: '###', run: e => e.run('h3') },
+  { id: 'ul', label: 'Bulleted list', hint: '-', run: e => e.run('insertUnorderedList') },
+  { id: 'ol', label: 'Numbered list', hint: '1.', run: e => e.run('insertOrderedList') },
+  { id: 'quote', label: 'Quote', hint: '>', run: e => e.run('blockquote') },
+  { id: 'code', label: 'Code block', hint: '```', run: e => e.run('pre') },
+  { id: 'divider', label: 'Divider', hint: '---', run: e => e.run('insertHorizontalRule') },
+]
+type MenuRow = { id: string; main: string; meta?: string | undefined; run: () => void }
+
+/**
+ * A rich text field (04 RichTextEditor; inputs-rich.html:1522): the editor frame is the field. The toolbar is an APG
+ * Toolbar, one tab stop with ←/→ inside. Markdown shortcuts open a block at the start of a line; `/` on an empty line and
+ * `@` open a list at the caret. Everything that enters the editor, a value or a paste, goes through warp-core's allow-list.
+ */
+export function RichTextEditor({ value, defaultValue, onValueChange, format = 'html', toolbar = 'fixed', marks = ['bold', 'italic', 'strike', 'code', 'link'], blocks = ['h2', 'ul', 'ol', 'quote'], commands = SLASH, mentions, placeholder = 'Write, or type / for blocks…', minRows, maxRows, name, hint, ...rest }: RichTextEditorProps) {
+  const id = uid('rte')
+  const held = bindable<string>(() => value, () => defaultValue, '', () => onValueChange)
+  const toHtml = (v: string) => (format === 'markdown' ? sanitizeHtml(markdownToHtml(v)) : sanitizeHtml(v))
+  const fromEditor = (html: string) => (format === 'markdown' ? htmlToMarkdown(ed!) : html)
+  const start = untrack(() => toHtml(held.value))
+  let written = untrack(() => held.value)
+  const pressed = state<Record<string, boolean>>({})
+  const stop = state(0)
+  const linking = state(false)
+  const url = state('')
+  const items = state<MenuRow[]>([])
+  const active = state(0)
+  const menuOpen = state(false)
+  const said = state('')
+  const tools = derived(() => [blocks.filter(b => b === 'h2' || b === 'h3').map(b => TOOLS[b]), marks.map(m => TOOLS[m]), blocks.filter(b => b !== 'h2' && b !== 'h3').map(b => TOOLS[b])].filter(g => g.length))
+  const flat = derived(() => tools.value.flat())
+  let ed: HTMLDivElement | undefined
+  let handle: RichTextHandle | undefined
+  let bar: HTMLDivElement | undefined
+  let pop: HTMLDivElement | undefined
+  let mark: HTMLSpanElement | undefined
+  let link: HTMLInputElement | undefined
+  let lookup: AbortController | undefined
+  onCleanup(() => lookup?.abort())
+  const close = () => { menuOpen.value = false; lookup?.abort() }
+  const openMenu = (rows: MenuRow[], rect: DOMRect) => {
+    items.value = rows
+    active.value = 0
+    mark!.style.insetBlockStart = `${rect.bottom}px`
+    mark!.style.insetInlineStart = `${rect.left}px`
+    menuOpen.value = rows.length > 0
+  }
+  const onQuery = async (q: { trigger: string; query: string; rect: DOMRect } | null) => {
+    lookup?.abort()
+    if (!q) return void (menuOpen.value = false)
+    const drop = () => handle!.replaceQuery(q.query.length + 1)
+    if (q.trigger === '/') {
+      const low = q.query.toLowerCase()
+      return openMenu(commands.filter(c => c.label.toLowerCase().includes(low)).map(c => ({ id: c.id, main: c.label, meta: c.shortcut ?? c.hint, run: () => { drop(); c.run(handle!) } })), q.rect)
+    }
+    if (!mentions) return
+    const me = (lookup = new AbortController())
+    try {
+      const found = await mentions.search(q.query, me.signal)
+      if (me !== lookup) return
+      openMenu(found.map(m => ({ id: m.id, main: m.label, meta: m.meta, run: () => {
+        drop()
+        handle!.insertMention(m.label)
+        said.value = `Mention: ${m.label}`
+      } })), q.rect)
+    } catch { /* superseded */ }
+  }
+  const choose = (at: number) => { const row = items.value[at]; close(); row?.run() }
+  const startLink = () => { url.value = ''; linking.value = true; flush(); link?.focus() }
+  const endLink = (apply: boolean) => {
+    linking.value = false
+    if (apply && url.value.trim()) handle!.run('link', url.value.trim())
+    else { ed!.focus(); handle!.restore() }
+  }
+  use(
+    (el: HTMLDivElement, o: RichTextOptions) => (handle = richText(el, o)),
+    () => ed,
+    () => ({
+      onChange: (html: string) => { written = fromEditor(html); held.set(written, 'keyboard') },
+      onState: (on: Record<string, boolean>) => (pressed.value = on),
+      onQuery, onLink: startLink,
+      bubble: toolbar === 'bubble' ? bar : undefined,
+    }),
+  )
+  if (untrack(() => toolbar) !== 'none') use(keyboardDock, () => bar, () => ({ editor: () => ed }))
+  use(comboPopup, () => pop, () => ({ open: menuOpen.value, anchor: mark!, onClose: close }))
+  watch(() => held.value, v => {
+    if (v === written) return
+    written = v
+    // oxlint-disable-next-line weft/no-html-sink -- toHtml sanitizes
+    if (ed) ed.innerHTML = toHtml(v)
+  })
+  const onToolKey = (e: KeyboardEvent) => {
+    const to = nextIndex(e.key, stop.value, flat.value.length, { rtl: getComputedStyle(e.currentTarget as Element).direction === 'rtl' })
+    if (to < 0) return
+    e.preventDefault()
+    stop.value = to
+    flush()
+    ;(e.currentTarget as Element).querySelector<HTMLElement>('[tabindex="0"]')?.focus()
+  }
+  const onMenuKey = (e: KeyboardEvent) => {
+    if (!menuOpen.value || e.isComposing) return
+    const n = items.value.length
+    const by = ({ ArrowDown: 1, ArrowUp: -1 } as Record<string, number>)[e.key]
+    if (by) { e.preventDefault(); active.value = (active.value + by + n) % n }
+    else if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); choose(active.value) }
+    else if (e.key === 'Escape') { e.preventDefault(); close() }
+  }
+  const Tool = ({ tool: t }: { tool: Tool }) => (
+    <Tooltip content={t.tip}><button type="button" data-part="tool" tabindex={flat.value[stop.value] === t ? '0' : '-1'} aria-label={t.label} aria-pressed={pressed.get(t.cmd) ? 'true' : 'false'} style={t.style} onClick={() => (t.cmd === 'link' ? (handle!.save(), startLink()) : handle!.run(t.cmd))}>{t.glyph()}</button></Tooltip>
+  )
+  const rows = () => [minRows && `min-block-size:${minRows * 1.6}em`, maxRows && `max-block-size:${maxRows * 1.6}em`].filter(Boolean).join(';') || undefined
+  return (
+    <Field
+      {...rest}
+      hint={hint ?? 'Markdown shortcuts work at the start of a line. Esc closes menus.'}
+      group
+      filled
+      reset={held.reset}
+      hold={menuOpen.value}
+      attrs={{ 'data-multiline': '' }}
+      control={p => (
+        <div data-scope="rte">
+          <div data-part="frame">
+            {toolbar !== 'none' && (
+              <div ref={n => (bar = n)} role="toolbar" aria-label="Formatting" aria-controls={`${id}-c`} popover={toolbar === 'bubble' ? 'manual' : undefined} data-bubble={toolbar === 'bubble' ? '' : undefined} onKeyDown={onToolKey} onPointerDown={e => { if ((e.target as Element).closest?.('[data-part="tool"]')) e.preventDefault() }}>
+                {tools.value.map((g, i) => <span key={g[0]!.cmd} style="display:contents">{i > 0 && <span data-part="sep"></span>}{g.map(t => <Tool key={t.cmd} tool={t} />)}</span>)}
+                <span data-part="sep"></span>
+                <Tooltip content="Undo" kbd="⌘Z"><button type="button" data-part="tool" tabindex="-1" aria-label="Undo" onClick={() => handle!.run('undo')}><UndoIcon /></button></Tooltip>
+              </div>
+            )}
+            {linking.value && (
+              <div data-part="linkbar">
+                <label data-part="sr-only" for={`${id}-url`}>Link address</label>
+                <input ref={n => (link = n)} type="url" id={`${id}-url`} placeholder="https://" value={url.value} onInput={(e: Event) => (url.value = (e.currentTarget as HTMLInputElement).value)} onKeyDown={(e: KeyboardEvent) => { if (e.key === 'Enter') { e.preventDefault(); endLink(true) } else if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); endLink(false) } }} />
+                <Button size="sm" onClick={() => endLink(true)}>Apply</Button>
+                <Button emphasis="ghost" tone="neutral" size="sm" onClick={() => endLink(false)}>Cancel</Button>
+              </div>
+            )}
+            <div ref={n => (ed = n)} data-part="content" id={`${id}-c`} contenteditable="true" tabindex="0" role="textbox" aria-multiline="true" aria-labelledby={`${p.id}-l`} aria-describedby={p.describedby} aria-invalid={p.invalid ? 'true' : undefined} aria-autocomplete="list" aria-controls={`${id}-menu`} aria-activedescendant={menuOpen.value ? `${id}-${active.value}` : undefined} data-placeholder={placeholder} spellcheck style={rows()} onKeyDown={onMenuKey}
+          // oxlint-disable-next-line weft/no-html-sink -- `start` went through toHtml, which sanitizes
+          innerHTML={start}></div>
+          </div>
+          <span ref={n => (mark = n)} data-part="caret-anchor" style="position:fixed" aria-hidden="true"></span>
+          <div ref={n => (pop = n)} data-scope="popover" data-kind="combo" data-sweep="" popover="manual" role="presentation" onPointerDown={e => e.preventDefault()}>
+            <span data-part="sweep" aria-hidden="true"></span>
+            <ul data-part="listbox" role="listbox" id={`${id}-menu`} aria-label="Insert">
+              {items.value.map((r, n) => <li key={r.id} role="option" id={`${id}-${n}`} aria-selected={n === active.value ? 'true' : 'false'} data-active={n === active.value ? '' : undefined} onClick={() => choose(n)}><span>{r.main}</span>{r.meta && <span data-part="opt-meta">{r.meta}</span>}</li>)}
+            </ul>
+          </div>
+          <span data-part="sr-only" role="status">{said.value}</span>
+          {name && <input type="hidden" name={name} value={held.value} />}
+        </div>
+      )}
+    />
+  )
+}

package/src/ScrollGrid.tsx

@@ -0,0 +1,190 @@
+import { derived, onCleanup, onMount, state, untrack } from '@weft-js/core'
+import { measureEngine, type MeasureHandle, type MeasureProvider } from '@weft-js/core/text'
+import { slices, uid, virtualizer, type Virtualizer } from '@weft-js/warp-core'
+import './styles'
+import '@weft-js/warp-core/styles/data/scroll-grid.css'
+
+/** One ScrollGrid column. */
+export interface GridColumn {
+  id: string
+  header: string
+  /** Pixels. Default 104. */
+  width?: number | undefined
+  /** The text wraps, and rows are as tall as it needs. */
+  wrap?: boolean
+}
+/** Props for ScrollGrid. */
+export interface ScrollGridProps {
+  label: string
+  rows: number
+  columns: readonly GridColumn[]
+  /** The cell at a row and column. */
+  cell: (row: number, column: GridColumn) => unknown
+  /** The first column, the row's name. */
+  rowHeader: (row: number) => string
+  /** The corner cell's text. */
+  corner?: string
+  /** Default `480px`. */
+  height?: string
+  /** Each row's height, in pixels. Default 34. */
+  rowHeight?: number
+  /** The pinned first column's width, in pixels. Default 132. */
+  headerWidth?: number
+  /** Marks a cell critical (a negative value). */
+  negative?: (row: number, column: GridColumn) => boolean
+}
+
+const RH = 34, CW = 104, HW = 132, LEADING = 1.4, PAD = 12, INSET = 20
+const HELP = 'Arrow keys move one cell, Page Up and Page Down one screen, Home and End to the row ends, Control with Home or End to the grid ends.'
+
+/** The two-axis grid (06 §6): rows and columns are each a window on one scroller, plus the active cell's row and column. */
+export function ScrollGrid(props: ScrollGridProps) {
+  const id = uid('grid')
+  let el: HTMLElement | undefined, canvas: HTMLElement | undefined
+  let ys: Virtualizer | undefined, xs: Virtualizer | undefined
+  let engine: MeasureProvider | null = null
+  let stop: (() => void) | undefined
+  const rh = untrack(() => props.rowHeight ?? RH), hw = untrack(() => props.headerWidth ?? HW)
+  const columns = derived(() => props.columns)
+  const rows = state<number[]>(Array.from({ length: Math.min(untrack(() => props.rows), 12) }, (_, i) => i))
+  const cols = state<number[]>(Array.from({ length: Math.min(untrack(() => columns.value.length), 12) }, (_, i) => i))
+  const active = state<[number, number]>([0, 0])
+  const shownCols = derived(() => cols.value.flatMap(c => (columns.value[c] ? [{ c, col: columns.value[c] }] : [])))
+  const handles = new Map<string, MeasureHandle>()
+  let font = '', line = 0
+  const wrapped = derived(() => columns.value.flatMap((c, i) => (c.wrap ? [{ c, i }] : [])))
+  const cellId = (r: number, c: number) => `${id}-r${r}-c${c}`
+
+  const handle = (r: number, c: GridColumn) => {
+    const key = `${r}\0${c.id}`
+    let h = handles.get(key)
+    if (!h) { h = engine!.prepare(String((props.cell(r, c) as string | number | null | undefined) ?? ''), font); handles.set(key, h) }
+    return h
+  }
+  const size = (r: number) => {
+    if (!engine || !wrapped.value.length) return rh
+    let most = rh
+    for (const { c } of wrapped.value) most = Math.max(most, engine.layout(handle(r, c), (c.width ?? CW) - INSET, line).height + PAD)
+    return most
+  }
+
+  function focusCell([r, c]: [number, number], align = true) {
+    active.value = [r, c]
+    ys?.update({})
+    xs?.update({})
+    if (align) reveal(r, c)
+    el!.setAttribute('aria-activedescendant', cellId(r, c))
+  }
+
+  function reveal(r: number, c: number) {
+    const top = el!.scrollTop, y = ys!.sizes.offset(r), h = ys!.sizes.get(r), room = el!.clientHeight - rh
+    if (y < top) el!.scrollTop = y
+    else if (y + h! > top + room) el!.scrollTop = y + h! - room
+    const left = el!.scrollLeft, x = xs!.sizes.offset(c), w = xs!.sizes.get(c), wide = el!.clientWidth - hw
+    if (x < left) el!.scrollLeft = x
+    else if (x + w! > left + wide) el!.scrollLeft = x + w! - wide
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    const [r, c] = active.value, lastR = props.rows - 1, lastC = columns.value.length - 1, ctrl = e.ctrlKey || e.metaKey
+    const page = Math.max(1, Math.floor((el!.clientHeight - rh) / rh) - 1)
+    const to: Record<string, [number, number]> = {
+      ArrowDown: [r + 1, c], ArrowUp: [r - 1, c], ArrowRight: [r, c + 1], ArrowLeft: [r, c - 1], PageDown: [r + page, c], PageUp: [r - page, c],
+      Home: ctrl ? [0, 0] : [r, 0], End: ctrl ? [lastR, lastC] : [r, lastC],
+    }
+    const next = to[e.key]
+    if (!next) return
+    e.preventDefault()
+    focusCell([Math.max(0, Math.min(lastR, next[0])), Math.max(0, Math.min(lastC, next[1]))])
+  }
+
+  onMount(() => {
+    queueMicrotask(() => {
+      if (!el) return
+      const allRows = Array.from({ length: untrack(() => props.rows) }, (_, i) => i)
+      ys = virtualizer(el, { keys: allRows, spacer: canvas!, estimate: rh, size, head: rh, sized: true, pinned: () => [active.value[0]], overscan: 200, onRange: i => (rows.value = i) })
+      xs = virtualizer(el, { keys: untrack(() => columns.value.map((_, i) => i)), spacer: canvas!, axis: 'x', estimate: i => untrack(() => columns.value[i]!.width ?? CW), head: hw, sized: true, pinned: () => [active.value[1]], overscan: 200, onRange: i => (cols.value = i) })
+      for (const [row, key] of held.splice(0)) row.set(ys.attach(row.node, key))
+      for (const [cell, key] of heldCols.splice(0)) cell.set(xs.attach(cell.node, key))
+      if (!untrack(() => wrapped.value.length)) return
+      void measureEngine().then(e => {
+        if (!e || !el) return
+        const c = getComputedStyle(el)
+        font = `${c.fontWeight} ${c.fontSize} ${c.fontFamily}`
+        line = parseFloat(c.fontSize) * LEADING
+        engine = e
+        ys!.refresh(rows.value[0] ?? 0, (rows.value.at(-1) ?? 0) + 1)
+        let at = 0, lo = 0
+        stop = slices(() => {
+          if (at >= allRows.length) { ys!.refresh(lo, at); return false }
+          size(at++)
+          if (at - lo >= 256) { ys!.refresh(lo, at); lo = at }
+          return true
+        })
+      })
+    })
+    onCleanup(() => { stop?.(); ys?.destroy(); xs?.destroy() })
+  })
+
+  type Held = { node: HTMLElement; set: (undo: () => void) => void }
+  const held: [Held, number][] = [], heldCols: [Held, number][] = []
+  const watch = (node: () => HTMLElement, axis: 'x' | 'y', key: number) => onMount(() => {
+    let undo: (() => void) | undefined
+    const v = axis === 'y' ? ys : xs
+    if (v) undo = v.attach(node(), key)
+    else (axis === 'y' ? held : heldCols).push([{ node: node(), set: u => (undo = u) }, key])
+    onCleanup(() => undo?.())
+  })
+
+  function Cell(p: { r: number; entry: { c: number; col: GridColumn } }) {
+    let node: HTMLElement | undefined
+    const c = untrack(() => p.entry.c)
+    watch(() => node!, 'x', c)
+    const on = () => active.value[0] === p.r && active.value[1] === c
+    const wrap = () => p.entry.col.wrap
+    return (
+      <div
+        ref={n => (node = n)} id={cellId(p.r, c)} data-part="cell" role="gridcell" aria-colindex={c + 2} aria-selected={on() ? 'true' : undefined} data-active={on() ? '' : undefined}
+        data-neg={props.negative?.(p.r, p.entry.col) ? '' : undefined}
+        style={`inline-size:${p.entry.col.width ?? CW}px;block-size:100%;transform:translateX(${hw + c * CW}px)${wrap() ? `;white-space:normal;line-height:${LEADING};justify-content:start;align-items:start;padding-block:${PAD / 2}px` : ''}`}
+        onPointerDown={() => focusCell([p.r, c], false)}
+      >{props.cell(p.r, p.entry.col)}</div>
+    )
+  }
+
+  function Head(p: { entry: { c: number; col: GridColumn } }) {
+    let node: HTMLElement | undefined
+    const c = untrack(() => p.entry.c)
+    watch(() => node!, 'x', c)
+    return <div ref={n => (node = n)} data-part="col-head" role="columnheader" aria-colindex={c + 2} style={`inline-size:${p.entry.col.width ?? CW}px;transform:translateX(${hw + c * CW}px)`}>{p.entry.col.header}</div>
+  }
+
+  function Row(p: { r: number }) {
+    let node: HTMLElement | undefined
+    const r = untrack(() => p.r)
+    watch(() => node!, 'y', r)
+    return (
+      <div ref={n => (node = n)} data-part="row" role="row" aria-rowindex={r + 2} style={`inline-size:${hw}px;min-inline-size:100%;transform:translateY(${rh + r * rh}px)`}>
+        <div data-part="row-head" role="rowheader" aria-colindex="1" style={`position:sticky;inset-inline-start:0;inline-size:${hw}px;block-size:100%`}>{props.rowHeader(r)}</div>
+        {shownCols.value.map(e => <Cell key={e.c} r={r} entry={e} />)}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      ref={n => (el = n)} data-scope="scroll-grid" role="grid" id={id} aria-label={props.label} aria-describedby={`${id}-help`} aria-readonly="true"
+      aria-rowcount={props.rows + 1} aria-colcount={columns.value.length + 1} aria-activedescendant={cellId(0, 0)} tabindex="0" onKeyDown={onKeyDown}
+      style={props.height ? `block-size:${props.height}` : undefined}
+    >
+      <div ref={n => (canvas = n)} data-part="canvas" role="presentation">
+        <div data-part="head-row" role="row" aria-rowindex="1" style="position:sticky;inset-block-start:0">
+          <div data-part="corner" role="columnheader" aria-colindex="1" style={`position:sticky;inset-inline-start:0;inline-size:${hw}px`}>{props.corner ?? props.label}</div>
+          {shownCols.value.map(e => <Head key={e.c} entry={e} />)}
+        </div>
+        {rows.value.map(r => <Row key={r} r={r} />)}
+      </div>
+      <p id={`${id}-help`} class="vh">{HELP}</p>
+    </div>
+  )
+}