@weft-js/warp 0.0.0-stage → 0.1.0

package/src/Picker.tsx

@@ -0,0 +1,120 @@
+import { isSheet, messages, pickerPanel, reportMissing, todayIso, uid, type Presentation } from '@weft-js/warp-core'
+import { onMount, state, untrack, watch, type State } from '@weft-js/core'
+import { bindable } from './bind'
+import { Button } from './Button'
+import { Field, type Control, type FieldShell } from './Field'
+import type { IconRef } from './Icon'
+import { Icon } from './Icon'
+import { use } from '@weft-js/warp-core/weft'
+import './fields'
+import '@weft-js/warp-core/styles/rich/body.css'
+import '@weft-js/warp-core/styles/rich/helpers.css'
+import '@weft-js/warp-core/styles/rich/pick.css'
+import '@weft-js/warp-core/styles/rich/segments.css'
+import '@weft-js/warp-core/styles/rich/popover.css'
+
+export { bindable, type Bindable, type Openable } from './bind'
+export type RichFieldProps = FieldShell & {
+  required?: boolean | undefined
+  name?: string | undefined
+  locale?: string | undefined
+  /** Pins "today" (server render, tests); the browser's clock otherwise. */
+  today?: string | undefined
+  /** `auto` opens a popover, or a sheet when the viewport is under 600px wide; `popover` and `sheet` force one. */
+  presentation?: Presentation | undefined
+}
+
+/**
+ * The locale and today a picker renders with. The server and the hydrating client must agree, so both start from the
+ * prop (or en-US and the server's clock, which weft carries over in the state payload); after mount the document's lang
+ * and the browser's clock take over, a microtask later so hydration itself writes nothing.
+ */
+export function usePickerEnv(locale: () => string | undefined, today: () => string | undefined) {
+  const loc = state(untrack(locale) ?? 'en-US')
+  const now = state(untrack(today) ?? todayIso())
+  onMount(() => {
+    queueMicrotask(() => {
+      if (!untrack(locale)) loc.value = document.documentElement.lang || navigator.language || 'en-US'
+      if (!untrack(today)) now.value = todayIso()
+    })
+    watch(locale, l => { if (l) loc.value = l })
+  })
+  return { locale: loc, today: now }
+}
+
+/** The open flag of a panel, from `open`, `defaultOpen` and the panel's first render: contents are built on first open. */
+export function useOpen(open: () => State<boolean> | boolean | undefined, defaultOpen: () => boolean | undefined, onChange: () => ((o: boolean) => void) | undefined) {
+  const flag = bindable<boolean>(open, defaultOpen, false, () => (o: boolean) => untrack(onChange)?.(o))
+  const built = state(untrack(() => flag.value))
+  return {
+    get value() { return flag.value },
+    get built() { return built.value },
+    set(v: boolean) { if (v) built.value = true; flag.set(v) },
+  }
+}
+
+/**
+ * The panel of a picker: a child of the control, so the label stays up and the sweep stays in while it is open (04
+ * "Popovers stay attached"). Anatomy from the specimen: sweep · handle · sheet-head (title, Done) · content.
+ */
+export function Panel({ label, open, trigger, presentation, align, kind, children }: { label: string; open: { value: boolean; built: boolean; set(v: boolean): void }; trigger: () => HTMLElement; presentation?: Presentation | undefined; align?: 'start' | 'end'; kind?: string | undefined; children: () => unknown }) {
+  let panel: HTMLDialogElement | undefined
+  const done = () => open.set(false)
+  use(pickerPanel, () => panel, () => ({ open: open.value, trigger: trigger(), presentation, align, onClose: done }))
+  return (
+    <dialog ref={n => (panel = n)} data-scope="popover" data-kind={kind} data-align={align} data-sweep="" popover="manual" aria-label={label}>
+      <span data-part="sweep" aria-hidden="true"></span>
+      <div data-part="handle" aria-hidden="true"></div>
+      <div data-part="sheet-head"><span>{label}</span><Button emphasis="soft" size="sm" data-part="done" onClick={done}>Done</Button></div>
+      {open.built && children()}
+    </dialog>
+  )
+}
+
+/** The trigger at the end of a composite: a calendar or clock icon button (aria-haspopup, aria-expanded). */
+export function Trigger({ el, icon, label, open, disabled, onToggle }: { el?: (el: HTMLButtonElement) => void; icon: IconRef; label: string; open: boolean; disabled?: boolean | undefined; onToggle: () => void }) {
+  return (
+    <button ref={n => el?.(n)} type="button" data-part="trigger" aria-haspopup="dialog" aria-expanded={open ? 'true' : 'false'} aria-label={label} disabled={disabled} onClick={onToggle}>
+      <Icon name={icon} />
+    </button>
+  )
+}
+
+/** A hidden input with the ISO value, so a native form posts it. */
+export function Hidden({ name, value }: { name?: string | undefined; value: () => string }) {
+  return <>{name && <input type="hidden" name={name} value={value()} />}</>
+}
+
+/**
+ * A composite in the field shell: a body role=group named by the visible label; segments keep their short names. `bound`
+ * is its value: a form's reset goes back to the first one (`onReset` clears what the composite holds beside it), and
+ * `required` is a hidden text input (a type=hidden one is never validated) that is empty while the value is, so the
+ * form won't submit; the browser's own message shows as the field's error.
+ */
+export function Composite({ control, bound, onReset, ...props }: FieldShell & { control: Control; bound: { readonly value: unknown; reset(): void }; onReset?: (() => void) | undefined; required?: boolean | undefined }) {
+  const missing = state<string | undefined>(undefined)
+  const blank = () => { const v = bound.value; return v === null || v === '' || (typeof v === 'object' && Object.values(v).includes(null)) }
+  let proxy: HTMLInputElement | undefined
+  const reset = () => {
+    bound.reset()
+    onReset?.()
+    missing.value = undefined
+    if (proxy) proxy.value = blank() ? '' : 'set' // the native reset emptied it, and the value may not have changed
+  }
+  return (
+    <Field
+      {...props}
+      error={props.error ?? (blank() ? missing.value : undefined)}
+      group
+      reset={reset}
+      control={p => (
+        <>
+          {untrack(() => control(p))}
+          {props.required && <input ref={n => (proxy = n)} onInvalid={(e: Event) => (missing.value = reportMissing(e))} data-part="sr-only" tabindex="-1" aria-hidden="true" required disabled={props.disabled} readonly={props.readonly} value={blank() ? '' : 'set'} />}
+        </>
+      )}
+    />
+  )
+}
+
+export { isSheet, messages, uid }

package/src/PlaceField.tsx

@@ -0,0 +1,126 @@
+import { PinIcon } from '@weft-js/warp-icons'
+import { addressFormat, addressPart, formReset, withAddressPart, type Address, type AddressPart, type TimeZoneId } from '@weft-js/warp-core'
+import { derived, state, untrack } from '@weft-js/core'
+import { Chip } from './Chip'
+import { ComboField } from './Combobox'
+import { Input } from './Field'
+import { bindable, type Bindable, type RichFieldProps } from './Picker'
+import { CountrySelect } from './RichSelect'
+import { use } from '@weft-js/warp-core/weft'
+import '@weft-js/warp-core/styles/rich/address.css'
+
+/** A place a lookup returned. */
+export type Place = { displayName: string; lat: number; lng: number; timezone?: TimeZoneId; category?: string; id?: string }
+/** A filter chip that nudges a place lookup. */
+export type PlaceBias = { id: string; label: string; default?: boolean }
+
+/** Props for PlaceLookupInput. */
+export type PlaceLookupInputProps = RichFieldProps & Bindable<Place | null> & {
+  search: (q: string, o: { bias: Record<string, boolean>; signal: AbortSignal }) => Promise<Place[]>
+  biases?: PlaceBias[]
+  minChars?: number
+}
+
+/** PlaceLookupInput (04 §3): "a place", not a postal address. warp ships no geocoder: the app supplies `search()`. */
+export function PlaceLookupInput({ value, defaultValue, onValueChange, search, biases, minChars = 2, label, hint, ...rest }: PlaceLookupInputProps) {
+  const v = bindable<Place | null>(() => value, () => defaultValue, null, () => onValueChange)
+  const text = state(untrack(() => v.value?.displayName ?? ''))
+  const bias = state<Record<string, boolean>>(untrack(() => Object.fromEntries((biases ?? []).map(b => [b.id, !!b.default]))))
+  const list = derived(() => biases ?? [])
+  const chosen = derived(() => { const p = v.value; return p ? `${p.lat.toFixed(4)}, ${p.lng.toFixed(4)}${p.timezone ? ` · ${p.timezone}` : ''}` : undefined })
+  let box: HTMLDivElement | undefined
+  const reset = () => {
+    v.reset()
+    text.value = v.value?.displayName ?? ''
+    box!.querySelector('input')!.value = text.value // the native reset emptied it, and the text may not have changed
+  }
+  return (
+    <div ref={n => (box = n)} class="stack">
+      <ComboField
+        icon={PinIcon}
+        {...rest}
+        reset={reset}
+        label={label}
+        hint={hint}
+        minChars={minChars}
+        text={() => text.value}
+        status={() => chosen.value}
+        find={(q, signal) => search(q, { bias: untrack(() => bias.value), signal })}
+        row={(p: Place) => ({ main: p.displayName, sub: p.category, meta: `${p.lat.toFixed(2)}, ${p.lng.toFixed(2)}` })}
+        onText={t => { text.value = t; if (v.value) v.set(null, 'keyboard') }}
+        onPick={(p: Place) => { text.value = p.displayName; v.set(p, 'keyboard') }}
+      />
+      {list.value.length > 0 && (
+        <div class="chips" role="group" aria-label="Prefer">
+          {list.value.map(b => <Chip key={b.id} pressed={!!(bias.get(b.id) as boolean | undefined)} onClick={() => (bias.value = { ...bias.value, [b.id]: !bias.value[b.id] })}>{b.label}</Chip>)}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/** What an address lookup needs from a provider. */
+export interface AddressProvider {
+  suggest(q: string, o: { country?: string; signal: AbortSignal }): Promise<Array<{ id: string; label: string; secondary?: string }>>
+  resolve(id: string): Promise<Address>
+}
+/** Props for AddressField. */
+export type AddressFieldProps = Bindable<Address | null> & { label?: string | undefined; provider?: AddressProvider | undefined; countries?: string[] | undefined; defaultCountry?: string; locale?: string | undefined; name?: string | undefined; errors?: Partial<Record<AddressPart, string>> | undefined }
+
+/**
+ * AddressField (04 §3): the country comes first and decides the fields. Line 1 is a combobox when there is a `provider`;
+ * manual entry is one click away, and automatic when the provider fails or takes over 1.5s.
+ */
+export function AddressField({ value, defaultValue, onValueChange, label = 'Address', provider, countries, defaultCountry = 'US', locale, name, errors }: AddressFieldProps) {
+  const v = bindable<Address | null>(() => value, () => defaultValue, null, () => onValueChange)
+  const country = state<string | null>(untrack(() => v.value?.country ?? defaultCountry))
+  const format = derived(() => addressFormat(country.value!))
+  const manual = state(false)
+  const note = state('')
+  const touched = state<Record<string, boolean>>({})
+  const address = () => v.value ?? { country: country.value!, lines: [] }
+  const write = (part: AddressPart, text: string) => v.set(withAddressPart(address(), part, text), 'keyboard')
+  const fill = async (id: string) => {
+    try {
+      const a = await provider!.resolve(id)
+      country.value = a.country
+      v.set(a, 'keyboard')
+      note.value = 'Filled from suggestion. Check line 2.'
+    } catch { goManual('Suggestions are unavailable. Enter the address here.') }
+  }
+  const goManual = (say: string) => { manual.value = true; note.value = say }
+  const postal = derived(() => {
+    const f = format.value, t = addressPart(v.value, 'postalCode').trim()
+    return f.postal && t && touched.value.postal && !f.postal.test(t) ? f.postalMessage : undefined
+  })
+  let root: HTMLDivElement | undefined
+  use(formReset, () => root, () => () => {
+    v.reset()
+    country.value = v.value?.country ?? defaultCountry
+    manual.value = false
+    note.value = ''
+    touched.value = {}
+  })
+  return (
+    <div ref={n => (root = n)} role="group" aria-label={label} class="stack">
+      {name && <input type="hidden" name={name} value={v.value ? JSON.stringify(v.value) : ''} />}
+      <div class="addr-grid">
+        <CountrySelect label="Country or region" value={country} options={countries} locale={locale} onValueChange={c => { if (v.value) v.set({ ...v.value, country: c! }, 'pointer') }} />
+        {format.value.fields.map(([part, title, span, auto]) => {
+          const problem = derived(() => errors?.[part])
+          return (
+            <div key={`${country.value}:${part}`} data-span={span}>
+              {part === 'line1' && provider && !manual.value
+                ? <ComboField icon={PinIcon} label={title} autocomplete={auto} text={() => addressPart(v.value, 'line1')} timeout={1500} find={(q, signal) => provider.suggest(q, { country: country.value!, signal })} row={s => ({ main: s.label, sub: s.secondary, icon: PinIcon })} onText={t => write('line1', t)} onPick={s => fill(s.id)} onFail={() => goManual('Suggestions are unavailable. Enter the address here.')} />
+                : <Input label={title} autocomplete={auto} icon={part === 'line1' ? 'pin' : undefined} value={addressPart(v.value, part)} error={problem.value ?? (part === 'postalCode' ? postal.value : undefined) ?? (errors ? '' : undefined)} onInput={e => write(part, e.currentTarget.value)} onBlur={part === 'postalCode' ? () => (touched.value = { ...touched.value, postal: true }) : undefined} />}
+            </div>
+          )
+        })}
+      </div>
+      <p class="addr-foot">
+        {provider && !manual.value && <button type="button" class="linkish" onClick={() => goManual('Manual entry.')}>Enter address manually</button>}
+        {' '}<span aria-live="polite">{note.value}</span>
+      </p>
+    </div>
+  )
+}

package/src/Popover.tsx

@@ -0,0 +1,34 @@
+import { popover, uid, type Align, type Side } from '@weft-js/warp-core'
+import { state, untrack } from '@weft-js/core'
+import { Button, type ButtonProps } from './Button'
+import { use } from '@weft-js/warp-core/weft'
+import './styles'
+import '@weft-js/warp-core/styles/components/popover.css'
+
+/**
+ * A button that opens a non-modal dialog panel (05 §3; components.html:574-586, 1557-1571): the outline trigger holds
+ * its sweep while open (aria-expanded); focus moves into the panel and back to the trigger; Escape, a press outside
+ * or focus leaving closes it; [data-close-popover] buttons inside close it. Named by its title, else by its trigger.
+ * `inline` draws the panel open under its trigger in the page's flow, for docs and previews: no top layer, no placement,
+ * no light dismiss; the trigger still shows and hides it.
+ */
+export function Popover({ label, title, description, side, align, trigger, inline, children }: { label: unknown; title?: unknown; description?: unknown; side?: Side; align?: Align; trigger?: ButtonProps; /** Drawn open under the trigger, in the page's flow: no top layer or light dismiss. For docs and previews. */ inline?: boolean; children?: unknown }) {
+  const id = uid('pop')
+  const flat = untrack(() => !!inline)
+  const open = state(flat)
+  let button: HTMLButtonElement | undefined
+  let panel: HTMLDivElement | undefined
+  if (!flat) use(popover, () => panel, () => ({ open: open.value, trigger: button!, side, align, onClose: () => (open.value = false) }))
+  return (
+    <>
+      <Button emphasis="outline" tone="neutral" {...(trigger ?? {})} ref={(el: HTMLButtonElement) => (button = el)} id={`${id}-b`} aria-haspopup="dialog" aria-expanded={open.value ? 'true' : 'false'} aria-controls={id} onClick={() => (open.value = !open.value)}>
+        {label}
+      </Button>
+      <div ref={n => (panel = n)} data-scope="popover" data-part="content" role="dialog" popover={flat ? undefined : 'manual'} data-presentation={flat ? 'inline' : undefined} data-state={flat ? (open.value ? 'open' : 'closed') : undefined} hidden={flat && !open.value} id={id} aria-labelledby={title !== undefined ? `${id}-t` : `${id}-b`}>
+        {title !== undefined && <p data-part="title" id={`${id}-t`}>{title}</p>}
+        {description !== undefined && <p data-part="description">{description}</p>}
+        {children}
+      </div>
+    </>
+  )
+}

package/src/Progress.tsx

@@ -0,0 +1,26 @@
+import { untrack } from '@weft-js/core'
+import type { Tone } from './Button'
+import './styles'
+import '@weft-js/warp-core/styles/components/progress.css'
+
+/**
+ * Progress (05 §5): linear, or `shape="circle"`. Without a `value` it is indeterminate. The range moves through
+ * the rail with clip-path on the sweep curve; `--_v` is the only thing a value change writes.
+ */
+export function Progress({ label, value, shape, tone, showValue = true }: { label: string; value?: number; shape?: 'linear' | 'circle' | undefined; tone?: Tone | undefined; showValue?: boolean }) {
+  const pct = () => (value === undefined ? undefined : Math.max(0, Math.min(100, value)))
+  const v = () => (pct() === undefined ? undefined : `--_v:${pct()! / 100}`)
+  if (untrack(() => shape) === 'circle')
+    return (
+      <div data-scope="progress" data-shape="circle" data-tone={tone} role="progressbar" aria-label={label} aria-valuemin="0" aria-valuemax="100" aria-valuenow={pct() === undefined ? undefined : Math.round(pct()!)} data-state={value === undefined ? 'indeterminate' : undefined} style={v()}>
+        <svg viewBox="0 0 36 36" aria-hidden="true"><circle data-part="track" cx="18" cy="18" r="15.9155" pathLength="100" /><circle data-part="range" cx="18" cy="18" r="15.9155" pathLength="100" /></svg>
+        {showValue && value !== undefined && <span data-part="value-text">{Math.round(pct()!)}</span>}
+      </div>
+    )
+  return (
+    <div data-scope="progress" data-part="root" data-tone={tone} role="progressbar" aria-label={label} aria-valuemin={value === undefined ? undefined : '0'} aria-valuemax={value === undefined ? undefined : '100'} aria-valuenow={pct() === undefined ? undefined : Math.round(pct()!)} aria-valuetext={value === undefined ? label : undefined} data-state={value === undefined ? 'indeterminate' : undefined} style={v()}>
+      <div data-part="label-row"><span>{label}</span><span data-part="value-text">{value === undefined ? '—' : `${Math.round(pct()!)}%`}</span></div>
+      <div data-part="track"><div data-part="range"></div></div>
+    </div>
+  )
+}

package/src/RecurrenceField.tsx

@@ -0,0 +1,126 @@
+import { addDays, fmt, formReset, occurrences, parseRule, ruleSentence, stringifyRule, weekOrder, weekdayName, weekdayOrdinal, DAYS, dow, ymd, type Frequency, type IsoDate, type Rule } from '@weft-js/warp-core'
+import { derived, flush, state } from '@weft-js/core'
+import { Chip } from './Chip'
+import { DateField } from './DateField'
+import { Textarea } from './Field'
+import { NumberField } from './NumberField'
+import { bindable, usePickerEnv, type Bindable } from './Picker'
+import { use } from '@weft-js/warp-core/weft'
+import '@weft-js/warp-core/styles/rich/recurrence.css'
+
+const FREQS: Frequency[] = ['DAILY', 'WEEKLY', 'MONTHLY', 'YEARLY']
+const titled = (s: string) => s[0] + s.slice(1).toLowerCase()
+
+/** Chips as a radio group (one tab stop, arrows move and select, every chip has aria-checked). */
+function ChipRadios<V extends string>({ label, value, options, onChange }: { label: string; value: V; options: { value: V; label: string }[]; onChange: (v: V) => void }) {
+  let box: HTMLDivElement | undefined
+  const move = (e: KeyboardEvent) => {
+    const d = ({ ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 } as Record<string, number>)[e.key]
+    if (!d) return
+    e.preventDefault()
+    const at = options.findIndex(o => o.value === value)
+    onChange(options[(at + d + options.length) % options.length]!.value)
+    flush()
+    box?.querySelector<HTMLElement>('[aria-checked="true"]')?.focus()
+  }
+  return (
+    <div ref={n => (box = n)} role="radiogroup" aria-label={label} class="chips" onKeyDown={move}>
+      {options.map(o => <button key={o.value} type="button" data-scope="chip" role="radio" aria-checked={o.value === value ? 'true' : 'false'} tabindex={o.value === value ? '0' : '-1'} onClick={() => onChange(o.value)}>{o.label}</button>)}
+    </div>
+  )
+}
+
+/** Props for RecurrenceField. */
+export type RecurrenceFieldProps = Bindable<string | null> & {
+  label: string
+  dtstart: IsoDate
+  preview?: number
+  frequencies?: Frequency[]
+  locale?: string | undefined
+  name?: string | undefined
+}
+
+/**
+ * RecurrenceField (04 §2): the summary leads and the controls sit below it. An RRULE with parts this field can't edit
+ * is never rewritten: it becomes read-only "Custom rule" with the raw text and an Edit as text escape.
+ */
+export function RecurrenceField({ value, defaultValue, onValueChange, label, dtstart, preview = 5, frequencies = FREQS, locale, name }: RecurrenceFieldProps) {
+  const env = usePickerEnv(() => locale, () => undefined)
+  const v = bindable<string | null>(() => value, () => defaultValue, 'FREQ=WEEKLY', () => onValueChange)
+  const rule = derived(() => parseRule(v.value))
+  const asText = state(false)
+  const custom = derived(() => rule.value.unknown.length > 0)
+  const endMode = derived<'never' | 'count' | 'until'>(() => (rule.value.COUNT ? 'count' : rule.value.UNTIL ? 'until' : 'never'))
+  const set = (patch: Partial<Rule>) => v.set(stringifyRule({ ...rule.value, ...patch }), 'pointer')
+  const next = derived(() => occurrences(rule.value, dtstart, preview))
+  const order = derived(() => weekOrder(env.locale.value))
+  const monthly = derived(() => {
+    const [, , d] = ymd(dtstart)
+    const { nth, last } = weekdayOrdinal(dtstart)
+    const day = DAYS[dow(dtstart)]!
+    const dayName = weekdayName(day, env.locale.value)
+    return [
+      { value: 'day', label: `On day ${d}`, patch: { BYMONTHDAY: d, BYDAY: [] } },
+      { value: 'nth', label: `On the ${['', 'first', 'second', 'third', 'fourth', 'fifth'][nth]} ${dayName}`, patch: { BYDAY: [`${nth}${day}`], BYMONTHDAY: null } },
+      ...(last ? [{ value: 'last', label: `On the last ${dayName}`, patch: { BYDAY: [`-1${day}`], BYMONTHDAY: null } }] : []),
+      { value: 'end', label: 'On the last day', patch: { BYMONTHDAY: -1, BYDAY: [] } },
+    ]
+  })
+  const monthlyNow = derived(() => {
+    const r = rule.value
+    return r.BYMONTHDAY === -1 ? 'end' : r.BYDAY[0]?.startsWith('-1') ? 'last' : r.BYDAY.length ? 'nth' : 'day'
+  })
+  const toggleDay = (d: string) => {
+    const on = rule.value.BYDAY
+    set({ BYDAY: on.includes(d) ? (on.length > 1 ? on.filter(x => x !== d) : on) : [...on, d] })
+  }
+  const setEnd = (m: 'never' | 'count' | 'until') => set(m === 'count' ? { COUNT: 10, UNTIL: null } : m === 'until' ? { COUNT: null, UNTIL: addDays(dtstart, 60) } : { COUNT: null, UNTIL: null })
+  let root: HTMLDivElement | undefined
+  use(formReset, () => root, () => () => { v.reset(); asText.value = false })
+  return (
+    <div ref={n => (root = n)} role="group" aria-label={label} class="stack">
+      {name && <input type="hidden" name={name} value={v.value ?? ''} />}
+      {custom.value || asText.value ? (
+        <>
+          <p class="rr-sentence" aria-live="polite">Custom rule</p>
+          {asText.value
+            ? <Textarea label="RRULE" value={v.value ?? ''} onInput={e => v.set(e.currentTarget.value, 'keyboard')} />
+            : <output class="readout"><span>RRULE</span><b>{v.value}</b></output>}
+          <div class="chips"><button type="button" class="linkish" onClick={() => (asText.value = !asText.value)}>{asText.value ? 'Done' : 'Edit as text'}</button></div>
+        </>
+      ) : (
+        <>
+          <p class="rr-sentence" aria-live="polite">{ruleSentence(rule.value, dtstart, env.locale.value)}.</p>
+          <div class="rr-grid">
+            <div class="stack">
+              <ChipRadios label="Frequency" value={rule.value.FREQ} options={frequencies.map(f => ({ value: f, label: titled(f) }))} onChange={f => set({ FREQ: f, BYDAY: f === 'WEEKLY' ? rule.value.BYDAY : [], BYMONTHDAY: null })} />
+              <NumberField label="Every (interval)" min={1} max={99} value={rule.value.INTERVAL} onValueChange={n => set({ INTERVAL: n ?? 1 })} />
+              {rule.value.FREQ === 'WEEKLY' && (
+                <div role="group" aria-label="On these days" class="chips">
+                  {order.value.map(d => <Chip key={d} data-day={d} pressed={rule.value.BYDAY.includes(d)} onClick={() => toggleDay(d)}><span aria-hidden="true">{weekdayName(d, env.locale.value, 'short')}</span><span class="sr">{weekdayName(d, env.locale.value)}</span></Chip>)}
+                </div>
+              )}
+              {rule.value.FREQ === 'MONTHLY' && <ChipRadios label="On" value={monthlyNow.value} options={monthly.value} onChange={m => set(monthly.value.find(o => o.value === m)!.patch)} />}
+              <ChipRadios label="Ends" value={endMode.value} options={[{ value: 'never', label: 'Never ends' }, { value: 'count', label: 'After…' }, { value: 'until', label: 'On date…' }]} onChange={setEnd} />
+              {endMode.value === 'count' && <NumberField label="Occurrences" min={1} max={999} value={rule.value.COUNT} onValueChange={n => set({ COUNT: n ?? 1 })} />}
+              {endMode.value === 'until' && <DateField label="Last date" value={rule.value.UNTIL ?? null} onValueChange={d => { if (d) set({ UNTIL: d }) }} />}
+            </div>
+            <div class="stack">
+              <p class="dt-cap">Next {preview}</p>
+              <ol class="rr-next">
+                {next.value.map(d => <li key={d}>{fmt(d, { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' }, env.locale.value)}</li>)}
+                {!next.value.length && <li>No occurrences.</li>}
+              </ol>
+              <details>
+                <summary>Advanced</summary>
+                <output class="readout"><span>RRULE</span><b>{v.value}</b></output>
+                <button type="button" class="linkish" onClick={() => (asText.value = true)}>Edit as text</button>
+              </details>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+