+ )
+}
+
+type RowState =
+ | { kind: 'covered'; via: string }
+ | { kind: 'picked' }
+ | { kind: 'pending' }
+ /** Not matched by the query glob, but would be by a broader `**` version */
+ | { kind: 'promoted'; via: string }
+ | { kind: 'plain' }
+
+/** Split subscriptions into glob matchers and exact class names */
+function toMatchers(subscriptions: string[]) {
+ return {
+ globs: subscriptions
+ .filter(isGlobPattern)
+ .map((g) => [g, subscriptionRegex(g)] as const),
+ exacts: new Set(subscriptions.filter((s) => !isGlobPattern(s))),
+ }
+}
+
+export function SubscriptionsField({
+ control,
+}: {
+ control: Control
+}) {
+ const id = useId()
+ const listboxId = `${id}-listbox`
+ const inputRef = useRef(null)
+ const panelRef = useRef(null)
+
+ // Keep the open panel visually stationary when adding or removing chips
+ // wraps the shell to a different number of lines: the panel hangs off the
+ // shell's bottom edge, so scrolling the page by the height delta cancels
+ // the layout shift. The input row (the shell's last line) stays put too;
+ // only the content above shifts. useCallback so the observer isn't torn
+ // down and recreated on every render.
+ const observeShellResize = useCallback((el: HTMLDivElement) => {
+ let prevHeight = el.offsetHeight
+ const observer = new ResizeObserver(() => {
+ const delta = el.offsetHeight - prevHeight
+ prevHeight = el.offsetHeight
+ if (delta === 0 || !panelRef.current) return
+ // instant, and ResizeObserver fires between layout and paint, so the
+ // compensation is never visible as motion. If the page can't scroll
+ // far enough (already at the top or bottom), the panel just moves as
+ // it would have without compensation.
+ window.scrollBy({ top: delta, behavior: 'instant' })
+ })
+ observer.observe(el)
+ return () => observer.disconnect()
+ }, [])
+
+ const { field } = useController({ control, name: 'subscriptions' })
+ const [query, setQuery] = useState('')
+ const [open, setOpen] = useState(false)
+ // index of the chip primed for deletion. Backspace on an empty query arms
+ // the last chip; arrow keys move the armed selection through the chips.
+ const [armedIdx, setArmedIdx] = useState(null)
+ const [activeIdx, setActiveIdx] = useState(null)
+ const [commitError, setCommitError] = useState()
+
+ const { data } = useQuery(q(api.alertClassList, { query: { limit: ALL_ISH } }))
+ const classes = data?.items ?? []
+
+ const committed = field.value
+ const matchers = toMatchers(committed)
+
+ // glob chip tooltip counts; empty while classes load so lookups come back
+ // undefined and the tooltip stays off
+ const chipMatchCounts = new Map(
+ data
+ ? matchers.globs.map(([g, re]) => [g, classes.filter((c) => re.test(c.name)).length])
+ : []
+ )
+
+ const queryTrimmed = query.trim()
+ const queryIsValidGlob =
+ isGlobPattern(queryTrimmed) && ALERT_SUBSCRIPTION_REGEX.test(queryTrimmed)
+ const queryRegex = queryIsValidGlob ? subscriptionRegex(queryTrimmed) : null
+ // broadest version of the query glob (every wildcard segment widened to `**`),
+ // used to keep near-miss rows visible with a hint about the covering pattern
+ const promotedGlob = queryIsValidGlob
+ ? queryTrimmed
+ .split('.')
+ .map((seg) => (seg.includes('*') ? '**' : seg))
+ .join('.')
+ : null
+ const promotedRegex = promotedGlob ? subscriptionRegex(promotedGlob) : null
+
+ // valid glob → its (widened) matches; glob still being typed (e.g. `*.`) →
+ // everything, since substring matching on `*` can never hit a class name;
+ // otherwise substring filter (which is a no-op for an empty query)
+ const visible = classes.filter((c) =>
+ promotedRegex
+ ? promotedRegex.test(c.name)
+ : isGlobPattern(queryTrimmed) ||
+ c.name.toLowerCase().includes(queryTrimmed.toLowerCase())
+ )
+
+ // precedence: covered > picked > pending > promoted > plain
+ function rowState(name: string): RowState {
+ const via = matchers.globs.find(([, re]) => re.test(name))?.[0]
+ if (via) return { kind: 'covered', via }
+ if (matchers.exacts.has(name)) return { kind: 'picked' }
+ if (queryRegex?.test(name)) return { kind: 'pending' }
+ if (promotedGlob && promotedGlob !== queryTrimmed) {
+ return { kind: 'promoted', via: promotedGlob }
+ }
+ return { kind: 'plain' }
+ }
+
+ // Subscribed (picked or covered) classes sort to the top, based on what was
+ // committed when the panel opened rather than live state, so rows don't
+ // jump to the top mid-picking; new picks group on the next open.
+ const committedAtOpen = useRef([])
+
+ function openPanel() {
+ if (open) return
+ committedAtOpen.current = committed
+ setOpen(true)
+ }
+
+ const frozen = toMatchers(committedAtOpen.current)
+ const [subscribedRows, restRows] = R.partition(
+ visible.map((c) => ({ ...c, state: rowState(c.name) })),
+ (row) => frozen.exacts.has(row.name) || frozen.globs.some(([, re]) => re.test(row.name))
+ )
+ const rows = [...subscribedRows, ...restRows]
+ // covered rows can't be toggled, so keyboard nav skips them
+ const selectableIdxs = rows.flatMap((row, i) => (row.state.kind === 'covered' ? [] : [i]))
+
+ const optionId = (idx: number) => `${id}-opt-${idx}`
+
+ function commitQuery() {
+ const value = queryTrimmed
+ const error = validateSubscription(value)
+ if (error) {
+ setCommitError(error)
+ return
+ }
+ if (!committed.includes(value)) field.onChange([...committed, value])
+ setQuery('')
+ setCommitError(undefined)
+ setActiveIdx(null)
+ }
+
+ function toggleRow(name: string) {
+ const state = rowState(name)
+ if (state.kind === 'covered') return
+ field.onChange(
+ state.kind === 'picked' ? committed.filter((c) => c !== name) : [...committed, name]
+ )
+ // query is deliberately not reset so multiple picks are cheap
+ }
+
+ function removeChip(value: string) {
+ field.onChange(committed.filter((c) => c !== value))
+ // indexes shift after removal, so any armed selection is stale
+ setArmedIdx(null)
+ }
+
+ function moveActive(dir: 1 | -1) {
+ const n = selectableIdxs.length
+ if (n === 0) return
+ // with no active row, down enters at the top and up at the bottom
+ const pos =
+ activeIdx === null ? (dir === 1 ? -1 : n) : selectableIdxs.indexOf(activeIdx)
+ const next = selectableIdxs[(pos + dir + n) % n]
+ setActiveIdx(next)
+ document.getElementById(optionId(next))?.scrollIntoView({ block: 'nearest' })
+ }
+
+ function closePanel() {
+ setOpen(false)
+ setArmedIdx(null)
+ setActiveIdx(null)
+ }
+
+ function onKeyDown(e: React.KeyboardEvent) {
+ if (e.key === KEYS.enter) {
+ e.preventDefault() // never submit the outer form from this input
+ if (open && activeIdx !== null && rows[activeIdx]) {
+ toggleRow(rows[activeIdx].name)
+ } else if (queryTrimmed) {
+ commitQuery()
+ }
+ } else if (e.key === KEYS.backspace || e.key === KEYS.delete) {
+ if (armedIdx !== null) {
+ e.preventDefault()
+ removeChip(committed[armedIdx])
+ } else if (e.key === KEYS.backspace && query === '' && committed.length > 0) {
+ setArmedIdx(committed.length - 1)
+ }
+ // otherwise fall through to normal text deletion
+ } else if (e.key === KEYS.left) {
+ const input = inputRef.current
+ const caretAtStart = input?.selectionStart === 0 && input?.selectionEnd === 0
+ if (armedIdx !== null) {
+ e.preventDefault()
+ setArmedIdx(Math.max(0, armedIdx - 1))
+ } else if (caretAtStart && committed.length > 0) {
+ e.preventDefault()
+ setArmedIdx(committed.length - 1)
+ }
+ } else if (e.key === KEYS.right && armedIdx !== null) {
+ e.preventDefault()
+ // moving right off the last chip returns to the input text
+ setArmedIdx(armedIdx === committed.length - 1 ? null : armedIdx + 1)
+ } else if (e.key === KEYS.escape && open) {
+ // keep focus but close the panel; stop the event so the page/form
+ // doesn't also react to Escape
+ e.stopPropagation()
+ closePanel()
+ } else if (e.key === KEYS.down) {
+ e.preventDefault()
+ openPanel()
+ setArmedIdx(null)
+ moveActive(1)
+ } else if (e.key === KEYS.up) {
+ e.preventDefault()
+ setArmedIdx(null)
+ moveActive(-1)
+ }
+ }
+
+ return (
+
+
+
+ Event subscriptions
+
+
+
{
+ if (!e.currentTarget.contains(e.relatedTarget)) {
+ closePanel()
+ // discard uncommitted text so it doesn't read as added
+ setQuery('')
+ setCommitError(undefined)
+ }
+ }}
+ >
+ {/* click anywhere in the shell to focus the input; the input itself is
+ the interactive element, so no role or keyboard handler is needed */}
+ {/* oxlint-disable-next-line click-events-have-key-events, no-static-element-interactions */}
+
+ {open && (
+ // ARIA 1.2 combobox pattern: focus stays on the input, which points at
+ // the active row via aria-activedescendant, so the listbox and options
+ // are divs and never take focus themselves
+